1 概要
2 決められた幅よりウィンドウ幅が広くなると要素を非表示にする
- 2.1 書式
- 2.2 動作
- 2.3 実装例
  - 2.3.1 コード
  - 2.3.2 解説
  - 2.3.3 表示結果
3 決められた幅よりウィンドウ幅が狭くなると要素を非表示にする
- 3.1 実装例
- 3.2 解説
- 3.3 表示結果

Bootstrapでウィンドウ幅に応じて要素を非表示にする - Bootstrap

Bootstrapでウィンドウ幅に応じて要素を非表示にする方法を紹介します。

概要

Bootstrapでウィンドウ幅の広さによって要素を非表示にする場合は要素のクラスに d-(サイズ)-none を設定します。

決められた幅よりウィンドウ幅が広くなると要素を非表示にする

ウィンドウ幅があらかじめ決められている幅より広くなった場合に要素を非表示にするコードです。このコードは、決められた幅よりウィンドウ幅が狭くなった場合に要素を表示する動作でもあります。

書式

クラスに以下の記述を追加します。

d-none

d-sm-none

d-md-none

d-lg-none

d-xl-none

d-xxl-none

動作

d-none	常に非表示
d-sm-none	ウィンドウ幅が小(576ピクセル)以上で非表示
d-md-none	ウィンドウ幅が中(768ピクセル)以上で非表示
d-lg-none	ウィンドウ幅が大(992ピクセル)以上で非表示
d-xl-none	ウィンドウ幅が特大(1200ピクセル)以上で非表示
d-xxl-none	ウィンドウ幅が特大(1400ピクセル)以上で非表示

補足

d-xxl- の設定はBootstrap 5 のみ利用可能です。

実装例

コード

SimpleHidden.css

.frame1 {
  border: solid 1px #31983f;
}

.frame2 {
  border: solid 1px #ff6a00;
}

.frame3 {
  border: solid 1px #530094;
}

.frame4 {
  border: solid 1px #0278bd;
}

SimpleHidden.html

<!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="SimpleHidden.css" />
</head>
<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-3 frame1">
        枠1です。<br />
        ABCDEFG
      </div>
      <div class="col-md-3 frame2">
        枠2です。<br />
        ABCDEFG
      </div>
      <div class="col-md-3 d-lg-none frame3">
        枠3です。<br />
        ABCDEFG
      </div>
      <div class="col-md-3 frame4">
        枠4です。<br />
        ABCDEFG
      </div>
    </div>
  </div>
</body>
</html>

解説

col-の動作についてはこちらの記事を参照してください。
d-lg-none が設定されている「枠3」はウィンドウ幅が992ピクセル以上になると非表示になります。

表示結果

上記のHTMLファイルを実行します。下図のページが表示されます。ウィンドウ幅が992ピクセル以上のためd-lg-noneを指定した"枠3"は非表示になることが確認できます。

ウィンドウの幅を狭めます。ウィンドウ幅が992ピクセル以下になると。"枠3"が表示されます。

さらにウィンドウ幅が狭まると段組みが解除されますが、"枠3"は表示されたままです。

決められた幅よりウィンドウ幅が狭くなると要素を非表示にする

決められた幅よりウィンドウ幅が狭くなった場合に要素を非表示にする場合は、先に紹介した、d-none とウィンドウ幅に応じて要素を表示する d-sm-block d-md-block d-lg-block d-xl-blockを組み合わせると実現できます。

実装例

SimpleHidden.css

.frame1 {
  border: solid 1px #31983f;
}

.frame2 {
  border: solid 1px #ff6a00;
}

.frame3 {
  border: solid 1px #530094;
}

.frame4 {
  border: solid 1px #0278bd;
}

SimpleHiddenReverse.html

<!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="SimpleHidden.css" />
</head>
<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-3 frame1">
        枠1です。<br />
        ABCDEFG
      </div>
      <div class="col-md-3 frame2">
        枠2です。<br />
        ABCDEFG
      </div>
      <div class="col-md-3 d-none d-lg-block frame3">
        枠3です。<br />
        ABCDEFG
      </div>
      <div class="col-md-3 frame4">
        枠4です。<br />
        ABCDEFG
      </div>
    </div>
  </div>
</body>
</html>