CSS GridとFlexboxを使ったレイアウトテクニック

menu

2023年4月10日

近年、ウェブデザインの分野ではCSS GridとFlexboxが注目されています。これらの技術を利用することで、ウェブページのレイアウト作成が簡単かつ柔軟になります。今回は、CSS GridとFlexboxを使ったレイアウトテクニックについて詳しく解説します。

CSS Gridとは CSS Gridは、2次元のグリッドシステムを提供するCSSの仕様です。これにより、行と列の構造を持ったレイアウトを簡単に実現できます。また、グリッドアイテムのサイズや位置を自由に変更できるため、デザインの自由度が高まります。
Flexboxとは Flexboxは、1次元のレイアウトシステムを提供するCSSの仕様です。これにより、コンテナ内のアイテムのサイズや位置を柔軟に調整できます。特に、横方向または縦方向の1軸に沿ったレイアウトを効率的に実現できるのが特徴です。
CSS GridとFlexboxの基本的な使い方 CSS Gridを利用するには、まず親要素に display: grid; を指定します。その後、grid-template-columns および grid-template-rows プロパティを使って、グリッドの構造を定義します。

例：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
}

Flexboxを利用するには、親要素に display: flex; を指定します。その後、flex-direction プロパティを使って、アイテムの並び方向を決めます。

.container {
  display: flex;
  flex-direction: row;
}

CSS GridとFlexboxの組み合わせ CSS GridとFlexboxは、それぞれ独立して使うこともできますが、組み合わせることでさらに効果的なレイアウトが実現できます。例えば、以下のようなケースで役立ちます。

グリッドの中にフレックスアイテムを配置する
フレックスコンテナ内にグリッドアイテムを配置する

レスポンシブデザインへの応用 CSS GridとFlexboxは、レスポンシブデザインにも適しています。特に、grid-template-columns や grid-template-rows の単位

に fr（fraction）を使用することで、自動的に要素のサイズが調整されるため、画面サイズに応じた柔軟なレイアウトが可能です。また、メディアクエリを利用して、ブレークポイントごとにグリッドやフレックスアイテムのサイズや配置を変更することもできます。

例：

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

@media (max-width: 600px) {
  .container {
    grid-template-columns: 1fr;
  }
}

実践的なテクニック以下に、CSS GridとFlexboxを使った実践的なレイアウトテクニックをいくつか紹介します。

(1) マンガのページレイアウト CSS Gridを使って、マンガのページのような独特のレイアウトを再現できます。以下のように、親要素に grid-template-areas を指定し、子要素に対応するエリア名を設定することで実現できます。

例：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "header header header"
    "main main sidebar"
    "footer footer footer";
}

.header {
  grid-area: header;
}
.main {
  grid-area: main;
}
.sidebar {
  grid-area: sidebar;
}
.footer {
  grid-area: footer;
}

(2) カード型レイアウト Flexboxを使って、カード型のレイアウトを簡単に実現できます。以下のように、親要素に display: flex を指定し、子要素に flex: 1 を設定することで、均等に幅を割り当てることができます。

例：

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.card {
  flex: 1;
  min-width: 200px;
  max-width: 300px;
}

まとめ CSS GridとFlexboxを利用することで、様々なウェブページのレイアウトを効率的に実現できます。これらの技術を組み合わせることで、より複雑なデザインやレスポンシブデザインにも対応できるため、ウェブデザイナーや開発者にとって重要なスキルとなっています。ぜひ、この記事で紹介したテクニックを試して、ウェブページのデザインを向上させてみてください。

注：こちらのブログに記載した内容はあくまでも、当社にて世の中にある情報をベースに調査し掲載しているものであり、実効性を検証しているものではありませんので、各自ご利用の際には、ご自身で検証をしてからご利用ください。当社では不具合等の責任は負いかねますのでご了承ください。