nlog

とめどなく流れるよだれ

Bootstrap4移行ガイドを読む(コンテンツ編)

Reboot - Bootstrap4移行ガイド

  • RebootはNormalizeの上で構築される。HTML要素を対象にしたBootstrapフレームワークを有効にするための下地
  • 単位を emrem で統一
  • CSSのボックスモデルを box-sizing: border-box に変更
  • margin の相殺を避けるために margin-bottom で余白を下方向だけに設定
  • 段落には margin-bottom: 1rem で見出しには margin-bottom: .5rem を指定
  • dd 要素は margin-left: 0 にして左側の余白を削除
  • blockquote 要素は margin-left: 1remmargin: 0 0 1rem)を指定して、他の要素と余白サイズを合わせる
  • abbrsummary 要素のようにカーソルの見た目を変更しているものがある
  • textarea 要素のリサイズが縦方向に制限するなど、フォーム部品にも独自のスタイルを当てている
  • hidden 属性をつけた要素が必ず display: none になるように変更

文字の体裁 - Bootstrap4移行ガイド

  • グローバル設定、見出し、本文、リスト、リンクなどインライン要素の文字の体裁
  • 見出しは h1h6 まで利用可能(HTML上見出しではなくとも、.h1.h6 クラスを使うことで同等の見た目にできる)
  • <small class="text-muted"> を見出しのHTMLの中に入れると、そばに小さめの補助文をつけることができる
  • 見出しをより目立たせたい場合は、h1 よりさらに大きな表示見出しを使う。表示見出しは .display-1.display-4 まで4段階ある
  • 段落を目立たせるには .lead クラスを適用
  • markdelsinsusmallstrongem 要素にも装飾がほどこされている
  • abbr 要素は下線を追加、マウスオーバーしたときにヘルプカーソルが出るように見た目を変更
  • マークなしリストにしたい場合は .list-unstyled クラスを使う
  • 横並びリストは .list-inline とその子要素に .list-inline-item を適用して実装する
  • dldd 要素を横並びにした水平定義リストをつくるにはグリッドを使う
  • ブレークポイントに合わせて html 要素の文字サイズを変更することをBootstrapではおこなっていないが、やろうと思えばカスタマイズで簡単にできる

コード - Bootstrap4移行ガイド

  • 長いコードブロックのために .pre-scrollable クラスが用意されている。これは枠の最大の高さを 340px に設定し、それを超えた場合はY軸にスクロールバーを出現させる
  • 変数を示すには var 要素を使う
  • ユーザー入力を示すには kbd 要素を使う
  • プログラムからのサンプル出力を示すには samp 要素を使う

イメージ - Bootstrap4移行ガイド

  • Bootstrapの画像は .img-fluid クラスでレスポンシブになる。このクラスには max-width:100%; height:auto; が適用されている
  • .img-thumbnail というサムネイル用のクラスがあり、これは画像に丸みを帯びた1pxの境界線をつける
  • 画像の四隅を丸めるには .rounded クラスを使う
  • 画像の配置は横の配置ユーティリティクラスや文字の中央揃えクラスを使う
  • picture 要素を使う場合、.img-* クラスは picture 要素ではなく img タグにつける

テーブル - Bootstrap4移行ガイド

  • サードパーティのテーブルに影響を与えないため、テーブルの設定は .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 などのサフィックスをつけることで、水平方向のスクロール許可のブレークポイントを指定できる

図表 - Bootstrap4移行ガイド

  • 図表の設定は .figure, .figure-img, .figure-caption クラスを指定した場合に反映されるように設定
  • キャプションの位置はテキストユーティリティクラスで変更可能