Bootstrap5でボタン群・ナビゲーションをflexで整列する定番レシピ完全ガイド

1. Bootstrapのflexとは何かをやさしく解説

1. Bootstrapのflexとは何かをやさしく解説

Bootstrap5には、フレックスボックスというCSSの仕組みを簡単に使える便利なクラスが用意されています。フレックスとは、箱を横や縦にきれいに並べるための仕組みです。たとえば、お弁当箱の中におかずを整然と並べるイメージをすると分かりやすいです。

通常のHTMLでは、要素は上から順番に縦に並びます。しかし、ボタン群やナビゲーションメニューは横に並べたいことが多いです。そのときに使うのがd-flexというクラスです。これを指定するだけで、子要素が横並びになります。

Bootstrapのフレックスユーティリティは、justify-contentやalign-itemsと組み合わせて使います。これにより、中央寄せや右寄せ、上下中央揃えなどが簡単に実現できます。

2. ボタン群を横並びにする基本レシピ

2. ボタン群を横並びにする基本レシピ

まずは一番基本的なボタン群の整列方法です。複数のボタンを横に並べたいときは、親要素にd-flexを指定します。これだけで横並びになります。

<div class="d-flex">
    <button class="btn btn-primary me-2">保存</button>
    <button class="btn btn-success me-2">更新</button>
    <button class="btn btn-danger">削除</button>
</div>

me-2はマージンエンドという意味で、右側に余白をつけています。余白とは、要素と要素の間のすき間のことです。これにより、ボタンがくっつかず見やすくなります。

3. 中央寄せや右寄せにする方法

3. 中央寄せや右寄せにする方法

ボタン群を中央に配置したい場合は、justify-content-centerを使います。justifyは横方向の位置を調整するという意味です。

<div class="d-flex justify-content-center">
    <button class="btn btn-outline-primary me-2">前へ</button>
    <button class="btn btn-outline-secondary">次へ</button>
</div>

右寄せにしたい場合はjustify-content-endを使います。これにより、ナビゲーションやボタンを画面の右側に整列できます。Webデザインではよく使われるテクニックです。

4. 高さをそろえるalign-itemsの使い方

4. 高さをそろえるalign-itemsの使い方

align-itemsは縦方向の位置をそろえるためのクラスです。たとえば高さの違うボタンや画像とテキストを同じ高さにそろえたい場合に使います。

<div class="d-flex align-items-center" style="height:120px;">
    <img src="/img/sample120-120.jpg" class="me-3">
    <button class="btn btn-primary">ログイン</button>
</div>

align-items-centerを使うことで、上下中央に配置されます。centerは中央という意味です。ナビゲーションバーの作成時にもよく利用されます。

5. ナビゲーションメニューをflexで整列する

5. ナビゲーションメニューをflexで整列する

Webサイトの上部にあるナビゲーションメニューも、Bootstrapのflexで簡単に整列できます。リンクを横並びにし、間隔をあけることで見やすいメニューになります。

<nav class="d-flex justify-content-between align-items-center p-3 bg-light">
    <div class="fw-bold">MySite</div>
    <div>
        <a href="#" class="me-3 text-decoration-none">ホーム</a>
        <a href="#" class="me-3 text-decoration-none">サービス</a>
        <a href="#" class="text-decoration-none">お問い合わせ</a>
    </div>
</nav>

justify-content-betweenを使うことで、左右に要素を分けて配置できます。これにより、ロゴとメニューをきれいに分離できます。

6. btn-groupとの違いと使い分け

6. btn-groupとの違いと使い分け

Bootstrapにはbtn-groupという専用クラスもあります。これはボタンを一体化してグループ化するための機能です。d-flexは自由に配置できるのに対し、btn-groupはボタンを密着させたいときに使います。

<div class="btn-group">
    <button class="btn btn-primary">左</button>
    <button class="btn btn-primary">中央</button>
    <button class="btn btn-primary">右</button>
</div>

