Bootstrapでディスプレイサイズに応じて表示内容を切り替える方法
Contents
Bootstrapでディスプレイサイズに応じて表示内容を切り替える方法
ブレイクポイント
Bootstrapではディスプレイサイズに応じた表示内容の切り替えが可能です。
ディスプレイサイズのブレイクポイントとしてBootstrapでは以下の６つのサイズが用意されています。
| ブレイクポイント | classの接頭辞 | 範囲 |
|---|---|---|
| X-Small （エックススモール） | （なし） | <576px |
| Small （スモール） | sm | ≥576px |
| Medium （ミディアム） | md | ≥768px |
| Large （ラージ） | lg | ≥992px |
| Extra large （エクストララージ） | xl | ≥1200px |
| Extra extra large （エクストラエクストララージ） | xxl | ≥1400px |
ノーテーション（表記方法）
xs から xxl までのすべてブレイクポイントごとに、表示、非表示などに合わせてクラスが用意されています。
クラス名の形式は以下の通りです。
- xs の場合は .d-{value} というクラス名が付けられます。
- sm、md、lg、xl、xxl に対して .d-{breakpoint}-{value} があります。
value の種類は以下の通りで、CSSのdiplay要素の値に準拠しています。
- none（非表示）
- inline（インライン）
- inline-block（インラインブロック）
- block（ブロック）
- grid（グリッド）
- table（テーブル）
- table-cell（テーブルセル：行）
- table-row（テーブルロー：列）
- flex（フレックス）
- inline-flex（インラインフレックス）
CSSのdisplay要素は以下のページを参考ください。
定義例
エクストラスモール（小さいスマホなど）で非表示にする場合「d-none」を指定してください。
大きめのディスプレイ（768px以上）の場合のみ表示する場合は「d-none d-md-block」のように指定してください。
<div class="d-none">...</div>
<div class="d-none d-md-block">...</div>
ディスプレイの解像度ごとに要素を表示・非表示する方法
ディスプレイの解像度ごとに要素を表示・非表示にするには、以下のようにクラスを指定してください。
| クラス(class) | xs <576px | sm ≥576px | md ≥768px | lg ≥992px | xl ≥1200px | xxl ≥1400px |
|---|---|---|---|---|---|---|
| .d-none | すべて非表示 | |||||
| .d-none .d-sm-block | xsのみ非表示 | sm以降は表示 | ||||
| .d-none .d-md-block | sm以前非表示 | md以降は表示 | ||||
| .d-none .d-lg-block | md以前非表示 | lg以降は表示 | ||||
| .d-none .d-xl-block | lg以前は非表示 | xl以降は表示 | ||||
| .d-none .d-xxl-block | xl以前は非表示 | xxlのみ表示 | ||||
| .d-block | すべて表示 | |||||
| .d-block .d-sm-none | xsのみ表示 | sm以降は非表示 | ||||
| .d-md-none | sm以前は表示 | md以降は非表示 | ||||
| .d-lg-none | md以前は表示 | lg以降は非表示 | ||||
| .d-xl-none | lg以前は表示 | xl以降は非表示 | ||||
| .d-xxl-none | xl以前は表示 | xxlのみ非表示 | ||||
| .d-sm-none .d-md-block | 表示 | smのみ非表示 | md以降は表示 | |||
| .d-md-none .d-lg-block | sm以前は表示 | mdのみ非表示 | lg以降は表示 | |||
| .d-lg-none .d-xl-block | md以前は表示 | lgのみ非表示 | xl以降は表示 | |||
| .d-xl-none .d-xxl-block | lg以前は表示 | xlのみ非表示 | 表示 | |||
| .d-none .d-sm-block .d-md-none | 非表示 | smのみ表示 | md以降は非表示 | |||
| .d-none .d-md-block .d-lg-none | sm以前は非表示 | mdのみ表示 | lg以降は非表示 | |||
| .d-none .d-lg-block .d-xl-none | md以前は非表示 | lgのみ表示 | xl以降は非表示 | |||
| .d-none .d-xl-block .d-xxl-none | lg以前は非表示 | xlのみ表示 | 非表示 | |||
