プログラミング・ITCSS

Blog Article

CSSのGridを使いこなして柔軟にレイアウトを組む

こんにちは、Mochiです。

Webデザインにおいて、柔軟にレイアウトを組めることは重要です。CSS Gridはそのための非常に強力なツールです。

CSS Gridってどうやって使うの?Gridを使って横並びにするのって、どうやるんだっけ?🤔

そのような方に向けて、CSS Gridの仕組みとその使い方をわかりやすく解説します。

この記事を読むことで、みなさんはCSS Gridの仕組みを深く理解し、使いこなしてレイアウトを組めるようになります。
CSS Gridの仕組みを深く理解し、使いこなしてレイアウトを組める
では早速、CSS Gridとは何なのか学んでいきましょう。

🤔CSS Gridとは

CSS Gridは、柔軟なレイアウトを構築するために、HTML要素を縦と横のグリッド(マス目状)に配置するプロパティのセットです。Flexboxは直線的な1次元のレイアウトを得意としますが、CSS Gridは平面的な2次元のレイアウトを得意とします。このため、複雑なレイアウトを効率的に構築するのに適しています。

1次元のレイアウトを組みたい方は記事「CSSのFlexboxの仕組みを深く理解して使いこなそう!」を読むのがおすすめです。

CSS Gridの仕組み

CSS Gridの仕組みである、主な構成要素は次のようになります。
CSS Gridの仕組みである、主な構成要素

  • Gridコンテナ: 大枠となる箱のようなものです。このコンテナの中でレイアウトを組んでいきます。
  • Gridアイテム: コンテナ内の小要素のことで、実際に並べていくアイテムたちです。
  • 行の軸: 行の方向を表します。
  • 列の軸: 列の方向を表します。

より詳細な構成要素は次のようになります。
より詳細なGridの構成要素

  • Gridライン: 行や列を分ける線です。行と列に別々で存在し、1から順に番号が付けられています。逆方向からはマイナスの番号が付けられています。
  • Gridセル: 行と列で分けられた、マス目の部分を表します。レイアウトの最小単位です。
  • ガター: Gridアイテムの間にある余白のことです。

Gridトラック

  • Gridトラック: 行や列のグリッドアイテムをまとめたものです。単純に行や列を表します。

Gridの仕組みを理解したところで、次は実際に使っていきましょう。

🎬CSS Gridを使い始める

display: grid

CSS Gridを使い始めるためにdisplay: gridを用います。この指定により、Gridコンテナが作られてGridによるレイアウトを組み始めることができます。

例えば次のように使います。

.grid-container {
  display: grid;
}

ではGridコンテナの使い方から学んでいきましょう。

📦Gridコンテナの使い方

Gridコンテナを操作してレイアウトを組むために重要なプロパティを解説します。

grid-template-columns: 列のレイアウト

grid-template-columns プロパティは、列のレイアウトを指定できます
grid-template-columns プロパティ
指定した数だけ列ができます。

列の長さに指定できる値は次のようなものです。

  • 200px: ピクセル単位で設定
  • 20%: 親要素(Gridコンテナ)に対する比率で設定
  • 1fr: 大きさが指定されていない領域の中で、スペースを設定
  • auto: Gridアイテムを入れるのに必要なだけの大きさを設定

特徴的なのは1frです。これは1fractionの略で、比率を表します。よって、1frに対して2frは2倍の大きさになります。
1frに対して2frは2倍の大きさ
frを指定するメリットは、画面の幅に合わせて自動的に伸び縮みしてくれることです。
画面の幅に合わせて自動的に伸び縮みしてくれる
例えば次のように使います。

.grid-container {
  grid-template-columns: 40px 1fr 2fr;
}

grid-template-rows: 列のレイアウト

grid-template-rows プロパティは、行のレイアウトを指定できます
grid-template-rows プロパティは、行のレイアウトを指定できます
仕組みはgrid-template-columnsと同じで、指定した数だけ行ができます。

