【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のアウトプットを終わりたいと思います。
それでは。
