【Bootstrapその⑪】グリッドシステムについてもっと深掘ってみた【学習積み上げ】
着々とBootstrapの学習をしてきました、マサです。
これまでの記事でも何度か書いてきましたが、Bootstrapに頼るのは抵抗があるという方は多いと思います。
Bootstrapに慣れすぎるとcssが疎かになったり、htmlの記述が多くなったり、また他で代用できるとも思います。
ですが、グリッドシステムだけでも採用する価値はあります。
なので、ここだけでもきちんと理解するために、以前記事にしたものをリライトして、個人的に「もっと理論的なことや知っておくべきことがあるな」と感じたところをもっと深堀ってみました。
内容としては、コンテナについての細かいまとめ、その次は以前紹介できなかった余白の使い方についてのまとめです。
では、いきましょう！
Bootstrapのグリッドシステムの詳細
Bootstrapでグリッドシステムを使うときは親要素のclass名にcontainerをつけ、その子要素のclass名にrowをつけるということは以前やりました。
ではこのcontainerとrowの関係性はどうなっているのか？
ここを見ていきます。
containerとrowの仕組み
まず、containerに関してはcontainerとcontainer-fluidの2種類があります。
違いとしては内部コンテナの幅を固定するかしないかです。(実例を後述します)
そしてcontainerとrowに関して、Bootstrapで事前に付いているスタイルがあります。
それは、
.container { width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } .row { display: flex; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; }
これです。containerとcontainer-fluidについているスタイルは同じです。
ポイントはcontainerにpaddingが、rowにはネガティブmarginがかかっていることですね。
これを踏まえてcontainerとrowの指定を変えるとどういった挙動になるのか見てみましょう。
両方指定した場合
<div class="container mt-5"> <div class="row"> <div class="col-3" style="height: 200px; background: #f88;">box1</div> <div class="col-9" style="height: 200px; background: #f66;">box2</div> </div> </div> <div class="cotainer-fluid"> <div class="row"> <div class="col-5" style="height: 200px; background: #5a5;">box3</div> <div class="col-1" style="height: 200px; background: #5f5;">box4</div> <div class="col-4" style="height: 200px; background: #5a5;">box5</div> <div class="col-2" style="height: 200px; background: #5f5;">box6</div> </div> </div> </div>
まずはbox1,2とbox3~6で表示が異なる点から見ていきましょう。
containerをclass名に指定すると、左右に均等なmarginを確保してくれているように見えますが、これはcontainerのclassに「ウィンドウの幅に応じて内部の固定幅が決まる」という特徴があるからです。
以前の記事でも表として登場させましたが、わかりやすく日本語で書いてみました。
| ウィンドウの幅 | 576px未満 | 576～768px未満 | 768～992px未満 | 992～1200px未満 | 1200px以上 |
|---|---|---|---|---|---|
| コンテナの幅 | 100%(ウインドウ幅に準じる) | 540px | 720px | 960px | 1140px |
このようにウィンドウに応じて、内部の幅が段階的に変わっていくのですが、この画像の場合、bodyは1300px以上あるので、box1,2をあわせたコンテナのwidthは表の一番右のように、1140pxとなります。
結果、1349px-1140pxの209pxが余るのですが、Bootstrapのcontainerには前述したようにデフォルトでmarginの左右にautoがかかっているので、209÷2=104.5pxが左右均等にかかることで、コンテナがセンターに位置します。
対して、cotainer-fluidは「ウィンドウの幅に関わらずに内部の幅を固定する」という意味になります。
なので、コンテナ＝bodyの幅と同じ1349pxを12等分にして、colで分けて表示しているということになります。
そしてここからが本題です。
containerにはデフォルトでmarginの左右にautoがかかっていると前述しましたが、先ほどコードで書いたように他にもpaddingが左右に15pxかかって、同じようにrowにはデフォルトでmarginが-15pxがかかっています。
そうすると余白が相殺されるので、0になります。
特にcotainer-fulidを指定したときにウィンドウの幅ピッタリに要素が表示されるのが分かります。
ですので、ウィンドウの幅を変えたとしても、横スクロールバーは表示されずにピッタリになっています。
こういった事情があるため、container(container-fulid)とrowは両方とも指定することがデザインが崩れないためには望ましいとされています。
containerのみを指定した場合
では先ほどのbox1,2を含むrowをコメントアウトして、containerのみにしてみました。
<div class="container"> <!-- <div class="row"> --> <div class="col-3" style="height: 200px; background: #f88;">box1</div> <div class="col-9" style="height: 200px; background: #f66;">box2</div> <!-- </div> --> ～ </div>
この場合はcolが無効になり、要素が縦並びになります。
しかしこれでは、余白の挙動がよくわかりません。
なので、rowを外しても影響がないようにcol-12のbox7を追加してみました。
<div class="container-fulid"> <div class="row"> <div class="col-12" style="height: 200px; background: #57b;"> box7</div> </div> </div>
containerとrowの両方指定のときは、ウィンドウの幅ぴったりに要素が表示されます。
そして、これのrowの部分をなくしてみると、
先ほどと似ていますが1349pxから1319pxに変わったことで、左右に余白ができました。
このことから、rowをなくしてcontainer(container-fulid)のみの指定にすると、余白の相殺がなくなり、container(container-fulid)にデフォルトで付いている左右のpaddingが15pxのみになります。
つまり、要素に計30pxの余白がつくことになります。
rowのみを指定した場合
では、containerをなくしてrowのみの指定にするとどうでしょう。
<!-- <div class="container mt-5"> --> <div class="row"> <div class="col-3" style="height: 200px; background: #f88;">box1</div> <div class="col-9" style="height: 200px; background: #f66;">box2</div> </div> <!-- </div> -->
わかりやすくするため、box-1,2のcontainer部分をコメントアウトしてみました。
この場合はcontainerのmarginもpaddingもないため、画面幅の領域いっぱいに要素が広がります。
そして、rowにデフォルトで付いているmargin-15px分が押し広げられることになるので、
このように、1349pxから1379pxと逆に30px分大きくなっています。
bodyのwidthは変わらず1349pxなので、今度は横スクロールバーもついていますね。
no-guttersを用いた場合
割とマニアックなケースですが、no-guttersというコードをrowと一緒にclass名に指定する方法があります。
box2のrowにのみno-guttersを指定しました。
<div class="container-fluid"> <div class="row no-gutters"> <div class="col-5" style="height: 200px; background: #5a5;">box3</div> <div class="col-1" style="height: 200px; background: #5f5;">box4</div> <div class="col-4" style="height: 200px; background: #5a5;">box5</div> <div class="col-2" style="height: 200px; background: #5f5;">box6</div> </div> </div>
このコードの意味はrowについた余白(ネガティブマージン)を無効にするという意味になるので、このように見え方は先ほどcontainerのみを指定したときのpadding15px分が左右の外側についた状態になります。
メリットとしては、先ほどのように普通にrowを無効にしてcontainerのみにしたときはcolまで解除されて要素が縦並びになっていました。
このcolを有効にしつつ、ネガティブマージンを無効にしたいときにこのclass名が使えるわけです。
画像を用いた場合
boxに画像を使用することもあるかと思いますが、特定のclass名が使えます。
例えば、画像をいくつか並べたいときは、これまでと同様にcolを使い、中にimgタグを入れます。
<div class="container my-5"> <div class="row"> <div class="col-3"><img src="～" alt=""></div> <div class="col-3"><img src="～" alt=""></div> <div class="col-3"><img src="～" alt=""></div> <div class="col-3"><img src="～" alt=""></div> </div> </div>
しかし、このままでは画像が大きくて見切れてしまいます。
ここで、imgタグにimg-fluidというclass名をつけると、
こんな感じで崩れた写真がちゃんと表示されてます。
また、以前の記事でやったサイズとの組み合わせを応用して使ってみました。
<div class="container my-5"> <div class="row align-items-end"> <!-- 後述します --> <div class="col-lg-3 col-md-6 mt-3"><img class="img-fluid" src="～" alt=""></div> <div class="col-lg-3 col-md-6 mt-3"><img class="img-fluid" src="～" alt=""></div> <div class="col-lg-3 col-md-6 mt-3"><img class="img-fluid" src="～" alt=""></div> <div class="col-lg-3 col-md-6 mt-3" ><img class="img-fluid" src="～" alt=""></div> </div> </div>
このようなサイズの複数指定をすると、lg=992px以上のときはcol=3なので写真4枚が一列に並び、991pxからmd=768pxのブレイクポイントまではmd-6になることで、写真が2枚に並びます。そして、smの指定が無いため、768px未満からは、写真1枚が縦に並ぶというスタイルが作れます。
超簡単レスポンシブですね。写真を使ってここまで便利にできるとかなり楽です。
また、コードを見るとalign-itemsが使われていると思いますが、これは写真4枚が一列に並ぶときに見栄えを悪くしないため、下揃えに指定しているからです。
おわりに
今回はcontainerについての詳細な説明と、boxの代わりに写真を用いてより分かりやすくした説明をしました。
正直ここまで詳しくBootstrapをマスターしなくてもいいんじゃないかな、、とは思いますが、グリッドレイアウトを実装するときに思わぬイレギュラーとならないように頭の片隅に入れておきます。
次回はこのグリッドレイアウトで余白や順序を自由に使えるように深掘った記事にします。
それでは。
【Bootstrapその⑩】Components系のカスタムⅦ～その他～/Utilities系のカスタム【学習積み上げ】
Componentsのまとめもこれでラストになります、マサです。
これまでのⅠ～Ⅵまでのまとめで、Components系の機能は計22個紹介してきました。
あと2つあるのですが、カテゴリ分けが難しかったので個別で紹介しつつ、Utilitiesについても触れていきます。
ではいきましょう！
Components系のカスタム
Media object(メディアオブジェクト)
まずは引用からご紹介
Media object
メディアオブジェクトはブログのコメントやツイート,ライクなど繰り返しの多いコンポーネントを構築する際のドキュメントです。メディアオブジェクトの使い方の例を示します。
公式より
何となくは分かりますよね。ポイントは繰り返しの多い、というところです。
例えば、ブログサービスなどのコメントや、引用にもある通りツイート、そのままTwitterなどのコメントを表示させるのに向いてそうな機能です。
さっそく一例から。
こんな風にアイコンとタイトルとメッセージを設置するのですが、必要なclass名は少なく、シンプルです。
<div class="media p-3" style="border: 1px solid #a3a3a3;"> <a href=""><img src="images/icon.png" alt="" class="img-fluid ml-3"></a> <div class="media-body ml-3"> <h5 class="mt-0">Media heading</h5> こんにちは！マサと言います。このアイコンはブログでも使っているものです。よろしくお願いします。 <div class="media mt-5"> <a href=""><img src="images/icon.png" alt="" class="img-fluid ml-3"></a> <div class="media-body ml-3"> <h5 class="mt-0">Media heading</h5> こんにちは！マサと言います。このアイコンはブログでも使っているものです。よろしくお願いします。 </div> </div> </div> </div>
この通り、mediaとmedia-bodyをつけるのが基本です。
他にはa>imgとhが入っていれば形になりますね。
あとは、この画像のように入れ子にしたいときは、ひとつ上の階層のmedia-bodyの中に、新たにmedia>media-bodyを入れます。
media>media-body>media>media-body.....という風に無限に入れ子できます。
また、mediaの中をリストにすることもできるのですが、そのときは、親要素のulかolのclass名にlist-unstyled をつけてあげて、liのclass名に先ほどと同じmediaをつけてあげればOKです。
<ul class="list-unstyled my-5" style="border: 1px solid #a3a3a3;"> <li class="media p-3"> <a href=""><img src="images/icon.png" alt="" class="img-fluid ml-3"></a> <div class="media-body ml-3"> <h5 class="mt-0">Media heading</h5> こんにちは！マサと言います。このアイコンはブログでも使っているものです。よろしくお願いします。 <div class="media mt-5"> <a href=""><img src="images/icon.png" alt="" class="img-fluid ml-3"></a> <div class="media-body ml-3"> <h5 class="mt-0">Media heading</h5> こんにちは！マサと言います。このアイコンはブログでも使っているものです。よろしくお願いします。 </div> </div> </div> </li> <li> ～ </li>
List group(リストグループ)
続いてはコチラ
List group
List group(リストグループ)は, 一連のコンテンツを表示するための柔軟で強力なコンポーネントです。それらを変更して拡張して, その中のあらゆるコンテンツをサポートします。リストグループの使い方の例を示します。公式より
List groupはボタンなどのように汎用性の高いもので、他のComponentsと組み合わせて使うことで、実用的なデザインになります。
基本は簡単で、
ul.list-groupとli.list-group-itemのclass名をつけるだけでOKです。
ただ、それだと実用的でないですから、Badgeと組み合わせてみました。
<ul class="list-group"> <li class="list-group-item d-flex justify-content-between align-items-center"> BLOG <span class="badge badge-primary badge-pill">1</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> PROGRAMMING <span class="badge badge-primary badge-pill">2</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> OTHER <span class="badge badge-primary badge-pill">3</span> </li> </ul>
こんな感じで、組み合わせるとブログのカテゴリと記事数の一覧になりますよね。
他にも、一部をactive状態にしたり、リストを開いたりと色々応用できますね。
Componentsの中では、Buttons、Badge、Collapseあたりと一緒に使えそうです。
Utilities(ユーティリティー)系のカスタム
UtilitiesはComponentやcontent系と同じく、Bootstrapに備わった機能の一つです。
通常cssで別途スタイルを書かないといけないものがclass名として予め設定されています。
例えば、以前最初の記事で挙げたmarginのmという省略なんかもこれの一種です。
全部で19個ありますが、正直使わない機能があったり、Componentsほどコードを書く量のないものがほとんどなので、まとめて紹介します。
cssでよく使われる便利機能
種類をざっとあげます。
- Border
- Clearfix
- Colors
- Display
- Flex
- Float
- Overflow
- Position
- Shadows
- Sizing
- Spacing
- Text
- Vertical alignment
- Visibility
これだけで14種類ありますね。。
見ただけで何となくcssで使われているものがいっぱいありますよね。
そうなんです、Utilitiesはcssが分かっていれば、class名につけるだけで適用されるものがほとんどなので、Componentsなんかと比べるとめっちゃ簡単です。
(だからこそわざわざBootstrapで使わなくてもなあ、とも思うのですが、、)
ポイントだけ簡単に説明していきます。赤字のものは特殊なので別途説明を書きます。
Borderはcssで使うのと同じく、色や丸みなどをclass名のみで、表現できます。
最近は使用頻度の少ないfloatやclearfixもcssと使い方はほぼ同じ。
flexも使い方が分かっていればrowやcolumn、justify-contentやalign-itemsなどそのまま使えます。
overflowもautoやhiddenなどで、positionもstatic、absoluteやrelativeなどがそのまま使えますし、sadowsはbox-shadow、textはalignmentと追加すると、text-alignと同じ使い方ができます。vertical alignmentもそのままvertical-align。
Visibilityはcssで使ったことはないですが、可視・不可視をvisibleとinvisibleで決めることができます。これもcssスタイルの一種ですね。
大体よく使うcssのスタイルが予め設定されていると、それだけです。
cssでよく使われるスタイルの中でclassが特殊なケース
では、赤字であげた特殊なケースはというと、
Colors
これは単に色を16進数やrgbなどで書くのではなく、色の単語が決まっています。
これまでの記事でも何度か書いていました。
例えばPrimaryなら青、warningなら黄色といった感じですね。
Componentsと合わせると、Buttonの色やBadgeの色が変更できます。
Sizing
これも何度か書いてましたが、widthやheightに有効なものですね。
例えば、w-100と書くとwidth100%を表し、h-50とするとheight50%を表します。
これはデフォルトで25,50,75,100,autoの5つしか指定できません。
Spacing
以前の記事で紹介したものです。
marginはm、paddingはpで省略して書くというやつですね。
詳しくはこの記事で書いています。
ざっとこんなものですね。
では、ここに書かなかった残りはというと、
- Close icon
- Embeds(エンベッド)
- Image replacement(イメージリプレースメント)
- Screen readers
- Stretched link(ストレッチリンク)
この5つです。
close icon
その名の通り、☓印のアイコンを実装できるもので、こんな感じです。
ModalやAlartなんかと組み合わせると良さそうですね。
Embeds(エンベッド)
通常、動画などを埋め込んだ時(iframeというタグをもらえます。YouTubeやGoogleMapでもあります。）、サイズまでは調整できないですが、これにdiv.embed-respomsiveとつけて、親要素にembed.responsive-itemとつけるだけで動画の枠の大きさがレスポンシブ対応されるのでとても便利な機能ですね。
Image replacement(イメージリプレースメント)
これは正直使い所があまりないような気もしますが、テキストを画像に差し替えることができる機能です。
Screen readers
これもたまに出てきます。sr-onlyと記述するもので、でスクリーンリーダーを除くすべてのデバイスで要素を非表示にできるものです。
おわりに
今回はComponentsの残りとUtilitiesの機能について紹介しました。
これまでの記事と合わせて、Content、Components、Utilitiesの使える部分さえ把握しておけばBootstrapをほぼ使いこなせるようになります。
次回は⑪⑫とグリッドシステムについて深堀り、実践で架空サイトを模写してBootstrapのアウトプットを終わりたいと思います。
それでは。
【Bootstrapその⑨】Components系のカスタムⅥ～フォーム系の機能3選～【学習積み上げ】
引き続きBootstrapの学習を進めていきます、マサです。
Components系のまとめもこれでほぼラストです。長かった、、
今回はフォームについてのまとめです。
Bootstrapのフォームは簡単に実装できるので、他のComponentsは使わずともこれだけでも使う価値はあるくらい、らしいです。
この記事では、メインのフォームについての機能と、その拡張的な内容、また合わせて使いやすい機能の計3つを紹介していきます。
では、早速いきましょう！
Components系のカスタム
フォーム系で使える便利機能
まずは一例からです。
Forms
Forms
Forms(フォーム)では多様なフォームを作成するために, コントロールスタイル, レイアウトオプション, カスタムコンポーネントについてガイドラインと例を示します。フォームの使い方の例を示します。
公式より
これまでのComponentsと同様に最低限の記述でフォームを作ってくれます。
フォームに関しては割と色々な記述がありますから、今回は簡単な例を作ってます。
<form action="" method="POST"> <div class="form-group"> <label for="myname">Name</label> <input class="form-control" type="text" name="myname" id="myname"> <small id="nameHelp" class="form-text text-muted">お名前を記入してください。</small> <div class="form-check mt-4"> <input class="form-check-input" type="checkbox" name="job" value="会社員" id="job_1"> <label class="form-check-label" for="job_1">会社員</label> </div> <div class="form-check"> <input class="form-check-input" type="checkbox" name="job" value="会社員" id="job_2"> <label class="form-check-label" for="job_2">自営業</label> </div> <div class="form-check"> <input class="form-check-input" type="checkbox" name="job" value="会社員" id="job_3"> <label class="form-check-label" for="job_3">学生</label> </div> <small id="jobHelp" class="form-text text-muted my-3">職業を選択してください。</small> <label class="mt-3" for="exampleInputEmail1">Email</label> <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" > <small id="emailHelp" class="form-text text-muted">メールアドレスを記入してください。</small> <button type="submit" class="btn btn-primary my-5">送信する</button>
さて、途中までは通常通りの作り方ですが、
このようにform~と要素の間にdiv.form-groupをはさみ、要素にはclass名にform-controlをつける必要があります。
また、チェックボックスはそれぞれに、form-checkをつける必要があります。
ただ、気をつけるポイントはここくらいで、HTMLでこれだけの記述でフォームを作れるのは楽ですよね。
他にもっと複雑なフォームを作ることができますので、公式を見つつコピペして使ってみてください。
Input group
これがフォームの拡張的な使い方のComponentsです。
先ほどのフォームに例えばこういったデザインを追加できます。
<label class="mt-3" for="exampleInputEmail1">Email</label> <div class="input-group"> <!-- 追加 --> <input type="email" class="form-control pb-3" id="exampleInputEmail1" aria-describedby="emailHelp" aria-label="Recipient's username" > <div class="input-group-append"> <span class="input-group-text" id="basic-addon">@example.com</span> </div> <!-- 追加 --> </div> <small id="emailHelp" class="form-text text-muted">メールアドレスを記入してください。</small> <button type="submit" class="btn btn-primary my-5">送信する</button>
追加したいところの親要素にdiv.input-groupを記述して、span~を追加しただけ。
こんな実装から、フォームの横にマイフォルダを呼び出せたり、ボタンを付けたりとできる機能で、フォームを拡張できます。
詳しくはこちらも公式をどうぞ
Progress
最後にProgress(プログレスバー)ですが、これはフォームそのものというよりは、一緒に使うことが見られるので、
一応、一緒にしておきました。
こんな感じで何段階かに分けて入力欄があるときは明示することでユーザーにわかりやすくなりますよね。
<div class="progress mb-5"> <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">個人情報入力</div> </div>
シンプルなものなら、記述は少なくて済むのでおすすめです。
他にもアニメーションをつけることもできますので、より凝ったデザインにしたい方は公式をご覧ください。
Progress - Bootstrap 4.4 - 日本語リファレンス
おわりに
今回はフォームとそれに関連する機能の紹介でした。
まとめると、
- Forms ★便利
- Input group
- progress
やはりメインとなるフォームのデザインを少しでも使えると便利ですね。
これでComponents系についてはほぼ終わりですが、カテゴリ分けできなかったあと2つがあるので、Utilitiesと一緒にまとめようと思います。
それでは。
【Bootstrapその⑧】Components系のカスタムⅤ～ページ遷移系の機能3選～【学習積み上げ】
引き続き、Bootstrapの学習を積み上げています、マサです。
今回はページ遷移時に使える便利機能のカスタマイズについてまとめました。
ページ遷移の定義としては、そのページ内で他のリンクボタンを押したときのデザインや、スクロール時に使えるちょっとした機能のことです。
正直、前回のナビ系と似たところもあるので、一緒にしてまとめるか迷いましたが、、
量が多くなりすぎるのと、ヘッダーに使えそうなのが前回のかなあという理由から3つずつに分けてます。
あるかないかは少しの違いでしかありませんが、最近のホームページやブログなんかではよく見かけるものですので、サクッと覚えて使えるようになっておきたいです。
それでは、早速いきましょう！
Components系のカスタム
ページ遷移系の便利機能
Pagination
まずはいつもどおり一例からです。
ページ系というだけあって、こんなものがあります。
Pagination
Pagination(ページネーション)についてのドキュメントと例です。ページネーションの使い方の例を示します。
公式より
このPaginationとは、ページ割りという意味です。
内部コンテンツの量が多くなってきたときにページ分けして、1ページ内に含む量を少なくしてくれるやつですね。
ページ分けするメリットしては、一回の読み込み時間を分散できてページ表示が早くなったり、スクロールが少なくて済むのでユーザーの利便性が上がるといったところでしょう。
これはブログもそうですが、特にECサイトなんかでは有効で、商品量＝写真が多くなるのでページ分けして読み込みを早くすることで、ユーザーの直帰率を下げることに繋がりますね。
Bootstrapのものを使うとこんな感じです。
<nav aria-label="Page navigation example"> <ul class="pagination"> <li class="page-item"><a class="page-link" href="#">前のページ</a></li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">次のページ</a></li> </ul> </nav>
公式では、aria-labelをつけることを推奨してますので、つけています。
あとは、class名にpagenationとpage-itemをつけてあげればOKですね。
割と簡単にできます。
また、矢印をアイコンに変えたり、activeを追加することで開いているページを明示することもできます。
<nav aria-label="Page navigation example"> <ul class="pagination"> <li class="page-item"> <a class="page-link" href="#"> <i class="fas fa-angle-left"></i> </a> </li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item active"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#"> <i class="fas fa-arrow-alt-circle-right"></i> </a> </li> </ul> </nav>
font-awesomeのタグを入れるだけでちょっとしたデザインもできるのはいいですね。
こういったページ遷移系に関する他の機能はあと2つあります。
Scrollspy(スクロールスパイ)とSpinners(スピナー)です。
Scrollspy
Scrollspyはスクロールに合わせてアクティブな状態を表示してくれるものです。
こんな感じです。
使うにはこの動画のように前回やったNavbarなどと併用して使う必要があります。
コードは、
<nav id="navbar-example2" class="navbar navbar-dark bg-dark"> <a class="navbar-brand" href="#">Navです</a> <ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link" href="#morning">おはよう</a> </li> <li class="nav-item"> <a class="nav-link" href="#hello">こんにちは</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">メニュー</a> <div class="dropdown-menu"> <a class="dropdown-item" href="#one">one</a> <a class="dropdown-item" href="#two">two</a> <div role="separator" class="dropdown-divider"></div> <a class="dropdown-item" href="#three">three</a> </div> </li> </ul> </nav> <div class="scroll-list" data-spy="scroll" data-target="#navbar-example2" data-offset="0"> <h4 id="morning">おはよう</h4> <p>朝です。...</p> <h4 id="hello">こんにちは</h4> <p>お昼です。...</p> <h4 id="one">one</h4> <p>111...</p> <h4 id="two">two</h4> <p>222...</p> <h4 id="three">three</h4> <p>333...</p> </div> </div>
Navbarにするので初めにnav>ul>liの階層にします。
ボタン系でも触れたDropdownも使っています。
nav#navbar~の記述が終わったら、div.data-spy="scroll" data-target="#navbar-example2"を記述します。これが必須です。
id属性できちんと紐付けてあげることでスクロールが反応します。
ここまではほぼコピペでも大丈夫ですが、追加でスタイルを当ててあげないとこれが反応しません。
上記のHTMLに追加したスタイルは、これです。
.scroll-list { position: relative; max-height: 200px; overflow-y: auto; }
div.data-spy="scroll" data-target="#navbar-example2"が記述してあるdivに.scroll-listというclass名(これは何でもいい)を追加して、position: relative;とheightとoverflow-yを追加してます。
bodyに直接scrollspyを機能させるのではなくコンテンツとして入れるなら、heightとoverflow-yとrelativeを追加しないとこの動画のようにスクロールやアクティブな色の変化自体が機能しませんので注意してくださいね。
詳しい内容は公式に書いてありますので参考にご覧ください。
Spinners
Spinnersはページ遷移系というのには語弊があるかもしれないですが、ロード中の画面に使えるものです。
シンプルで実装しやすいですし、基本的にはJavascriptもいらないのでコードも短いです。
<div class="spinner-border my-5" role="status"></div> <div class="spinner-grow my-5" role="status"></div>
2種類の動きがあります。くるくる回るのはborder、ふわっと成長するのがgrow。
アップで動画にしたので画質が荒くて申し訳ないです。。
色やサイズも変更可能です。公式はコチラ。
Spinners - Bootstrap 4.4 - 日本語リファレンス
【Bootstrapその⑦】Components系のカスタムⅣ～ナビ系の機能3選～【学習積み上げ】
引き続きBootstrapの学習中です、マサです。
Components系のまとめも終わりに近づいて来ました。
今回はナビやヘッダーに使える機能についての紹介です。
ではいきましょう。
Components系のカスタム
ナビ系に使える機能とは
まずはいつもどおり、一例を見ていきましょう。
ナビと言うだけあって、そのままNavsというものがあります。
Navs
Navs(ナビ)では, ナビゲーションコンポーネントを利用するためのドキュメントと例を示します。ナビの使い方の例を示します。
公式より
ナビはヘッダーやフッターなどではよく使われますよね。
サイトを深く構成する上では欠かせないですし、ブログなんかでも使い勝手が良さそうです。
こちらに示した画像のように、機能は多めに使っていますが、
サイトの特徴や構成を考えて機能を絞って使うと良いですね。
コードはこんな感じ。
<div class="container my-5"> <ul class="nav nav-tabs nav-pills navbar navbar-expand-lg navbar-dark bg-dark" id="myTab" role="tablist"> <!-- nav-tabsを指定して、下のtab-content～を追加することで、Collapseのように押すとメッセージが出てくるようにできる。 --> <!-- nav-pillsでボタンの色などを変更。 --> <li class="nav-item"> <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a> </li> <li class="nav-item"> <a class="nav-link" id="about-tab" data-toggle="tab" href="#about" role="tab" aria-controls="about" aria-selected="false">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Menu</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </li> </ul> <div class="tab-content" id="myTabContent"> <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">トップページです。</div> <div class="tab-pane fade" id="about" role="tabpanel" aria-labelledby="about-tab">こんにちは</div> </div> </div>
一番基本的な形は割と簡単で、
nav>li.nav-item>a.nav-link
と最低限のこれだけです。
しかも元からFlexが効いてあるので、勝手に横並びになってくれています。
また、前回やったボタン系に関するカスタムを併用することで、上記の画像とコードのようにナビにCollapseやDropdownを装飾することもできます。
他にも、ボタンを縦並びにすることもできたりと、オプションが様々ですので、使いたい方は公式を御覧ください。
Navs - Bootstrap 4.4 - 日本語リファレンス
そして、ナビに関するデザインはあと2つあります。
NavbarとBreadcrumbです。
Navbar(ナビバー)に関しては、そのままの意味でNavのバーですね。
極端な話、先ほどのNavのコードに、Navbarに必須なコードを最低限class名に記述するだけで、こんな感じになります。
<ul class="nav nav-tabs nav-pills navbar navbar-expand-lg navbar-dark bg-dark" id="myTab" role="tablist">
追加したのは正確には4つです。
navbarとnavbar-expand-lgとnavbar-darkとbg-dark
Navbarには必須のclass名である、navbarとバーの大きさを決めるnavbar-expand-lg(sm、mdなども)と、色を決めるnavbar-dark(他にも色名あり)を記述します。(bg-darkは背景色なのでどっちでもOK)
厳密にいうと、もう少し細かい違いなどがありますが、詳しくは公式を見るか、そのままコピペして使っちゃいましょう。
Navbar - Bootstrap 4.4 - 日本語リファレンス
また、Breadcrumb(ブレッドクラム )は、パンくずリストと呼ばれるもので、ブログなどでカテゴリ分けしたときによく見るやつですね。
こんな感じです。
これも使い方は簡単で、
nav>ol>liのリストを作ってあげて、breadcrumbとbreadcrumb-itemのclass名を追加するだけ。
<nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item active" aria-current="page">HOME</li> </ol> </nav> <nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">HOME</a></li> <li class="breadcrumb-item active" aria-current="page">PROGRAMMIG</li> </ol> </nav> <nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">HOME</a></li> <li class="breadcrumb-item"><a href="#">PROGRAMMIG</a></li> <li class="breadcrumb-item active" aria-current="page">BOOTSTRAP</li> </ol> </nav>
あとは開いてるページにavtiveをつけています。
これもほぼコピペで済みます、簡単ですね。
おわりに
今回はナビ系に使える便利機能の紹介でした。
まとめると、
- Navs
- Navbar ★便利
- Breadcrumb
特にNavbarにおいては、メニューなどの他に検索窓も楽に実装できるのでとても便利じゃないかなと思いました！
ホームページやブログなんかでは必須のデザインですから、覚えておけば使える場面があるかもしれないですね。
次は、ページ遷移系に使える便利機能についてまとめます。
それでは。
【Bootstrapその⑥】Components系のカスタムⅢ～デザイン系の機能3選～【学習積み上げ】
引き続き、Bootstrapの学習を進めていきます、マサです。
前回同様、Components系に関するカスタムについてのまとめです。
https://www.appatwi.com/entry/2020/01/21/programming_bootstrap_4-2_componentswww.appatwi.com
今回はデザインと書きましたが、正確には各セクション内のコンテンツに使えるデザインについての機能を紹介します。
具体的に言うと、ホームページやポートフォリオサイトでのデザイン実装に使えます。
という方が分かりやすいかもしれませんが。
言葉にすると伝わりにくいと思いますので、実際に見ていただく方が分かりやすいです。
それではいきましょう。
Components系のカスタム
デザイン系に使える便利機能
まずは一例からです。
Carousel
Carousel(カルーセル)は、画像やスライドをよこにスライドさせて複数表示させるコンポーネントです。カルーセルの使い方の例を示します。
公式より
Carouselは写真などをスライド表示させるのには適した実装で、最近のWebサイトでは必ずと行っていいほど使われていますよね。
このようにトップページのお知らせやトピックスなどに用いられています。
これもBootstrapを使えば簡単に実装できます。
画像のみで実装してみました。
<div class="container my-5"> <div id="carouselExampleControls" class="carousel slide w-50" data-ride="carousel"> <!-- w-50は小さく見せるためにwidthを50%にしてます --> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" height="300" src="images/markus-spiske-Mg9gYOmaslM-unsplash.jpg" alt=""> </div> <!-- 親要素のcarousel-innerの中にスライドさせるcarousel-itemを入れる。 --> <!-- class名はブロック要素でwidth100%に、heightは300pxです。 --> <div class="carousel-item"> <img class="d-block w-100" height="300" src="images/nordgreen-Iqc4WR1TNp0-unsplash.jpg" alt=""> </div> <div class="carousel-item"> <img class="d-block w-100" height="300" src="images/the-honest-company-QNWLBff7f9M-unsplash.jpg" alt=""> </div> </div> <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div>
注意点は、carousel-innnerの中のcarousel-itemのひとつに必ずactiveを追加しないといけないことです。
コピペしても使えるので、知っておくくらいでいいかもしれません。
また、この画像には前後(previous/next)のコントロール(矢印のbtnのようなもの)を追加しています。
一番良く見るパターンですね。
コードのaタグのところがその記述部分ですので、ここをなくしてもコントロールなしのカルーセルとして機能してくれます。
(デフォルトで自動的に5秒で画像が変わるようになっています)
オプションで機能を追加することもできます。
.carousel(options)
object オプションを使用してアイテムのスライドを開始します。$('.carousel').carousel({ interval: 2000 }).carousel('cycle')
左から右にアイテムがスライドします。.carousel('pause')
アイテムのスライドを停止します。.carousel(number)
特定のフレーム（0を起点, 配列と同様）のアイテムにスライドします。**ターゲットのアイテムが表示される前に（すなわち slid.bs.carousel イベントが生じる前に） return されます。.carousel('prev')
前のアイテムにスライドします。.carousel('next')
次のアイテムにスライドします。.carousel('dispose')
アイテムを破棄します。
他にもこういったコンテンツに使えるデザインが2つあります。
Card(カード)とJambotron(ジャンボトロン)です。
<div class="container my-5"> <div class="card" style="width: 18rem;"> <img class="w-100" src="images/boris-misevic-Sn7yeNh-nK8-unsplash.jpg" alt=""> <div class="card-body"> <h5 class="card-title">タイトルです</h5> <p class="card-text">文章が入ります。文章が入ります。文章が入ります。</p> <a href="#" class="btn btn-danger">ボタンをクリック</a> </div> </div> </div>
カードはこのようにあるセクションに画像ありのコンテンツを複数並べるのに向いていますよね。
また、ジャンボトロンはトップページの見出しに使われるものです。
<div class="container my-5"> <div class="jumbotron"> <h1 class="display-4">見出しです！</h1> <p class="lead">説明文です。</p> <hr class="my-4"> <p>説明文です。</p> <a class="btn btn-primary btn-lg" href="#" role="button">ボタンをクリック</a> </div> </div>
公式のリンクも貼っておきますので、使いたい方はコチラからどうぞ
Carousel - Bootstrap 4.4 - 日本語リファレンス
Cards - Bootstrap 4.4 - 日本語リファレンス
Jumbotron - Bootstrap 4.4 - 日本語リファレンス
おわりに
今回はコンテンツに使えるデザインの機能に関してのまとめでした。
- Carousel
- Card
- Jambotron
の3つでしたが、全て便利ですね。
この辺りを上手く使えば、簡単におしゃれなサイトが作れますし、時間削減にもなります。
ただ、サイトのデザインの根幹にあたる部分ではあるので、全てBootstrapで作って良いものか疑問は残りますね。
Jqueryを使っているほうがいいのかな、、とも考えたり。
ですので、用途や状況に合わせて使っていくと良いのかもしれません。
次はナビ系に関する便利機能のまとめです！
それでは。
【Bootstrapその⑤】Components系のカスタムⅡ～ボタン系の機能6選～【学習積み上げ】
Componentsは色々種類があって便利だなぁと感じています、マサです。
今回はComponent系のカスタムⅡとして、ボタンの装飾やボタンのデザインに関する機能について触れていきます。
ちなみに前回はユーザーの注意を引きたいときに使えるデザインカスタマイズの紹介でした。
では早速、続きをやっていきましょう。
Components系のカスタム
ボタン系の装飾に使える機能
こちらもまずは一例です。
ドキュメントのトップページのコチラから進みましょう。
ボタンと言うだけあって、サイドバーのComponentsを押すと、そのまんまButtonsという項目があります。
Buttons
Buttons(ボタン)はフォームやダイアログなどのアクションにカスタムボタンスタイルを利用できます。 サイズや状態管理に対応しています。ボタンの使い方の例を示します。
公式より
下の画像で示したように色々な実装があります。
コードはこんな感じで、
<div class="container my-5"> <button type="button" class="btn btn-primary my-3 d-block">①ボタンです。</button> <button type="button" class="btn btn-outline-secondary my-3 d-block">②ボタンです。</button> <!-- btn-outlineはデフォルトでは枠線のみで、hover時には背景も色が変わる --> <button type="button" class="btn btn-success btn-sm my-3 d-block">③ボタンです。</button> <button type="button" class="btn btn-danger btn-lg btn-block my-3">④ボタンです。</button> <!-- smやlgはスモール、ラージなのでボタンの大きさを変えることができ、btn-blockの指定で親要素の幅いっぱいに広がる。 --> <button type="button" class="btn btn-dark my-3" data-toggle="button" aria-pressed="false" autocomplete="off">⑤ボタンです。</button> <!-- Jqueryを読み込ませて使うと、チェックボックスのようにクリックすると枠線にshadowがつく -->
btnのすぐ後ろの属性値は色の指定です。
(また、d-blockはブロック要素、my-3はマージンを取っているだけなのでスルーしてくださいね。)
ボタンに限らず他のデザインの実装のときでも以下のように指定のコードを記述するだけで、色が使えるのもBootstrapの特徴ですね。
これだけでも、コピペで使える機能が様々ですね。
このボタンに直接関連したカスタマイズはあと2つあり、
Badgeはこのように(ボタンに限らずですが)横にちょっとした装飾を施してくれます。
<button type="button" class="btn btn-primary">ボタンです。 <span class="badge badge-light">1</span></button>
また、Button groupのように連なったグループのボタンを作ることができます。
<div class="btn-group" role="group" aria-label="Basic example"> <button type="button" class="btn btn-primary">ボタンです。</button> <button type="button" class="btn btn-warning">押してます。</button> <button type="button" class="btn btn-dark">ボタンです。</button> </div>
ボタンに直接関連する機能は以上の3つです。
公式のリンクも張っておりますのでよければご覧ください。
Buttons - Bootstrap 4.4 - 日本語リファレンス
Badges - Bootstrap 4.4 - 日本語リファレンス
Button group - Bootstrap 4.4 - 日本語リファレンス
ボタン系の装飾に使える機能の応用
これは直接ボタンの装飾と言えないものですが、ボタンの:activeに関連する機能なので、一緒に紹介していきます。
同じようにまずは一例。
Modal
Modal(モーダル)では, JavaScript modal プラグインを使用して, ライトボックス, 通知, カスタムダイアログを作成できます。モーダルの使い方の例を示します。
公式より
まずは、Modalの紹介です。モーダルとはモーダルウィンドウのことで、子ウィンドウのことを指します。
☓を押さないと元の親ウィンドウを操作させてくれないもの。
画像を見れば、分かりやすいと思います。
<div class="container"> <!-- Button trigger modal --> <button type="button" class="btn btn-danger my-5" data-toggle="modal" data-target="#exampleModal"> ボタンをクリック！ </button> <!-- Modal --> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">クリックされました。</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> これは子ウインドウです。 </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button> <button type="button" class="btn btn-primary">保存する</button> </div> </div> </div> </div> </div>
このModalはButton trigger modalに書かれているものと、Modalに書かれているもの、という2つで構成されています。
Modalは元々そこにあるものですが、そのままの通りボタンがトリガーとなって現れるといった仕組み。
この「隠れているものをクリックで表示させる」が書かれているのが、div class="modal fade"~ の部分です。
そして、これと似たようなものがあと2つあります。
CollapseとDropdownです。
Collapseはボタンを押すとメッセージが出てくるものです。
<div class="container"> <p> <a class="btn btn-primary my-2" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample"> ボタンをクリック！ </a> <button class="btn btn-dark" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> コチラもクリック！ </button> </p> <div class="collapse mb-5" id="collapseExample"> <div class="card card-body"> 文章が出てきます。 </div> </div> </div>
Dropdownはボタンを押してメニューを表示させるものです。
<div class="container"> <div class="dropdown mb-5"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> ボタンです！ </button> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <a class="dropdown-item" href="#">おはよう</a> <a class="dropdown-item" href="#">こんにちは</a> <a class="dropdown-item" href="#">こんばんは</a> </div> </div> </div>
ボタンの応用的な使い方は以上の3つです。
先ほどと同様、公式のリンクも貼っておきますので、使いたいときにどうぞ！
Modal - Bootstrap 4.4 - 日本語リファレンス
おわりに
以上の6つがボタン系の機能に使えるものです。
まとめると、
- Buttons
- Button group
- Badge
- Modal ★便利
- Collapse ★便利
- Dropdown ★便利
最初の3つは簡易的なものですが、後の3つは特に楽に使えそうで便利ですね。
Modalはログインやログアウトなどで使える場面がありそうですし、Collapseは視覚的に訴えるグリッドサイトなんかだと、押すまではシンプルなデザインを保てそうです。
また、Dropdownはヘッダーやナビなどにも応用が効きそうですね。
次は、各セクションで使えるデザインの機能についてまとめます。
それでは。
