---

---

第7回：さらに自由なレイアウト！CSSグリッドレイアウトとフレックスレイアウト

前回は、CSSの基本的なレイアウトテクニックについて解説しました。

今回は、より自由なレイアウトを実現できる、CSSグリッドレイアウトとフレックスレイアウトについて解説します。

CSSグリッドレイアウト

CSSグリッドレイアウトは、要素を格子状に並べるレイアウトです。従来のテーブルレイアウトよりも柔軟性が高く、複雑なレイアウトにも対応できます。

基本的な書き方

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px;
}

.grid-item {
  background-color: #ccc;
  padding: 10px;
}

このコードは、以下のようになります。

• .grid-container要素を、自動的に列数を調整するグリッドレイアウトに設定します。
• 各列の最小幅を200px、最大幅を画面幅いっぱいに設定します。
• グリッドアイテム間の余白を10pxに設定します。
• .grid-item要素に背景色と余白を設定します。

応用例

• ヘッダー、コンテンツ、フッターを横並びに並べる
• 商品を一覧で表示する
• ギャラリーを作る

CSSフレックスレイアウト

CSSフレックスレイアウトは、要素を柔軟に配置するレイアウトです。要素のサイズや順番を自由に変更できるため、レスポンシブデザインにも適しています。

基本的な書き方

.flex-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.flex-item {
  flex: 1;
  background-color: #ccc;
  padding: 10px;
  margin: 10px;
}

このコードは、以下のようになります。

• .flex-container要素を、横方向に並ぶフレックスコンテナに設定します。
• フレックスアイテムを中央揃えに設定します。
• フレックスアイテムの間を空けるように設定します。
• .flex-item要素を、利用可能なスペースを等しく割り当てるように設定します。
• .flex-item要素に背景色、余白、マージンを設定します。

応用例

• ナビゲーションメニューを作る
• カードレイアウトを作る
• サイドバーとメインコンテンツを並べる

まとめ

今回は、CSSグリッドレイアウトとフレックスレイアウトについて解説しました。

これらのレイアウトテクニックをマスターすれば、より自由なデザインのホームページを作ることができます。

次回からは、レスポンシブデザインや、さらに高度なデザインテクニックについて解説していきますので、ぜひご期待ください！