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の魅力です。
まとめ
ここまでBootstrapのd flexについて、初心者の方でも理解できるように基本から丁寧に解説してきました。d flexは、display flexというCSSの仕組みを簡単に使えるようにしたBootstrapの便利なクラスであり、HTMLレイアウトを整える上で非常に重要な役割を持っています。特にWeb制作やフロントエンド開発において、横並びレイアウトを実現するための基本技術として、多くの現場で活用されています。
従来のHTMLでは、要素は上から下へと縦方向に並ぶのが基本でした。しかし、d flexを使うことで、この並び方を横方向に変更することができます。これにより、ナビゲーションメニュー、ボタンの並び、画像とテキストの横配置など、視覚的に分かりやすく整理されたデザインを簡単に実現できます。初心者の方でも、クラスを追加するだけでレイアウトをコントロールできるため、難しいCSSの知識がなくても安心して使うことができます。
d flexの基本をしっかり整理しよう
d flexの最大の特徴は、親要素に指定することで子要素の並び方を一括で変更できる点にあります。この仕組みを理解しておくことで、レイアウトの考え方が一気にシンプルになります。親に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>
このように、d flexはとてもシンプルですが、その効果は非常に大きく、Webページの構造を直感的に整えることができます。
実務でよく使われるd flexの活用パターン
d flexは単なる横並びだけでなく、さまざまな場面で活用されます。たとえば、アイコンとテキストを横に並べる場合や、ボタンを横に配置する場合など、日常的に目にするUIの多くに使われています。また、align items centerなどと組み合わせることで、縦方向の位置も揃えることができ、より整ったデザインを実現できます。
<div class="d-flex align-items-center">
<i class="bi bi-person-fill me-2"></i>
<span>ユーザー情報</span>
</div>
このような使い方を覚えることで、見やすく整ったユーザーインターフェースを簡単に作ることができます。
初心者がつまずきやすいポイントを理解しよう
d flexを使う際に多くの初心者がつまずくポイントは、どの要素に指定するかという点です。d flexは必ず親要素に指定する必要があります。子要素に指定しても横並びにはならないため、この違いをしっかり理解しておくことが重要です。また、すべての要素が横並びになるため、意図しない配置になることもあります。その場合は、範囲を限定して使うことが大切です。
さらに、flexの仕組みに慣れていないと、配置が思い通りにならないと感じることがあります。しかし、これは実際に手を動かして試していくことで自然に理解できるようになります。最初は小さな例で試しながら、徐々に応用していくことが上達の近道です。
d flexはレイアウト設計の基礎となる重要技術
Bootstrapのd flexは、単なる便利クラスではなく、レイアウト設計の考え方そのものを変える重要な技術です。縦方向中心だったレイアウトから、横方向を意識した設計に切り替えることで、より柔軟で見やすいページを作ることができます。これは現代のWebデザインにおいて非常に重要なスキルです。
また、レスポンシブデザインとの相性も良く、スマートフォンやタブレットでも自然に表示されるレイアウトを作ることができます。Bootstrapの他のユーティリティクラスと組み合わせることで、さらに高度なデザインにも対応できます。
実践で役立つ応用例を確認しよう
実務では、d flexを使ってさまざまなレイアウトを構築します。例えば、左右に配置されたメニューや、均等に並んだカード、中央揃えのボタン配置など、多くの場面で活用されます。以下は、ボタンを横並びに配置する例です。
<div class="d-flex">
<button class="btn btn-primary me-2">保存</button>
<button class="btn btn-secondary">キャンセル</button>
</div>
このように、d flexを使うことでシンプルかつ効率的にレイアウトを整えることができます。Bootstrapを使う上で必ず覚えておきたい基本技術の一つです。
今回学んだ内容をもとに、実際に手を動かして試してみることで理解が深まります。最初は簡単な例から始めて、徐々に複雑なレイアウトに挑戦していきましょう。繰り返し使うことで、自然と使いこなせるようになります。
生徒
d flexって思ったより簡単ですね
先生
そうですねクラスを付けるだけでレイアウトが変わるのが特徴です
生徒
親に付けるというのがポイントですね
先生
そこを理解すると自由に配置できるようになります
生徒
アイコンと文字を並べるのにも使えそうです
先生
実務でもよく使うのでぜひ覚えてください
生徒
これから色々な画面で試してみます
先生
繰り返し使うことで自然と身につきますよ
この記事を読んだ人からの質問
プログラミング初心者からのよくある疑問／質問を解決します
Bootstrapの.d-flexとは何ですか？display:flexとの違いも初心者向けに教えてください。
.d-flexはBootstrapで用意されているユーティリティクラスで、CSSのdisplay:flexを簡単に適用できます。自分でCSSを書く必要がなく、HTMLへクラスを追加するだけで横並びのレイアウトを作れるため、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を楽しみながら、一緒に学びましょう！
各回少人数・マンツーマン形式で徹底サポート
このセミナーの詳細・お申し込みはこちら
