CSS Gridでメインコンテンツエリアを作成する

programming
DMM WEBCAMP

こんにちは、フローです。

前回はCSS GridとFlexboxを用いてヘッダーを作成しましたね。

今回はその続きとして、

メインコンテンツエリア（アイテム1から4）の作成を進めていきます。

ここでも初心者の方でも理解できるように、細かく丁寧に説明していきます。

HTMLの準備

メインコンテンツエリアのHTMLは以下のようになります。

<div class="container">
  <div class="item1">アイテム1</div>
  <div class="item2">アイテム2</div>
  <div class="item3">アイテム3</div>
  <div class="item4">アイテム4</div>
</div>

ここでは、アイテム1から4までの各エリアを定義しています。

CSS Gridの適用

次に、CSS Gridを用いてメインコンテンツエリアをデザインします。

ここでは、.containerにdisplay: grid;

を設定し、アイテム1から4までを自由に配置します。

.container {
  display: grid;
  grid-template-areas:
    "item1 item2"
    "item1 item3"
    "item4 item4";
  grid-gap: 20px;
  padding: 20px;
  background-color: #FFF6DA;
}

.item1 { 
  grid-area: item1; 
  background-color: #FFBAA2; 
}
.item2 { 
  grid-area: item2; 
  background-color: #FFABAB; 
}
.item3 { 
  grid-area: item3; 
  background-color: #FFC3A0; 
}
.item4 { 
  grid-area: item4; 
  background-color: #D4A5A5; 
}

ここでは、

grid-template-areasで各アイテムの位置を指定しています。

grid-areaで各アイテムがどのエリアに対応するかを指定します。

各アイテムのスタイリング

次に、各アイテムに対してスタイリングを行います。

.item1, .item2, .item3, .item4 {
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 2em;
  padding: 20px;
}

このスタイルにより、

各アイテム内のテキストが中央に位置づけされ、

フォントサイズやパディングも設定されます。

レスポンシブデザインの考慮

最後に、メディアクエリを使用してレスポンシブなデザインを実現します。

スクリーンの幅が600px以下になった場合、各アイテムを縦に並べるように変更します。

@media (max-width: 600px) {
  .container {
    grid-template-areas:
      "item1"
      "item2"
      "item3"
      "item4";
  }
}

これで、

スマートフォンなどの小さなデバイスでも、各アイテムが適切に表示されるようになります。

まとめ

以上でメインコンテンツエリアのデザインは完成です。

今回はCSS Gridを使って各アイテムの位置を自由に配置し、

各アイテムをスタイリングしました。

さらに、メディアクエリを使用してレスポンシブなデザインを実現しました。

CSS Gridは、その自由度と強力な機能により、

ウェブページのレイアウト作成を劇的にシンプルにすることができます。

この記事を通じて、

初心者の方でもCSS Gridを使ってメインコンテンツエリアをデザインする基本的なステップを理解できたことを願っています。

次回は、

このメインコンテンツエリアと同じテクニックを利用して、サイドバーのレイアウトを作成する方法を紹介します。

お楽しみに！

レッツチャレンジ！