ウィンドウ幅に応じて枠の表示、非表示を切り替える - Bootstrap
Bootstrapでウィンドウ幅に応じて枠の表示、非表示を切り替えるコードを紹介します。
メモ
CSSのメディアクエリーを利用する方法は
こちらの記事を参照してください。
概要
Bootstrapでウィンドウの幅に応じて、枠の表示や非表示を切り替える場合は、
d- クラスを利用します。
書式
または
ブレークポイントの記述には以下を指定できます。
| ブレークポイント識別子 |
|---|
| なし |
| sm |
| md |
| lg |
| xl |
表示モードには以下を指定できます。
| ブレークポイント識別子 | 意味 |
|---|
| none | 非表示 |
| inline | インライン表示 |
| inline-block | インライン・ブロック表示 |
| block | ブロック表示 |
| table | テーブル表示 |
| table-row | テーブル行表示 |
| table-cell | テーブルセル表示 |
| flex | flexコンテナ表示 |
| inline-flex | flexインラインコンテナ表示 |
none の動作
| クラス名 | 動作 |
|---|
| d-none | 常に非表示 |
| d-sm-none | 576ピクセル以上で非表示 (576ピクセル以下で表示) |
| d-md-none | 768ピクセル以上で非表示 (768ピクセル以下で表示) |
| d-lg-none | 992ピクセル以上で非表示 (992ピクセル以下で表示) |
| d-xl-none | 1200ピクセル以上で非表示 (1200ピクセル以下で表示) |
block の動作
| クラス名 | 動作 |
|---|
| d-none d-block | 常に表示 |
| d-none d-sm-block | 576ピクセル以上で表示 (576ピクセル以下で非表示) |
| d-none d-md-block | 768ピクセル以上で表示 (768ピクセル以下で非表示) |
| d-none d-lg-block | 992ピクセル以上で表示 (992ピクセル以下で非表示) |
| d-none d-xl-block | 1200ピクセル以上で表示 (1200ピクセル以下で非表示) |
| クラス名 | 動作 |
|---|
| d-sm-none d-block | 常に表示 |
| d-sm-none d-sm-block | 常に表示 (576ピクセル以下、576ピクセル以上で非表示) |
| d-sm-none d-md-block | 768ピクセル以上で表示、576ピクセル以下で表示 (768ピクセル以下、576ピクセル以上で非表示) |
| d-sm-none d-lg-block | 992ピクセル以上で表示、576ピクセル以下で表示 (992ピクセル以下、576ピクセル以上で非表示) |
| d-sm-none d-xl-block | 1200ピクセル以上で表示、576ピクセル以下で表示 (1200ピクセル以下、576ピクセル以上で非表示) |
| クラス名 | 動作 |
|---|
| d-md-none d-block | 768ピクセル以下で表示 (d-md-noneと同じ) |
| d-md-none d-sm-block | 768ピクセル以下で表示 (d-md-noneと同じ) |
| d-md-none d-md-block | 常に表示 (768ピクセル以下、768ピクセル以上で非表示) |
| d-md-none d-lg-block | 992ピクセル以上で表示、768ピクセル以下で表示 (992ピクセル以下、768ピクセル以上で非表示) |
| d-md-none d-xl-block | 1200ピクセル以上で表示、768ピクセル以下で表示 (1200ピクセル以下、768ピクセル以上で非表示) |
| クラス名 | 動作 |
|---|
| d-lg-none d-block | 992ピクセル以下で表示 (d-lg-noneと同じ) |
| d-lg-none d-sm-block | 992ピクセル以下で表示 (d-lg-noneと同じ) |
| d-lg-none d-md-block | 992ピクセル以下で表示 (d-lg-noneと同じ) |
| d-lg-none d-lg-block | 常に表示 (992ピクセル以下、992ピクセル以上で非表示) |
| d-lg-none d-xl-block | 1200ピクセル以上で表示、992ピクセル以下で表示 (1200ピクセル以下、992ピクセル以上で非表示) |
| クラス名 | 動作 |
|---|
| d-xl-none d-block | 1200ピクセル以下で表示 (d-xl-noneと同じ) |
| d-xl-none d-sm-block | 1200ピクセル以下で表示 (d-xl-noneと同じ) |
| d-xl-none d-md-block | 1200ピクセル以下で表示 (d-xl-noneと同じ) |
| d-xl-none d-lg-block | 1200ピクセル以下で表示 (d-xl-noneと同じ) |
| d-xl-none d-xl-block | 常に表示 (1200ピクセル以下、1200ピクセル以上で非表示) |
例
コード
下記のコードを記述します。
#frame1{
background-color:#ffcece;
border:1px solid #b90000;
}
#frame2 {
background-color: #ffc69c;
border: 1px solid #ff6a00;
}
#frame3 {
background-color: #fff2a9;
border: 1px solid #d3bb00;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="Content/bootstrap.css" />
<script src="Scripts/jquery.js"></script>
<script src="Scripts/bootstrap.js"></script>
<link rel="stylesheet" href="Hidden-Column-01.css" />
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-2 d-none d-md-block" id="frame1">
項目1<br />
てすとてすと<br/>
</div>
<div class="col-6 col-md-5" id="frame2">
項目2<br />
てすとてすと<br />
</div>
<div class="col-6 col-md-5" id="frame3">
項目3<br />
てすとてすと<br />
</div>
</div>
</div>
</body>
</html>
解説
下記のクラス設定の
col-2により、ウィンドウ幅の全体の6分の1の幅の枠を表示します。
d-none d-md-blockにより、768ピクセル以下で枠が非表示になります。
<div class="col-2 d-none d-md-block" id="frame1">
一方、frame2, frame3 の枠は、ウィンドウ幅が768ピクセル以上の場合は、ウィンドウ幅の6分の5の半分の幅で枠が表示されます。ウィンドウ幅が768ピクセル以下の場合はページ幅全体の半分の幅で表示されます。
<div class="col-6 col-md-5" id="frame2">
...
<div class="col-6 col-md-5" id="frame3">
上記の設定により、768ピクセル以上では3段組みで表示され、768ピクセル以下になると、frame1の枠が非表示になり、残った2枠で2段組みの表示に切り替わります。
表示結果
上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。
ウィンドウ幅が広い状態では3段組みで表示されます。
ウィンドウ幅を狭め、ウィンドウ幅が768ピクセル以下になると2段組みの表示に切り替わります。
さらにウィンドウ幅を縮めると2段組みのまま幅が狭まります。
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
