- 投稿日：2022-01-13T18:40:28+09:00
第4回 CSSの書き方について
はじめに HTML言語を全く触ったことがない超初心者が、学校で学んだことを忘れないようにすることを目的に作成しています。 HTMLとはどういったものなのか、結局何ができるのかを一緒に学んで行きましょう。 注意事項 この投稿は第3回目の続きになります。そのため、前回紹介した内容は説明せずに進めていきます。 ド素人ゆえ間違った記載(独自の解釈をしている)場合があるかもしれませんがご容赦ください。 説明に関してはできるだけ図を用いてわかりやすく、作成していこうと思います。 使用するのはGoogle Chrome、Visual Studio Codeの2点になります。 目次 1.CSSの書く場所について 2.CSSの書き方について 1.CSSの書く場所について 3つの方法を順に書いていこうと思います。 本題に入る前に一度、前回書いたbodyタグの中身は一度全て消してください。 1ｰ1 HTMLタグの中に書く方法 先ずはh1タグでCSSと表記されるようにbodyタグの中に書きましょう。 そのh1タグの中に書いて行きます。h1のとなりに半角スペース、style="color:red;"と書きます。 style属性を書くとその中でCSSを書くことができます。 色の指定の後にセミコロンを忘れないように！ 参照コード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>hamuo3</title> </head> <body> <h1 style="color: red;">CSS</h1> </body> </html> 実行したときCSSの文字が赤色になっていればOKです。 1-2 HTMLファイルの中に書く方法 一度bodyタグの中をstyle属性を消してこの状態にしておいてください。 <h1>CSS</h1> 方法はheadタグの中にstyleタグを書いていきます。 そのstyleタグの中にh1{}と書きます。{}の間で改行し、その中に先ほどと同じようにcolor:blue;と書き、一度保存し、Chromeを再読み込みすれば、今度はCSSの文字が青色に変わっているはずです。 参照コード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>hamuo3</title> <style> h1{ color: blue; } </style> </head> <body> <h1>CSS</h1> </body> </html> 1-3 別のファイルに書く方法 ホームページを作成するときはCSSを別ファイルに書くことが一般的です。 なぜかというとCSSファイルを作っておくことによって修正する際にhtml内に書いているより負担が少なくて済むからです。 ではファイルを作っていきましょう。 作る場所はsampleファイル内のindex.htmlのある場所に新規作成からCSSと名前を付けて作ります。 CSSのファイルの中で右クリック→新規作成→テキストドキュメント→style.cssと名前を変更します。 次にこのテキストエディタをVSCodeにドラッグ&ドロップで読み込ませます。 ここまでできたらhtml ファイルとcssファイルを紐付けしていきます。 方法はhtmlのheadタグから行います。 先ほど書いたstyleタグは消して、新しくlinkタグを使って紐付けを行います。 参照コード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>hamuo3</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <h1>CSS</h1> </body> </html> この href="css/style.cssでcssファイルのstyle.cssを使う言うことになります。 これによって紐付けは完了です。ではcssを操作して文字の色を変えていきましょう。 style.cssにこちらのコードを入れて、style.cssとリンク付けを行ったのでindex.htmlの保存を忘れずにしてください。 h1{ color: green; } Chromを再読み込みさせ、文字が緑になっていれば成功です。 2.CSSの書き方について ここまでの説明である程度、規則性に気づいていると思いますが、書き方としてはCSSを適用させたい箇所、セレクターを書き、{}を書き、その間に操作したい内容を書いて行く形になります。ここの部分のことをプロパティーといいます。 そのため、今回の文字色変換の大まかな流れとしては、セレクター{プロパティー、コロン、値、セミコロン}という書き方になります。 また、cssの中身は色の変換+文字サイズの変更など複数書くことができます。 いかがだったでしょうか、今回はここまでとさせていただきます。 次回は一度簡単なホームページを作ってみようと思います。 それでは皆さん、お疲れ様でした。
- 投稿日：2022-01-13T14:40:34+09:00
javascriptでクリックやタップの長押し処理をする方法
はじめに 散々出尽くされていると思いますが健忘録として残しておきます。極力シンプルな方法かつPCとスマホ両対応のつもりです。 実装例 クリック押しっぱなしで数値が加算され続けます。 See the Pen Untitled by rahhi555 (@rahhi555) on CodePen. コード解説 html <p id="target">0</p> <!-- touch-action: none; スマホでタップしたままスワイプするとpointerupイベントが発生しない現象の防止 user-select: none; 及び oncontextmenu="return false;" 長押し時のポップアップ停止 --> <button id="btn" style="touch-action: none; user-select: none;" oncontextmenu="return false;"> クリック </button> javascript /** * 押下時にインクリメントし続ける処理を登録し、解放時に登録した処理を削除する */ document.getElementById('btn').addEventListener('pointerdown', () => { const intervalId = setInterval(increment, 50) // document要素にイベント登録することで、クリックした後ボタンから動かしてもOK // once: true を指定して一度発火したらイベントを削除する document.addEventListener('pointerup', () => { clearInterval(intervalId) }, { once: true }) }) const increment = () => { // インクリメント処理は記事の趣旨と関係ないので省略 あとがき スマホの動作はchrome dev toolsで確認しただけなので、実機だと不具合があるかもしれません。
- 投稿日：2022-01-13T11:11:51+09:00
Swiperを使ってスライダーをつくる
はじめに スライダーを作りたい！ということで、今回Swiperを使って実装しました。 基本の書き方と応用したものを、備忘録としてまとめています。 Swiperとは？ jQueryを使わず、スライダーが作れるJavaScriptのライブラリです。 ただし、バージョン5以降はIE対象外のため、IE対応させるにはバージョン4を使う必要があります。 Swiperを使うには GitHubからファイルをダウンロード、もしくはCDNを読み込む 今回こちらのサイトからCDNで読み込んで使用しました。 基本の記述 HTML <!-- スライダー大枠 --> <div class="swiper-container"> <!-- スライドしたい内容を覆う枠 --> <div class="swiper-wrapper"> <!-- スライド --> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> ... </div> <!-- ページネーション（※使いたい場合） --> <div class="swiper-pagination"></div> <!-- ナビゲーション（※使いたい場合） --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <!-- スクロールバー（※使いたい場合） --> <div class="swiper-scrollbar"></div> </div> CSS サイズや見た目など設定する際は適宜追加します。 .swiper-container { max-width: 1000px; margin: 0 auto; } .swiper-slide { text-align: center; } JSでSwiperを初期化 変数swiperを初期化。 この時点でスライダーとしての形はできてる状態。 中身に使用するオプションを追加していく。（必要なオプション機能を適宜） const swiper = new Swiper('.swiper-container', { //↓追加していく // パラメーター direction: 'vertical', loop: true, // ページネーション pagination: { el: '.swiper-pagination', }, // ナビゲーション navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, // スクロールバー scrollbar: { el: '.swiper-scrollbar', }, }); 基本的な実装 矢印をクリックしたらスライドするのみ See the Pen Untitled by chisato (@mgkita) on CodePen. JSにパラメーターなどを追加することで色んな動きをつけることができます。 ※「値」を記述する際はtrue・false、数字以外は""か''で囲う 例） loop: true：最後までいったら1枚目に戻ってループする effect: 'fade' ：スライドしたときにフェードしながら画像が切り替わる slidesPerView: 任意の数字：仮に3を指定すると、3枚横並びで表示される など ↓公式より 応用ver 汎用的なスライダーを作成しました。 今回は実装してませんが、もっと見るをクリックすると画像一覧のようなページにとぶイメージのスライダーです。 See the Pen Untitled by chisato (@mgkita) on CodePen. JS const mySwiper = new Swiper(".cat-slider", { spaceBetween: 50, width: 370, breakpoints: { 767: { spaceBetween: 15, width: 290, slidesPerView: 1 } }, navigation: { nextEl: ".swiper-button-next--cat", prevEl: ".swiper-button-prev--cat" } }); spaceBetween：画像と画像の幅を指定 width：画像自体の横幅を指定 breakpoints：767px以下の時のスタイルを指定 slidesPerView：横幅100%としたときに画像を何枚見せるか navigation：両端の矢印を設置 JS部分はこれだけの記述で完成！ まとめ SwiperはJSを数行書くだけで動くものができてしまうので、手早くスライダーを作成したいときに便利です。 ただ複雑なレイアウトになると難しい部分もあったので、cssを使ったスライダーなどとうまく使い分けれるようにしていきたいと思いました。 おまけ 今回使用した画像は、私の先輩のおうちのにゃんこちゃん達でした！ 快く提供してくださり、スペシャルサンクスです！！ 可愛すぎるので最後にもう一度貼っておきます。 皆さんもぜひ癒されてください。