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の表示制御は、 「名前の意味が分かれば怖くない」仕組みです。 スマホ対応、レスポンシブデザイン、 表示切り替えといったキーワードで検索しても、 この知識が必ず役に立ちます。
【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を楽しみながら、一緒に学びましょう！
各回少人数・マンツーマン形式で徹底サポート
このセミナーの詳細・お申し込みはこちら