用途に応じてflexユーティリティとbtn-groupを使い分けることが、Bootstrap5のレイアウト設計では重要です。

7. レスポンシブ対応で画面サイズごとに整列を変える

7. レスポンシブ対応で画面サイズごとに整列を変える

Bootstrap5の強みはレスポンシブ対応です。レスポンシブとは、画面サイズに応じて表示を変える仕組みのことです。たとえばスマートフォンでは縦並び、パソコンでは横並びにすることも可能です。

<div class="d-flex flex-column flex-md-row">
    <button class="btn btn-primary me-md-2 mb-2 mb-md-0">メニュー1</button>
    <button class="btn btn-secondary">メニュー2</button>
</div>

flex-md-rowは中サイズ以上で横並びにする指定です。このようにBootstrapのフレックスアラインメントユーティリティを使えば、ボタン群やナビゲーションの整列が直感的に実現できます。HTMLとCSSの基礎を理解しながら、Bootstrap5のクラスを活用することで、効率的なWeb制作が可能になります。

まとめ

まとめ

Bootstrap5でボタン群やナビゲーションをflexで整列する方法について解説してきました。Bootstrap5のフレックスユーティリティを活用することで、HTMLとCSSの知識がまだ浅い初心者でも、効率よくレイアウトを整えることができます。特にd-flex、justify-content、align-items、flex-column、flex-rowといったクラスは、Web制作における基本かつ重要なテクニックです。

ボタン群を横並びにしたい場合はd-flexを指定するだけで実現でき、さらにjustify-content-centerやjustify-content-endを使えば中央寄せや右寄せも簡単に設定できます。ナビゲーションメニューではjustify-content-betweenを活用することで、ロゴとメニューリンクを左右に分けた整列が可能になります。これらはWebデザインやフロントエンド開発において頻繁に使われるレイアウト手法です。

またalign-items-centerを使えば縦方向の中央揃えも実現でき、高さの異なる画像やボタン、テキストを美しく整列できます。レスポンシブ対応ではflex-md-rowやflex-columnを組み合わせることで、スマートフォンでは縦並び、パソコンでは横並びといった柔軟なレイアウト変更が可能です。Bootstrap5はモバイルファースト設計のため、レスポンシブデザインとの相性も抜群です。

btn-groupとの違いも理解しておくことが重要です。btn-groupはボタンを一体化してグループ表示したい場合に適しています。一方でflexユーティリティは自由度が高く、余白や配置の調整がしやすいという特徴があります。用途に応じて使い分けることで、より洗練されたユーザーインターフェースを構築できます。

Bootstrap5のflexを正しく理解することで、ボタン配置、ナビゲーション整列、中央寄せレイアウト、レスポンシブ対応、画面幅別デザイン調整など、実務レベルのWebサイト制作に必要なスキルを身につけることができます。HTMLとCSSの基礎を押さえつつ、Bootstrapのユーティリティクラスを活用することが、効率的なフロントエンド開発への近道です。

サンプルプログラム総合例

<nav class="d-flex flex-column flex-md-row justify-content-between align-items-center p-3 bg-light">
    <div class="fw-bold mb-2 mb-md-0">FlexSite</div>
    <div class="d-flex">
        <a href="#" class="me-3 text-decoration-none">ホーム</a>
        <a href="#" class="me-3 text-decoration-none">サービス</a>
        <a href="#" class="text-decoration-none">お問い合わせ</a>
    </div>
</nav>

<div class="d-flex justify-content-center mt-4">
    <button class="btn btn-primary me-2">保存</button>
    <button class="btn btn-success me-2">更新</button>
    <button class="btn btn-danger">削除</button>
</div>

このようにBootstrap5のflexユーティリティを組み合わせることで、ナビゲーションバーとボタン群を同時に整列させることができます。フレックスボックスを理解することで、レイアウト崩れを防ぎ、保守性の高いHTML構造を作ることができます。Web制作初心者から中級者まで必須の知識といえるでしょう。