行の長さに指定できる値は次のものです。

  • 10px: ピクセル単位で設定
  • 10%: 親要素(Gridコンテナ)に対する比率で設定
  • 1fr: 大きさが指定されていない領域の中で、スペースを設定
  • auto: Gridアイテムを入れるのに必要なだけの大きさを設定

また、同じ値を複数回指定するためには、repeat()を使うと便利です。repeat()には繰り返す回数と繰り返す値を与えます。

例えば次のように使います。

.grid-container {
  grid-template-rows: repeat(4, 1fr);
}

gap: 余白

gapプロパティは、ガター(行と列の間)の余白の大きさを指定できます。
gapプロパティは、ガター(行と列の間)の余白の大きさを指定できます
column-gap を使うことで列の間の余白だけ指定できます。また、row-gap を使うことで行の間の余白だけ指定できます。
column-gapとrow-gapプロパティ
また先頭に”grid”をつけた、grid-gap 、grid-row-gapgrid-column-gap プロパティでも同じことができます。

例えば次のように使います。

.grid-container {
  gap: 30px;
}

justify-items: 水平方向の配置

justify-items プロパティは、Gridアイテムの水平方向の配置を決めます。
justify-items プロパティは、Gridアイテムの水平方向の配置を決めます。
指定できる値は次のものです。

  • stretch: Gridセルいっぱいに伸びる(デフォルト)
  • start: 開始位置に配置
  • center: 中央に配置
  • end: 終了位置に配置

例えば次のように使います。

.grid-container {
  justify-items: center;
}

align-items: 垂直方向の配置

align-items プロパティは、Gridアイテムの垂直方向の配置を決めます。
align-items プロパティは、Gridアイテムの垂直方向の配置を決めます
指定できる値は次のものです。

  • stretch: Gridセルいっぱいに伸びる(デフォルト)
  • start: 開始位置に配置
  • center: 中央に配置
  • end: 終了位置に配置
  • baseline: ベースラインに配置

例えば次のように使います。

.grid-container {
  align-items: center;
}

justify-content: グリッドの水平方向の配置

justify-content プロパティは、Gridアイテム全体を含めたグリッドの水平方向の配置を決めます。これはGridコンテナよりGridアイテム全体が小さい場合に利用できます。
justify-content プロパティは、Gridアイテム全体を含めたグリッドの水平方向の配置を決めます
指定できる値は次のものです。

  • stretch: Gridコンテナいっぱいに伸びる
  • start: 開始位置に配置
  • center: 中央に配置
  • end: 終了位置に配置
  • space-between: 両端に配置し、他のGridトラックを均等に配置
  • space-around: 均等に配置し、両端には半分の大きさの余白を入れる
  • space-evenly: 均等に配置

例えば次のように使います。

.grid-container {
  justify-content: center;
}

align-content: グリッドの垂直方向の配置

align-content プロパティは、Gridアイテム全体を含めたグリッドの垂直方向の配置を決めます。こちらもはGridコンテナよりGridアイテム全体が小さい場合に利用できます。
align-content プロパティは、Gridアイテム全体を含めたグリッドの垂直方向の配置を決めます。
指定できる値は次のものです。

  • stretch: Gridコンテナいっぱいに伸びる
  • start: 開始位置に配置
  • center: 中央に配置
  • end: 終了位置に配置
  • space-between: 両端に配置し、他のGridトラックを均等に配置
  • space-around: 均等に配置し、両端には半分の大きさの余白を入れる
  • space-evenly: 均等に配置

例えば次のように使います。

.grid-container {
  align-content: center;
}

Gridコンテナ全体の大きさ

Gridコンテナ全体の大きさはwidhtheightプロパティを指定することで、調整できます。

.grid-container {
  width: 1280px;
	height: 200px;
}

Gridコンテナ全体の大きさはwidhtとheightプロパティを指定することで、調整できます。

💍Gridアイテムの使い方

Gridアイテムを操作してレイアウトを調整するために重要なプロパティを解説します。

