Bootstrap5の表示切替を完全ガイド！.d-none / .d-block を初心者向けにやさしく解説【レスポンシブ対応】
生徒
「Bootstrapって聞いたことはあるんですが、画面を表示したり消したりできるって本当ですか？」
先生
「できますよ。Bootstrap5には表示を切り替えるための便利なクラスがあります。」
生徒
「パソコンを触ったことがなくても理解できますか？」
先生
「大丈夫です。電気のスイッチみたいに考えると、とてもシンプルですよ。」
1. Bootstrapとは？表示切替ができる理由
Bootstrapとは、Webページを作るときに使う便利な道具箱のようなものです。文字の大きさ、色、配置、そして表示するか隠すかといった設定を、短い決まり文句で指定できます。
表示切替とは「見せる」「見せない」を切り替えることです。テレビのリモコンで画面を消したり映したりする感覚に近いです。
2. .d-noneとは？完全に表示しない指定
.d-none は「この部分は画面に表示しません」という意味です。紙に書いた文字を消しゴムで消したような状態になります。
<div class="d-none">
この文章は表示されません
</div>
このように書くと、画面には何も出てきません。存在していないように見えるのが特徴です。
3. .d-blockとは？表示する基本の形
.d-block は「普通に表示する」という指定です。ブロックとは、横いっぱいに広がる箱のような表示方法です。
<div class="d-block">
この文章は表示されます
</div>
特に指定しなくても表示される要素もありますが、あえて.d-blockを書くことで「表示する」とはっきり伝えられます。
4. 表示と非表示の使い分けを日常で考える
表示と非表示は、カーテンに例えると分かりやすいです。カーテンを閉めると見えませんが、開けると見えます。
.d-none はカーテンを閉めた状態、.d-block はカーテンを開けた状態です。Webページでも同じように考えます。
5. レスポンシブとは？画面サイズで切り替える考え方
レスポンシブとは、スマートフォンやパソコンなど、画面の大きさに合わせて表示を変える仕組みです。
Bootstrap5では、画面サイズごとに表示・非表示を指定できます。小さい画面では隠して、大きい画面では見せる、といったことが可能です。
6. 画面サイズ別の表示切替の基本
例えば「スマホでは非表示、パソコンでは表示」という指定ができます。これはチラシの小さい文字を、拡大して見せるようなイメージです。
<div class="d-none d-md-block">
パソコンサイズで表示されます
</div>
d-md-block は「中くらい以上の画面で表示する」という意味です。
7. 画像を使った表示切替の例
文字だけでなく、画像も表示・非表示を切り替えられます。必要なときだけ見せることで、画面がすっきりします。
<img src="/img/sample150-100.jpg" class="d-block d-sm-none" alt="サンプル画像">
この例では、小さい画面だけで画像が表示されます。
8. 初心者がつまずきやすいポイント
よくある間違いは「表示されないのに壊れていると思ってしまう」ことです。実際は.d-noneが指定されているだけの場合が多いです。
まずは「見せるか」「隠すか」を意識して、クラス名をゆっくり確認することが大切です。
【60分集中】CSSを1行も書かない！？Bootstrap 5ユーティリティクラス活用で開発工数を50%削減
「スピード」が武器になる。Bootstrap 5で商用クオリティのWebサイトを高速構築。
本講座では、世界シェアNo.1のフレームワークBootstrap 5を使いこなし、ゼロからレスポンシブサイトを組み上げる「現場最速のワークフロー」を学びます。単なる導入に留まらず、ユーティリティクラスを活用した効率化と、実務で必須となるカスタマイズ技法を60分で完全習得します。
具体的なワークショップ内容と環境
【つくるもの】
モダンなランディングページ（LP）やダッシュボードのプロトタイプを作成します。ナビゲーション、ヒーローセクション、カードレイアウト、フッターなど、Bootstrapのコンポーネントを組み合わせて「一瞬で形にする」感動を体験してください。
【開発環境】
VS CodeにBootstrap 5専用のSnippet（補完機能）を導入し、手入力を最小限にする環境を構築。最新のCDN利用法や、表示速度（Core Web Vitals）を意識した最適な読み込み設定など、プロの初期設定を伝授します。
この60分で得られる3つの革新スキル
スマホ・タブレット・PCでレイアウトを自由自在に切り替える「ブレイクポイント」の極意を学びます。
CSSを1行も書かずに、マージン・パディング・カラーを制御。開発工数を半分以下にする実戦術を習得します。
「Bootstrap感」を消し、独自のブランドイメージに合わせるための、上書きの作法とデザインの整え方を伝授します。
※本講座は、HTML/CSSの基本を理解した方向けの「実践加速講座」です。制作会社のコーダーや副業フリーランスとして「案件の回転率」を上げ、市場価値を最大化させたい方をモクモクがバックアップします。
Bootstrap 5を楽しみながら、一緒に学びましょう！
各回少人数・マンツーマン形式で徹底サポート
このセミナーの詳細・お申し込みはこちら
