配置

設定

.position-(static|relative|absolute|fixed|sticky)

CSSの position プロパティを設定するユーティリティクラス。クラス名はCSSの position プロパティ値と直接対応しているため説明略(CSSリファレンス参照)

上端固定 / 下端固定 / 上端張り付き

要素を画面の上下端に固定し、さらに Z-index を操作して重なっている他要素より上に表示する機能。ナビゲーションバーでこれらを利用したデモを作成している(詳細は各デモを参照)。

• 上端固定 .fixed-top ⇒ ナビゲーションバーのデモ
• 下端固定 .fixed-bottom ⇒ ナビゲーションバーのデモ
• 上端張り付き .sticky-top ⇒ ナビゲーションバーのデモ

スクリーンリーダ

スクリーンリーダ対応(まとめ)

• スクリーンリーダ利用者のみに提供する要素に .sr-only を設定する
  • スクリーンリーダ利用者専用情報として開示される
  • 非利用者には表示されない
• キーボードを利用するユーザ向けに .sr-only-focusable を適宜設定する

例

.sr-only は多数のコンポーネントに用いられているため略。ここでは .sr-only-focusable の例を示す。

• a.sr-only.sr-only-focusable
  • 属性 href="#"
  • テキスト Skip to main content

実例: この先のかっこの中に設定 ⇒ ( Skip to main content )。動作は次の通り。

• スクリーンリーダ利用者は情報を読み取れ、キーボードフォーカスも受ける
• 視覚利用者には見えず、マウスではフォーカスを受けない
  • ただしタブストップは有効で、Tab キーでフォーカスすると表示する

シャドウ

.shadow(-none|-sm|-lg)?

表示例

div.shadow-none

div.shadow-sm

div.shadow

div.shadow-lg

サイズ

幅と高さを設定するユーティリティクラス。

親に対する相対指定

• 幅 (25%ステップ + auto) .w-(25|50|75|100|auto)
• 高さ (25%ステップ + auto) .h-(25|50|75|100|auto)
• 最大幅を100%に設定(親要素にフィット) .mw-100
• 最大高さを100%に設定(親要素にフィット) .mh-100

幅の設定

高さの設定

最大幅設定の例: img.mw-100 (親の幅にフィット)

最大高さ設定の例: 親要素 height:200px; の中に img.mh-100 (親の高さにフィット)

ビューポートに対する相対指定

• 最小幅をビューポートに対して100% .min-vw-100
• 最小高さをビューポートに対して100% .min-vh-100
• 幅をビューポートに対して100% .vw-100
• 高さをビューポートに対して100% .vh-100

例

最小幅をビューポートに対して100% div.min-vw-100

最小高さをビューポートに対して100% div.min-vh-100

幅をビューポートに対して100% div.vw-100

高さをビューポートに対して100% div.vh-100

空白

マージン(要素のボックス境界と外部要素の間隔)とパディング(ボックス境界と内部要素の間隔)の設定に用いる

記法

.(m|p)(t|b|l|r|x|y)?-(0|1|2|3|4|5|n1|n2|n3|n4|n5|auto)

• (m|p) マージン/パディングの種別
  • m マージンを設定
  • p パディングを設定
• (t|b|l|r|x|y) 上下左右の指定
  • t 上のマージン/パディングを設定
  • b 下のマージン/パディングを設定
  • l 左のマージン/パディングを設定
  • r 右のマージン/パディングを設定
  • x 左右のマージン/パディングを設定
  • y 上下のマージン/パディングを設定
  • (なし) 上下左右すべてのマージン/パディングを設定
• (0|1|2|3|4|5|auto) 間隔の設定
  • 0 間隔を0に設定
  • 1 間隔を 1/4rem に設定
  • 2 間隔を 1/2rem に設定
  • 3 間隔を 1rem に設定
  • 4 間隔を 1.5rem に設定
  • 5 間隔を 3rem に設定
  • n1 (マージンのみ) 間隔を -1/4rem に設定
  • n2 (マージンのみ) 間隔を -1/2rem に設定
  • n3 (マージンのみ) 間隔を -1rem に設定
  • n4 (マージンのみ) 間隔を -1.5rem に設定
  • n5 (マージンのみ) 間隔を -3rem に設定
  • auto (マージンのみ)ブラウザデフォルト値に設定

例

表のセル td へのパディング設定: この場合は pb-(0|1|2|3|4|5) (下のみ)は効果がないため除外

.p-(0|1|2|3|4|5) (上下左右)

.p-0

.p-1

.p-2

.p-3

.p-4

.p-5

.px-(0|1|2|3|4|5) (左右のみ)

.px-0

.px-1

.px-2

.px-3

.px-4

.px-5

.py-(0|1|2|3|4|5) (上下のみ)

.py-0

.py-1

.py-2

.py-3

.py-4

.py-5

.pt-(0|1|2|3|4|5) (上のみ)

.pt-0

.pt-1

.pt-2

.pt-3

.pt-4

.pt-5

.pl-(0|1|2|3|4|5) (左のみ)

.pl-0

.pl-1

.pl-2

.pl-3

.pl-4

.pl-5

.pr-(0|1|2|3|4|5) (右のみ)

.pr-0

.pr-1

.pr-2

.pr-3

.pr-4

.pr-5

要素の横センタリング

幅を指定したブロック要素の横センタリングに .mx-auto を用いることができる。

負のマージン

負のマージンは特にグリッド列のガターを調節するのに用いられる。次は画面幅に応じてレスポンシブにガターを調節する例。

• 幅 ≥ 768px (md以上)でガターを3remに拡大
• 幅 < 768px (sm以下)でガターをデフォルト値(15px)に戻す

• フレーム (コンテナ幅表示用) div 属性
  • ボーダー .border
  • 上下パディング .py-2
  • グリッド行 div.row 属性
    • 幅≥768pxで負のマージン(3rem)を設定 .mx-md-n5
    • グリッド列 (×2) div.col 属性
      • 上下パディング (1rem) .py-3
      • 左右パディング (幅≥768pxで3rem) .px-md-5
      • ボーダー .border
      • 背景色(白) .bg-white
      • 内部 div 属性
        • 背景色(ライトグレー) .bg-light
        • テキスト Custom column padding