CSSレイアウト練習ガイド｜初心者でもわかるFlexbox・Grid入門

CSSレイアウトの基本とは？

CSSレイアウトとは、HTMLで作った要素を画面上でどのように配置・整列するかを決める技術です。基本を押さえることで、レスポンシブ対応や美しいデザインが可能になります。

• 要素の幅・高さを設定する
• 余白（margin）や内側余白（padding）で間隔を調整する
• 配置方法（float・flex・gridなど）を理解する

まずは「ブロック要素」「インライン要素」の違いや、ボックスモデルの理解が重要です。

練習用レイアウト1：基本ブロック配置

最初は簡単な3カラムレイアウトを作ってみます。

<div class="container">
  <div class="box">左</div>
  <div class="box">中央</div>
  <div class="box">右</div>
</div>

.container {
  width: 100%;
}

.box {
  width: 30%;
  display: inline-block;
  background-color: #f0f0f0;
  padding: 20px;
  margin: 1%;
  text-align: center;
}

ポイント：
inline-blockで横並びにしつつ、marginで間隔を調整する方法を練習します。

練習用レイアウト2：Flexboxで中央揃え

Flexboxを使うと、縦横の中央揃えやレスポンシブ対応が簡単になります。

<div class="flex-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

.flex-container {
  display: flex;
  justify-content: center; /* 横中央 */
  align-items: center;    /* 縦中央 */
  height: 200px;
  background-color: #e0e0e0;
}

.item {
  width: 50px;
  height: 50px;
  background-color: #a0a0ff;
  margin: 5px;
  text-align: center;
  line-height: 50px;
}

ポイント：
justify-contentで横方向、align-itemsで縦方向を調整できます。

練習用レイアウト3：Gridで複雑レイアウト

Gridを使えば、より複雑なレイアウトも簡単に構築可能です。

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  background-color: #f0f0f0;
  padding: 10px;
}

.grid-item {
  background-color: #ffa0a0;
  padding: 20px;
  text-align: center;
}

ポイント：
repeat(2, 1fr)で2列に分割、gapで間隔を調整。簡単にレスポンシブレイアウトにも応用可能です。

レスポンシブ対応の練習

画面サイズに応じてレイアウトを変える練習も重要です。

@media screen and (max-width: 768px) {
  .container, .flex-container, .grid-container {
    flex-direction: column; /* 縦並びに変更 */
    grid-template-columns: 1fr; /* 1列に変更 */
  }
}

ポイント：
Media Queryを使って、スマホやタブレット向けにレイアウトを調整します。

練習のまとめと次のステップ

• ブロック要素・inline-blockの基本レイアウトを理解
• Flexboxで簡単に中央揃えや均等配置を練習
• Gridで複雑な2Dレイアウトを構築する方法を体験
• Media Queryでレスポンシブ対応を練習

この練習を繰り返すことで、WordPressテーマ作成やブログカスタマイズでのCSS活用力が飛躍的にアップします。次のステップとして、

• HTML基本タグ解説
• CSS入門ガイド
• FlexboxとGrid解説