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が指定されているだけの場合が多いです。
まずは「見せるか」「隠すか」を意識して、クラス名をゆっくり確認することが大切です。
まとめ
Bootstrap5の表示切替の基本をしっかり理解する
本記事では、Bootstrap5における表示切替の基本である.d-noneと.d-block、そしてレスポンシブ対応のための表示制御クラスについて詳しく解説しました。Web制作やフロントエンド開発において、表示と非表示をコントロールすることは非常に重要なスキルであり、ユーザーにとって見やすく使いやすい画面を作るための基礎となります。
.d-noneは要素を完全に非表示にするためのクラスであり、画面上からその存在を消す役割を持ちます。一方で.d-blockは、要素を通常通り表示するためのクラスです。この二つの違いを理解することで、表示切替の仕組みがシンプルに整理できるようになります。
表示切替の考え方は、日常生活の中でもイメージしやすいものです。例えば、カーテンを開けると見える、閉めると見えないという動きと同じです。このように直感的に理解できるため、プログラミング初心者でも安心して扱うことができます。
レスポンシブデザインと表示制御の重要性
Bootstrap5の大きな特徴の一つが、レスポンシブデザインへの対応です。スマートフォン、タブレット、パソコンといった異なる画面サイズに応じて表示内容を切り替えることで、どのデバイスでも見やすいWebページを実現できます。
例えば、スマートフォンでは情報量を減らしてシンプルに表示し、パソコンでは詳細な情報を表示するといった設計が可能になります。このような表示制御は、ユーザー体験の向上に直結する重要なポイントです。
実務でよく使う表示切替のサンプルコード
<div class="container">
<h1 class="fw-bold">表示切替サンプル</h1>
<div class="d-none d-md-block bg-primary text-white p-3 mb-2">
パソコンやタブレットサイズで表示されます
</div>
<div class="d-block d-md-none bg-success text-white p-3">
スマートフォンサイズで表示されます
</div>
</div>
このように、複数のクラスを組み合わせることで、画面サイズごとに表示内容を切り替えることができます。実務ではナビゲーションメニューや画像、広告表示などで頻繁に利用されるテクニックです。
初心者が覚えておくべき設計の考え方
表示切替を行う際には、単に表示するか隠すかだけでなく、どの情報を優先して見せるのかを考えることが重要です。すべての情報を表示しようとすると画面がごちゃごちゃしてしまい、逆に使いにくくなってしまいます。
そのため、画面サイズや利用シーンに応じて情報を整理し、必要なものだけを表示するという設計が求められます。これはユーザー体験の向上だけでなく、ページの読み込み速度の改善にもつながります。
ユーザー体験と検索評価の関係
見やすく整理されたページは、ユーザーが長く滞在しやすくなり、結果としてサイト全体の評価向上にもつながります。特にスマートフォンでの閲覧が主流となっている現在では、レスポンシブ対応は必須と言えるでしょう。
表示切替を適切に活用することで、不要な情報を減らし、必要な情報を的確に届けることができます。このような工夫の積み重ねが、質の高いWebサイトを作るための重要なポイントになります。
生徒
「表示と非表示って、思ったより簡単に切り替えられるんですね」
先生
「はい。クラスを付けるだけなので、初心者でもすぐに使えるのがBootstrapの良いところです」
生徒
「画面サイズごとに変えられるのも便利だと思いました」
先生
「レスポンシブ対応は今のWeb制作では必須です。しっかり理解しておきましょう」
生徒
「どの情報を見せるか考えるのも大事なんですね」
先生
「その通りです。技術と同じくらい設計の考え方も重要です。今回の内容を実践で活かしていきましょう」
【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を楽しみながら、一緒に学びましょう！
各回少人数・マンツーマン形式で徹底サポート
このセミナーの詳細・お申し込みはこちら
