Bootstrapでスマホは非表示・PCで表示する方法完全ガイド｜レスポンシブ表示と可視性ユーティリティ入門
生徒
「スマホでは邪魔だから隠して、パソコンでは表示したい内容って作れますか？」
先生
「Bootstrapを使うと、画面サイズごとに表示と非表示を簡単に切り替えられます。」
生徒
「スマホとパソコンで見え方を変えるって、むずかしくないですか？」
先生
「大丈夫です。決められたクラスを付けるだけで実現できます。」
1. Bootstrapで画面サイズごとに表示を変える考え方
Bootstrapでは、スマホ・タブレット・パソコンなど画面の大きさに応じて、表示内容を切り替える仕組みがあります。これをレスポンシブデザインと呼びます。レスポンシブとは、見る人の環境に合わせて自動的に形を変えるという意味です。
例えば、小さなスマホ画面では説明文を減らし、パソコンの大きな画面では詳しく表示する、といった使い方ができます。
2. 表示と非表示を切り替えるユーティリティクラス
Bootstrapには、表示を制御するためのクラスが用意されています。代表的なのが d-none と d-block です。none は見えない、block は見える状態を意味します。
これらを組み合わせることで「スマホでは隠す」「PCでは表示する」といった指定が可能になります。
3. スマホで隠してPCで表示する基本例
<div class="d-none d-md-block">
<p>この文章はパソコンでだけ表示されます。</p>
</div>
d-none はすべての画面で非表示にし、d-md-block は中くらい以上の画面で表示する指定です。中くらいとはタブレット横向きやパソコンを指します。
4. スマホ専用・PC専用コンテンツの作り分け
同じ場所に、スマホ用とPC用の内容を別々に用意することもできます。これにより、説明量や画像サイズを最適化できます。
<div class="d-block d-md-none">
<p>スマホ向けの短い説明です。</p>
</div>
<div class="d-none d-md-block">
<p>パソコン向けの詳しい説明です。</p>
</div>
5. 画像を画面サイズで出し分ける実装例
画像も同じ方法で切り替えられます。スマホでは軽い小さな画像、PCでは大きく見やすい画像を表示すると、読み込みも速くなります。
<img src="/img/sample150-100.jpg" class="d-block d-md-none" alt="スマホ用画像">
<img src="/img/sample120-120.jpg" class="d-none d-md-block" alt="PC用画像">
6. よく使う画面サイズの区切りを理解しよう
Bootstrapでは画面サイズをいくつかの段階に分けています。小さい順に、スマホ、タブレット、ノートパソコン、デスクトップです。md は真ん中あたりのサイズを意味します。
初心者のうちは「スマホ用」と「それ以外」という分け方だけ覚えておくと十分です。
7. 実務でよくあるUI最適化の考え方
スマホでは指で操作するため、情報は少なめにします。パソコンでは画面が広いため、補足説明やサイド情報を表示すると親切です。
Bootstrapの表示制御を使うことで、同じHTMLでも利用者に合った見せ方ができます。
8. 初心者がつまずきやすいポイント
クラスの指定順を間違えると、意図しない表示になることがあります。基本は「まず隠す、あとで表示する」という考え方を意識してください。
一度に多くの画面サイズを意識せず、スマホとPCの2つから始めると失敗しにくくなります。
【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を楽しみながら、一緒に学びましょう！
各回少人数・マンツーマン形式で徹底サポート
このセミナーの詳細・お申し込みはこちら
