今回は、Bootstrapのグリッドシステムを用いて写真とテキストを横に並べるレイアウトについて、新人エンジニア向けにポイントを絞って解説していきます。
このレイアウトで実現していること
- 横並びのレイアウト：写真とテキストを横に並べる
- レスポンシブ対応：画面サイズに応じて縦並びに自動で切り替わる
- クラスで幅指定：
.col-md-4と.col-md-8で画面幅に応じた比率を設定
基本の構造を押さえる
<div class="container mt-4">
<div class="row">
<div class="col-md-4">
<img src="https://picsum.photos/400" class="img-fluid" alt="写真">
</div>
<div class="col-md-8">
<h2>タイトル</h2>
<p>説明文…</p>
</div>
</div>
</div>
各要素の解説
.container：全体の囲い
Bootstrapのコンテナクラスです。左右に余白がつき、中央寄せのレイアウトになります。
.row：行（レイアウトの開始）
.row クラスは、グリッド（格子状）レイアウトを作るための「行」です。この中に「列（.col-*）」を入れて配置を定義します。
.col-md-4 / .col-md-8：カラム幅の指定
md：768px以上の画面サイズ（タブレット以上）を指します。col-md-4：12分割中の4つ分（約33.3%）の幅を占めるcol-md-8：残りの8つ分（約66.6%）
12カラム構造に基づき、合計12になるように設計するのが基本です。
レスポンシブな挙動について
768px以上の画面（例：ノートPC、タブレット）では：
- 写真：左側1/3
- テキスト：右側2/3
768px未満（スマホなど）になると：
.col-md-*は無効になり、自動的に縦並びになります。- 写真 → テキストの順で縦に表示される。
img-fluidで画像をレスポンシブに
<img src="..." class="img-fluid" alt="写真">
img-fluidは 画像を親要素（カラム）にフィットさせるクラス- 横幅いっぱいまで広がるが、比率を保ったままリサイズされる
今後の学習の指針
このレイアウトはグリッドの基本中の基本です。次のステップとして以下を学ぶと良いでしょう。
col-sm-*,col-lg-*など他のブレークポイントの使い分け- グリッド内にネスト（入れ子）を作る
- FlexboxやGridレイアウトとの違いを理解する
- カラムの順番を変える
order-*の活用
ご希望があれば、縦中央揃えや間隔調整なども紹介できます。お気軽にお知らせください。