Bootstrap4移行ガイドを読む(コンテンツ編)
- RebootはNormalizeの上で構築される。HTML要素を対象にしたBootstrapフレームワークを有効にするための下地
- 単位を
em
かrem
で統一 - CSSのボックスモデルを
box-sizing: border-box
に変更 margin
の相殺を避けるためにmargin-bottom
で余白を下方向だけに設定- 段落には
margin-bottom: 1rem
で見出しにはmargin-bottom: .5rem
を指定 dd
要素はmargin-left: 0
にして左側の余白を削除blockquote
要素はmargin-left: 1rem
(margin: 0 0 1rem
)を指定して、他の要素と余白サイズを合わせるabbr
やsummary
要素のようにカーソルの見た目を変更しているものがあるtextarea
要素のリサイズが縦方向に制限するなど、フォーム部品にも独自のスタイルを当てているhidden
属性をつけた要素が必ずdisplay: none
になるように変更
- グローバル設定、見出し、本文、リスト、リンクなどインライン要素の文字の体裁
- 見出しは
h1
〜h6
まで利用可能(HTML上見出しではなくとも、.h1
〜.h6
クラスを使うことで同等の見た目にできる) <small class="text-muted">
を見出しのHTMLの中に入れると、そばに小さめの補助文をつけることができる- 見出しをより目立たせたい場合は、
h1
よりさらに大きな表示見出しを使う。表示見出しは.display-1
〜.display-4
まで4段階ある - 段落を目立たせるには
.lead
クラスを適用 mark
、del
、s
、ins
、u
、small
、strong
、em
要素にも装飾がほどこされているabbr
要素は下線を追加、マウスオーバーしたときにヘルプカーソルが出るように見た目を変更- マークなしリストにしたい場合は
.list-unstyled
クラスを使う - 横並びリストは
.list-inline
とその子要素に.list-inline-item
を適用して実装する dl
とdd
要素を横並びにした水平定義リストをつくるにはグリッドを使う- ブレークポイントに合わせて
html
要素の文字サイズを変更することをBootstrapではおこなっていないが、やろうと思えばカスタマイズで簡単にできる
- 長いコードブロックのために
.pre-scrollable
クラスが用意されている。これは枠の最大の高さを340px
に設定し、それを超えた場合はY軸にスクロールバーを出現させる - 変数を示すには
var
要素を使う - ユーザー入力を示すには
kbd
要素を使う - プログラムからのサンプル出力を示すには
samp
要素を使う
- Bootstrapの画像は
.img-fluid
クラスでレスポンシブになる。このクラスにはmax-width:100%; height:auto;
が適用されている .img-thumbnail
というサムネイル用のクラスがあり、これは画像に丸みを帯びた1pxの境界線をつける- 画像の四隅を丸めるには
.rounded
クラスを使う - 画像の配置は横の配置ユーティリティクラスや文字の中央揃えクラスを使う
picture
要素を使う場合、.img-*
クラスはpicture
要素ではなくimg
タグにつける
- サードパーティのテーブルに影響を与えないため、テーブルの設定は
.table
クラスを指定した場合に反映されるように設定 - 基本テーブルの見た目は行に横線だけが入った見た目
- テーブルの線を消すには罫線ユーティリティクラスを指定する
thead
要素の色を変更するには.thead-light
や.thead-dark
クラスを指定する- 交互に色が変わるテーブルにするには
table
要素に.table-striped
クラスを指定する。"tbody
内" の要素の色が変わる - テーブルの横線に加えて縦線を追加するには、
.table-bordered
クラスを指定する - 行にマウスオーバーしたときに背景を変えるには
.table-hover
クラスを指定する。"tbody
内" の要素の色が変わる - 余白を減らして、テーブルをコンパクトな見た目にするには
.table-sm
クラスを指定する - 個々のセルや行に色付けするには、
.table-primary
クラスなどを指定する caption
要素は要素に対してスタイルを設定済み- レスポンシブ対応のために、モバイルなどでウィンドウを飛び出るテーブルには、
.table-responsive
クラスを指定してテーブルを水平方向にスクロール可能にする .table-responsive
クラスは-sm
などのサフィックスをつけることで、水平方向のスクロール許可のブレークポイントを指定できる
- 図表の設定は
.figure
,.figure-img
,.figure-caption
クラスを指定した場合に反映されるように設定 - キャプションの位置はテキストユーティリティクラスで変更可能