grid-column: 列の位置と範囲

grid-column プロパティは、Gridアイテムを置くGridセルの列の位置を指定します。位置を指定するために、Gridラインの番号を使います。
grid-column プロパティは、Gridアイテムを置くGridセルの列の位置を指定します。
指定できる値は次のようなものです。

  • 1: Gridラインの番号
  • -1: 反対から数えたGridラインの番号
  • span 2: セルの個数

与え方には次の種類があります。

  • 1: 指定したGridラインの番号からその次のライン番号(2)まで
  • 1 / 3: 始まりのGridラインの番号から、終わりの番号まで
  • 1 / span2: 始まりのGridラインの番号から、spanで指定したセルの個数まで

例えば次のように使います。

.grid-item {
    grid-column: 2 / -1; /* -1は最後を表す */
}

grid-row: 行の位置と範囲

grid-row プロパティは、Gridアイテムを置くGridセルの行の位置を指定します。同じく位置を指定するために、Gridラインの番号を使います。
grid-row プロパティは、Gridアイテムを置くGridセルの行の位置を指定します。
指定できる値は次のようなものです。

  • 1: Gridラインの番号
  • -1: 反対から数えたGridラインの番号
  • span 2: セルの個数

与え方には次の種類があります。

  • 1: 指定したGridラインの番号からその次のライン番号(2)まで
  • 1 / 3: 始まりのGridラインの番号から、終わりの番号まで
  • 1 / span2: 始まりのGridラインの番号から、spanで指定したセルの個数まで

例えば次のように使います。

.grid-item {
    grid-row: 1 / -1; /* -1は最後を表す */
}

justify-self: 水平方向の配置

justify-self プロパティは、Gridアイテムの水平方向の配置を指定します。Gridコンテナで指定したjustify-itemsの配置を上書きすることができます。
justify-self プロパティは、Gridアイテムの水平方向の配置を指定します。
指定できる値は次のものです。

  • stretch: Gridセルいっぱいに伸びる(デフォルト)
  • start: 開始位置に配置
  • center: 中央に配置
  • end: 終了位置に配置

例えば次のように使います。

.grid-item {
    justify-self: center;
}

align-self: 垂直方向の配置

align-self プロパティは、Gridアイテムの水平方向の配置を指定します。Gridコンテナで指定したalign-itemsの配置を上書きすることができます。
align-self プロパティは、Gridアイテムの水平方向の配置を指定します。
指定できる値は次のものです。

  • stretch: Gridセルいっぱいに伸びる(デフォルト)
  • start: 開始位置に配置
  • center: 中央に配置
  • end: 終了位置に配置
  • baseline: ベースラインに配置

例えば次のように使います。

.grid-item {
    align-self: center;
}

🎉まとめ

今回はCSS Gridの仕組みと使い方を解説しました。

この記事を読んだことで、みなさんはCSS Gridの仕組みを深く理解し、使いこなしてレイアウトを組めるようになりました!素晴らしいスキルアップです👏

CSS Gridを使いこなすことで、要素の正確な配置や柔軟なレスポンシブデザイン、複雑なレイアウトの構築ができます。ぜひ自分のイメージ通りのレイアウトを組んでみましょう。

🤗おすすめ

本で体系的にCSSについて学びたいという方にはこちらの本をおすすめします。HTML・CSSの基礎から実際のWebサイト作成まで書かれており、豊富な図が含まれているため、多くの方が理解しやすい本です。

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

YouTubeのように動画でサクサク学びたいという方には、Udmeyの講座をおすすめします。私もよく使うのですが書籍に比べ実用的な内容を学びやすく、隙間時間に見れるのがいいです。HTMLやCSSなど、ぜひ気になるWeb開発の人気オンラインコースを受講してみてください。

Udemy 人気のオンラインコース ウェブ開発

参考になれば幸いです。 読み返したい方は、ぜひブックマークへの登録がオススメです。
読んでいただきありがとうございました!🙌

このページの内容