先生と生徒の会話形式で理解しよう

生徒

「スマホでは隠したい部分があるんですけど、Bootstrapでできますか？」

先生

「はい、Bootstrap 5ならスマホ・タブレット・パソコンなどの画面サイズに合わせて表示・非表示を切り替えることができます。」

生徒

「すごい！どうやって指定するんですか？」

先生

「それではBootstrapのdisplayクラスとvisibilityクラスを使って、レスポンシブに表示をコントロールする方法を見ていきましょう！」

1. Bootstrapのdisplayクラスで表示・非表示を切り替える

Bootstrap 5では、.d-noneや.d-blockなどのdisplayクラスを使うことで、要素を非表示または表示にできます。

さらに、.d-sm-noneのように「画面の幅」に応じた表示・非表示の切り替えも可能です。

2. レスポンシブ表示の基本：画面サイズに応じた切り替え

Bootstrapには以下のような画面サイズの区分（ブレークポイント）があります。

sm（スマホ）: 576px以上
md（タブレット）: 768px以上
lg（ノートパソコン）: 992px以上
xl（デスクトップ）: 1200px以上
xxl（大型画面）: 1400px以上

たとえば、スマホだけ非表示にしたい場合は.d-sm-noneを使います。

3. 表示・非表示のサンプルコードを見てみよう

以下は、スマホでは非表示・パソコンでは表示になる例です。


<div class="d-none d-md-block">
    <p>この文章はスマホでは非表示、パソコンでは表示されます。</p>
</div>

ブラウザ表示

4. visibilityとの違いとは？

visibilityクラスを使うと、要素の「場所」はそのままで、見た目だけを非表示にできます。

.invisibleを使えば、要素の位置を保ったまま透明になります。

5. visibilityを使った表示例

以下は、透明にする例です。実際には存在しているけど、見えないだけです。


<div class="invisible">
    <p>この要素は透明で見えませんが、レイアウトには影響しています。</p>
</div>

ブラウザ表示

6. よくある誤解と注意点

.d-noneで非表示にした場合、その要素は完全に画面から消えるため、画面上の配置やサイズにも影響します。

一方、.invisibleは見えないだけで、スペースは残ります。

この違いを理解することで、レイアウト崩れを防ぐことができます。

7. 応用：デバイス別に異なるメッセージを表示する

以下の例では、スマホとパソコンで表示内容を切り替えています。


<div class="d-block d-md-none">
    <p>スマホで表示されるメッセージ</p>
</div>

<div class="d-none d-md-block">
    <p>パソコンで表示されるメッセージ</p>
</div>

ブラウザ表示

まとめ

Bootstrap 5で学んだ表示・非表示の基本

ここまで、Bootstrap 5を使った表示・非表示の制御について、基礎から応用まで丁寧に確認してきました。 BootstrapはHTMLにクラスを指定するだけで、画面サイズごとに要素の表示を切り替えられる非常に便利なフレームワークです。特にレスポンシブ対応が求められる現代のWeb制作では、スマホ、タブレット、パソコンといった複数のデバイスに対応した画面設計が欠かせません。その中で、displayクラスとvisibilityクラスを正しく理解することは、レイアウト崩れを防ぎ、見やすい画面を作るための重要なポイントになります。

displayクラスであるd-noneやd-blockは、要素そのものを表示するか、完全に非表示にするかを制御します。非表示にした要素はレイアウト上からも消えるため、余白や配置に影響を与えます。一方でvisibilityクラスのinvisibleは、要素の存在自体は残したまま、見た目だけを非表示にする仕組みです。この違いを理解せずに使ってしまうと、意図しない空白が生まれたり、逆に詰まりすぎたレイアウトになってしまうことがあります。

レスポンシブ対応で意識したいポイント

Bootstrap 5では、sm、md、lg、xl、xxlといったブレークポイントが用意されています。これらは単なる画面サイズの区切りではなく、ユーザー体験を向上させるための設計指針でもあります。例えば、スマホでは情報を最小限にして操作しやすくし、パソコンでは詳細な情報を表示するといった使い分けが可能です。表示・非表示の制御をうまく活用することで、ユーザーにとって読みやすく、使いやすいWebページを実現できます。

まとめとしてのサンプルプログラム

ここで、これまでの内容を整理したサンプルプログラムを確認してみましょう。スマホでは注意文を表示し、パソコンでは詳細説明を表示する、実務でもよく使われる構成です。


<div class="d-block d-md-none alert alert-warning">
    <p>現在スマートフォンで表示しています。画面を横向きにすると見やすくなります。</p>
</div>

<div class="d-none d-md-block alert alert-info">
    <p>こちらはパソコン向けの詳細な説明エリアです。大きな画面で快適に閲覧できます。</p>
</div>

ブラウザ表示

このように、Bootstrapのクラスを組み合わせるだけで、JavaScriptを使わずに柔軟な表示切り替えが可能になります。初心者の方でも、まずはこのようなシンプルな構成から試していくことで、レスポンシブデザインへの理解が深まります。

先生と生徒の振り返り会話

生徒

「Bootstrapの表示・非表示って、ただ隠すだけじゃなくて、画面サイズごとに考えるのが大事なんですね。 d-noneとinvisibleの違いも、やっと理解できました。」

先生

「その理解はとても大切ですね。表示・非表示の制御は、レスポンシブデザインの基礎中の基礎です。どの情報を、どのデバイスで見せるかを意識することで、Webページの品質は大きく向上します。」

生徒

「これなら、スマホ用とパソコン用でHTMLを分けなくても対応できそうです。実際のWebサイト制作でもすぐに使えそうだと感じました。」

先生

「その通りです。 Bootstrap 5を使えば、シンプルなHTML構造のまま、柔軟なレスポンシブ対応ができます。今日学んだdisplayクラスとvisibilityクラスをしっかり身につけて、次はレイアウトやグリッドにも挑戦してみましょう。」