Bootstrapの.d-flex完全入門！display:flexを最短で理解する初心者ガイド
生徒
「Bootstrapで.d-flexってよく見かけるんですが、何をしているんですか？」
先生
「.d-flexは、HTMLの要素を横並びにしたり、整列しやすくするためのスイッチのようなものです。」
生徒
「スイッチ…ですか？」
先生
「はい。.d-flexを付けるだけで、レイアウトの考え方が一気に変わります。まずは基本から見ていきましょう。」
1. .d-flexとは何かを超シンプルに理解しよう
.d-flexは、Bootstrapに用意されているクラスで、display:flexというCSSの設定を一瞬で有効にします。displayは「表示方法」、flexは「並び方の仕組み」を意味します。
例えるなら、机の上に物を置くとき、普通は上から下に積み重なりますが、横にきれいに並べたいときがあります。その「横に並べる机」に切り替えるスイッチが.d-flexです。
難しく考えなくて大丈夫です。.d-flexを付けた瞬間、その中の要素は横並びが基本になります。
2. なぜBootstrapで.d-flexを使うのか
Bootstrapを使わずに横並びを作ろうとすると、CSSを自分で書く必要があります。初心者にとっては、どこに何を書くのか分からず混乱しやすいです。
.d-flexを使えば、HTMLにクラス名を追加するだけでレイアウトを変更できます。パソコン操作に慣れていない人でも、コピペで扱えるのが大きなメリットです。
Bootstrapのフレックス・アラインメントユーティリティは、失敗しにくく、画面サイズが変わっても崩れにくい設計になっています。
3. .d-flexを使った一番かんたんな例
<div class="d-flex">
<div class="p-2 border">りんご</div>
<div class="p-2 border">みかん</div>
<div class="p-2 border">バナナ</div>
</div>
この例では、3つの箱が横に並びます。.d-flexがなければ縦に並びますが、付けるだけで横並びになります。
この「付けるだけ」という感覚をまず覚えてください。
4. .d-flexが付く場所の考え方
.d-flexは、親になる要素に付けます。親とは「中に別のタグが入っている側」のことです。
段ボール箱の中に小箱を入れるイメージをしてください。段ボール箱が.d-flexを持つことで、中の小箱たちが横並びになります。
子どもの要素に.d-flexを付けても、横並びにはならないので注意が必要です。
<div class="d-flex">
<img src="/img/sample120-120.jpg" alt="画像1">
<img src="/img/sample120-120.jpg" alt="画像2">
</div>
5. .d-flexでレイアウトの考え方が変わる理由
.d-flexを使うと、「上から下に流れる」というHTMLの基本ルールから、「横方向を意識する」考え方に切り替わります。
これは、文字を書くノートが縦書きから横書きに変わるような感覚です。最初は違和感がありますが、慣れるととても整理しやすくなります。
Bootstrapでは、このフレックスの考え方を前提に多くの部品が作られています。
6. .d-flexと一緒によく使われる場面
.d-flexは、ナビゲーション、ボタンの並び、画像と文字の横並びなど、よく目にする場所で使われます。
たとえば「アイコン＋文字」を横に並べたいとき、.d-flexはとても相性が良いです。
<div class="d-flex align-items-center">
<i class="bi bi-star-fill me-2"></i>
<span>お気に入り</span>
</div>
7. .d-flexを使うときの初心者がつまずきやすい点
一番多いのは「思った通りに並ばない」という悩みです。その多くは、.d-flexを付ける場所が間違っています。
もう一つは、「勝手に横並びになるのが怖い」という不安です。しかし、これは意図した場所だけに.d-flexを付ければ問題ありません。
まずは小さな範囲で試して、動きを目で見て覚えることが大切です。
8. .d-flexはレイアウト学習の第一歩
.d-flexは、Bootstrapのフレックス・アラインメントユーティリティの入口です。ここを理解すると、画面作りが一気に楽になります。
難しい理屈を覚える必要はありません。「横に並べたいときは.d-flex」という感覚で十分です。
パソコン操作が苦手な人でも、見た目の変化を確認しながら学べるのが.d-flexの魅力です。
【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を楽しみながら、一緒に学びましょう！
各回少人数・マンツーマン形式で徹底サポート
このセミナーの詳細・お申し込みはこちら
