CSSの文字色の使い方を完全ガイド！初心者でもわかる乱数生成
生徒
「Bootstrapで、スマホでは表示して、パソコンでは非表示にするってできますか？」
先生
「できます。Bootstrapには画面サイズごとに表示・非表示を切り替える仕組みがあります。」
生徒
「パソコンを触ったことがなくても使えますか？」
先生
「はい。クラス名をコピーして貼るだけなので、とても簡単ですよ。」
1. Bootstrapの表示・可視性・レスポンシブユーティリティとは？
Bootstrapは、HTMLとCSSを使って画面をきれいに整えるための便利な道具箱です。 その中でも「表示・可視性・レスポンシブユーティリティ」は、 スマホ・タブレット・パソコンといった画面サイズごとに、 表示する内容を切り替えるための機能です。
例えば「スマホではメニューを表示したいけど、パソコンでは不要」 といった場面で大活躍します。 難しい計算やプログラミングの知識は不要で、 あらかじめ用意されたクラス名を使うだけです。
2. d-{breakpoint}-{value}の基本の考え方
dは「display（表示方法）」の頭文字です。 breakpointは「どの画面サイズか」を表します。 valueは「表示するか、しないか」を決めます。
これは、電気のスイッチに例えると分かりやすいです。 画面サイズという条件がそろったときだけ、 表示のスイッチがオンやオフになります。
Bootstrapでは、スマホ・タブレット・パソコンの大きさを あらかじめ決めてくれているので、 私たちは名前を覚えるだけで使えます。
3. ブレークポイントの種類をやさしく理解しよう
ブレークポイントとは「画面の幅の区切り」のことです。 スマホ、タブレット、ノートパソコン、デスクトップなどを 大まかに分けた基準だと思ってください。
| 名前 | 意味 | イメージ |
|---|---|---|
| sm | 小さい画面 | スマホ |
| md | 中くらいの画面 | タブレット |
| lg | 大きめの画面 | ノートパソコン |
| xl | とても大きい画面 | デスクトップ |
4. valueで指定できる表示ルール
valueには、主にblockとnoneを使います。 blockは「表示する」、 noneは「表示しない」という意味です。
たとえば、スマホでは表示したい場合はblock、 スマホでは隠したい場合はnoneを使います。 日本語にすると「この画面サイズでは見せる・見せない」 を指定しているだけなので、とてもシンプルです。
5. スマホだけに表示する簡単な例
<div class="d-block d-md-none">
スマホのときだけ表示されます
</div>
この例では、スマホサイズでは表示され、 タブレット以上の画面では表示されません。 d-md-noneは「md以上では非表示」という意味です。
6. パソコンだけに表示する例
<div class="d-none d-lg-block">
パソコンのときだけ表示されます
</div>
最初にd-noneで「全部非表示」にして、 d-lg-blockで「大きな画面だけ表示」にしています。 この考え方は、よく使うので覚えておくと便利です。
7. 画像を画面サイズで切り替える例
<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用画像">
このようにすると、スマホとパソコンで 別の画像を見せることができます。 ネットショップやブログでもよく使われる方法です。
8. d-{breakpoint}-{value}早見表
最後に、よく使う組み合わせをまとめます。 これを見ながらコピーして使えば、 Bootstrap初心者でも迷わず設定できます。
| 目的 | クラス指定 |
|---|---|
| スマホだけ表示 | d-block d-md-none |
| タブレット以上で表示 | d-none d-md-block |
| パソコンだけ表示 | d-none d-lg-block |
| すべて非表示 | d-none |
Bootstrapの表示制御は、 「名前の意味が分かれば怖くない」仕組みです。 スマホ対応、レスポンシブデザイン、 表示切り替えといったキーワードで検索しても、 この知識が必ず役に立ちます。
この記事を読んだ人からの質問
プログラミング初心者からのよくある疑問／質問を解決します
Bootstrapでスマホだけ表示してパソコンでは非表示にする方法とは？レスポンシブ対応の基本を知りたいです。
Bootstrapでは表示・非表示を切り替えるユーティリティクラスを使うことで、スマホだけ表示し、パソコンでは非表示にできます。画面サイズごとに表示を変更できるため、レスポンシブデザインを簡単に実現できます。HTMLとCSSの難しい知識がなくても、Bootstrapのクラス名を組み合わせるだけで設定できるので初心者にもおすすめです。
【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を楽しみながら、一緒に学びましょう！
各回少人数・マンツーマン形式で徹底サポート
このセミナーの詳細・お申し込みはこちら
