Bootstrap5で固定幅カラムと可変カラムを同時に使う方法完全ガイド w指定とflex-basisの基本

1. 固定幅カラムと可変カラムとは何か

1. 固定幅カラムと可変カラムとは何か

固定幅カラムとは、画面の大きさが変わっても横幅が変わらない部分のことです。例えば、メニューやサイドバーがこれに当たります。一方で可変カラムとは、残ったスペースに合わせて自動的に広がったり縮んだりする部分です。本文エリアやメインコンテンツでよく使われます。

机の上に例えると、幅が決まっている引き出しが固定幅カラム、空いている机のスペースいっぱいにノートを広げるのが可変カラムです。この二つを同時に使うことで、読みやすく実用的な画面レイアウトが作れます。

2. Bootstrapのw指定の基本

2. Bootstrapのw指定の基本

Bootstrapには、要素の横幅を簡単に指定できるクラスがあります。これがw指定です。w-25やw-50などのように使い、親要素に対する割合で幅を決めます。数字はパーセントを意味しており、25なら25パーセントの幅になります。

難しい計算やCSSを書かなくても、クラスを付けるだけで幅が決まるため、初心者でも安心して使えます。

<div class="d-flex">
    <div class="w-25 bg-light p-3">固定幅エリア</div>
    <div class="flex-fill bg-secondary text-white p-3">可変エリア</div>
</div>

3. flex-basisの考え方をやさしく理解する

3. flex-basisの考え方をやさしく理解する

flex-basisとは、横並びの要素が最初にどれくらいの幅を持つかを決める考え方です。Bootstrapでは、flexboxという仕組みを使って横並びを実現しています。flex-basisは、並んだときの基準サイズだと考えると分かりやすいです。

例えば、本棚に本を並べるとき、最初から決まった厚みの本と、残りの隙間に合わせて広がる本がある、そんなイメージです。

<div class="d-flex">
    <div style="flex-basis:200px;" class="bg-warning p-3">200px固定</div>
    <div class="flex-fill bg-info p-3">残りを使用</div>
</div>

4. w指定とflex-basisを組み合わせる理由

4. w指定とflex-basisを組み合わせる理由

w指定だけでも幅は決められますが、画面サイズや内容によっては思った通りに動かないことがあります。そこでflex-basisを組み合わせると、最初の幅をしっかり決めつつ、柔軟なレイアウトが作れます。

BootstrapのユーティリティクラスとCSSの基本を少しだけ組み合わせることで、実務でも使われる本格的な画面構成が可能になります。

<div class="d-flex">
    <div class="w-25" style="flex-basis:250px;">
        <img src="/img/sample120-120.jpg" alt="">
    </div>
    <div class="flex-fill p-3">
        テキストが画面サイズに合わせて広がります
    </div>
</div>

5. よく使われるレイアウト例

5. よく使われるレイアウト例

実際のWebサイトでは、左にメニュー、右に本文という構成がよく使われます。この場合、メニューは固定幅、本文は可変幅にすると、画面が広くても狭くても読みやすくなります。

Bootstrapのd-flexとflex-fillを使えば、複雑な設定をしなくても自然な見た目になります。

<div class="d-flex">
    <nav style="flex-basis:180px;" class="bg-dark text-white p-3">
        メニュー
    </nav>
    <main class="flex-fill p-4">
        メインコンテンツ
    </main>
</div>

6. 初心者がつまずきやすい注意点

6. 初心者がつまずきやすい注意点

よくある間違いとして、横並びにしたいのにd-flexを付け忘れるケースがあります。これを付けないと、w指定やflex-fillが正しく動きません。また、固定幅を大きくしすぎると、画面が狭いときに内容が見切れてしまうこともあります。

まずは小さめの固定幅から試し、画面サイズを変えながら確認することが大切です。

7. 固定幅と可変幅を使い分ける考え方

7. 固定幅と可変幅を使い分ける考え方

すべてを固定幅にすると、画面が広いときに余白が無駄になります。逆にすべてを可変にすると、文字が広がりすぎて読みにくくなります。重要なのは、役割ごとに幅を考えることです。

操作する部分やナビゲーションは固定幅、読む部分は可変幅、という考え方を覚えると、レイアウト作りが一気に楽になります。

8. Bootstrapサイズユーティリティを使うメリット

8. Bootstrapサイズユーティリティを使うメリット

Bootstrapのサイズや幅高さユーティリティを使う最大のメリットは、難しいCSSを覚えなくても、すぐに見た目を整えられる点です。クラス名も直感的なので、後からコードを見返したときも理解しやすくなります。

固定幅カラムと可変カラムの共存は、多くのWebサイトで使われる基本テクニックです。ここをしっかり理解しておくと、Bootstrapを使ったレイアウト作成に自信が持てるようになります。

まとめ

まとめ

この記事では、Bootstrap5を使って固定幅カラムと可変カラムを同時に使う方法について、初心者にも分かりやすいように丁寧に解説してきました。固定幅カラムとは、画面サイズが変わっても幅が変化しないエリアであり、主にサイドメニューやナビゲーション、アイコン一覧など、常に一定の大きさで表示したい部分に向いています。一方で可変カラムは、残ったスペースに応じて自動的に広がったり縮んだりするエリアで、本文やメインコンテンツなど、表示領域を有効活用したい部分に最適です。

Bootstrapでは、d-flexを使うことで要素を横並びにでき、w指定クラスを使えば割合による幅指定が簡単に行えます。さらにflex-fillを組み合わせることで、固定幅以外の領域を自動的に埋める可変カラムを実現できます。これにより、画面サイズが変わっても自然で読みやすいレスポンシブレイアウトが完成します。

また、flex-basisという考え方を理解することで、より柔軟で安定したレイアウト設計が可能になります。flex-basisは、横並び要素が最初に持つ基準の幅を決める役割を持ち、w指定だけでは表現しにくい細かなレイアウト調整を助けてくれます。例えば、サイドバーを二百ピクセル程度に保ちつつ、画面が広い場合はメインコンテンツを最大限に広げたい、といった実務的な要望にも対応できます。

固定幅と可変幅を適切に使い分けることで、画面が広いパソコンでも、狭いノートパソコンやタブレットでも、情報が整理された見やすい画面を作ることができます。特にBootstrap5は、ユーティリティクラスが充実しているため、難しいCSSを書かなくても、クラスを追加するだけでレイアウトを整えられる点が大きな魅力です。

初心者がつまずきやすいポイントとしては、d-flexの付け忘れや、固定幅を大きくしすぎてしまう点が挙げられます。まずは小さな固定幅から試し、ブラウザの幅を変えながら確認することで、感覚的に理解できるようになります。固定幅は操作性や視認性を意識し、可変幅は読みやすさを意識することが、レイアウト設計の基本です。

ここまで学んだ内容を活かせば、Bootstrap5を使ったWebページ制作において、実務レベルのレイアウトを自信を持って組めるようになります。固定幅カラムと可変カラムの考え方は、多くのWebサイトで共通して使われる重要な基礎知識ですので、ぜひ繰り返しコードを書きながら身につけてください。

まとめで使うサンプルプログラム

<div class="d-flex">
    <aside style="flex-basis:200px;" class="bg-light p-3">
        固定幅サイドバー
    </aside>
    <section class="flex-fill p-4">
        可変幅メインコンテンツ
    </section>
</div>