• Skip to primary navigation
  • Skip to content
  • Skip to primary sidebar

Code School

プログラミング初心者向け応援メディア

  • Home
  • Swift
  • Python3
  • Ruby
  • Ruby on Rails
  • CSS
  • Sketch
  • How to Study
  • Column
You are here: Home / Web制作 / CSS / [CSS]Grid Layoutとは?

 

 

[CSS]Grid Layoutとは?

2018年4月28日 By Code School編集部

今まで要素の配置はfloatやflexboxを使ってきたが、新しくGrid Layoutという方法を使えばより分かりやすくレイアウトを決めることができます。

今回はこのGrid Layoutの使い方などを紹介していきます。

Grid Layoutとは?

Grid Layoutは新しくCSSに追加された機能ですが、この機能をフォローするブラウザも出揃ったことからよく使われるにようになりました。

従来の手法に比べて、より分かりやすくコードの可読性を保ったまま書くことができるので、現時点においてはCSSのレイアウトで覚えて損はない機能です。

ただし、すべてのレイアウトでGrid Layoutを採用するわけではなくシーンに応じた使い方をおすすめします。

例えば、ページ全体のレイアウトにはGrid Layoutをおすすめしますが、メニューなどの横並び要素にはflexboxの方が適しています。

このように場合によって使い分けするのをおすすめします。

 

簡単なレイアウトで試してみる

さっそくGrid Layoutの使い方をみていきます。

考え方としては、コンテナで囲んでその中にアイテムを配置する流れになります。

ここでは、よくあるレイアウト例として以下のようなレイアウトで作ってみます。

  1. コンテナで囲む
  2. コンテナ内の大まかなレイアウトを決める
  3. コンテナ内に設置するアイテムの配置を決める

この流れです。さっそくコードで見ていきましょう。

See the Pen VxmRKe by code-school (@code-school) on CodePen.

それでは、コードを一つずつ説明していきます。

CSS
1
2
3
4
5
.container {
    display: grid;
    grid-template-rows: 100px 400px 50px;
    grid-template-columns: 900px 1fr;
}

containerクラスでは全体の大枠を決めています。

先ほども触れましたが、グリッドレイアウトはコンテナという大枠の中にアイテムが配置されます。

ここでは、containerクラスと指定して、display:grid;と記述しています。

これがグリッドレイアウトの基本の記述になります。

そして、grid-template-rows:で縦のレイアウトの大まかな枠組みを設定しています。

ここでは、100px 400px 50pxとしています。

これは、上から100px→400px→50pxということです。

つまり、ヘッダーの高さは100px。

サイドバーを含むメインコンテンツの高さは400px。

フッターの高さは50pxというように指定しています。

 

grid-template-columnsは横のレイアウトの大まかな枠組みになります。

今回、ヘッダーとフッターの横幅は100%なので、特に指定はないですね。

問題はメインとサイドバー部分です。

grid-template-columns: 900px 1fr;

このように記述することで、左からメイン部分を900px 残りをサイドバー部分としています。1fr とは、残り部分と覚えておきましょう。

 

コンテナ部分の記述をまとめると、

  • display: gridでグリッドレイアウトを適用
  • grid-template-rows(columns)で縦横の大枠を決める
  • rowsは縦、columnsは横!

 

アイテムの配置を決める

グリッドレイアウトを使う手順のおさらいをします。

  1. コンテナで囲む
  2. コンテナ内の大まかなレイアウトを決める
  3. コンテナ内に設置するアイテムの配置を決める

ここまで1と2は完了したので、最後の3であるアイテムの配置を決める作業を残すのみとなります。

具体的には、アイテム(ここでいうヘッダーやメイン、サイド、フッター)のクラス内にどこに配置するのかという点を記述していきます。

もう一度、全体のコードとプレビューを掲載します。ここからはヘッダーからフッターのクラスまでを一つずつ解説していきます。

See the Pen VxmRKe by code-school (@code-school) on CodePen.

CSS
1
2
3
4
5
.header {
    background-color: #C5DAC6;
    grid-row: 1;
    grid-column: 1 / 3;
}

(background-colorの説明は割愛します )

grid-row: 1では、上から1番目の場所を指定しています。

ヘッダーの横幅は横に100%ですので、grid-column: 1 / 3 と指定しています。

grid-row: 1 は上から1番目というのは分かりやすい思いますが、grid-column: 1 / 3がわかりづらいですね。

グリッドレイアウトが適用された時点で、画面には見えない番号が割り振られることになります。

ちょうどこのレイアウトでは、カラム(横)に線が3つ入っていると考えます。

ヘッダーは1→2→3の領域にまたがっているので、1 / 3 の記述になります。

では、メインはどうでしょうか?メインは1→2の領域にまたがっているので 1 / 2の記述になります。(1と記述してもOKです)

CSS
1
2
3
4
5
.main {
    background-color: #E89F9D;
    grid-row: 2;
    grid-column: 1 ;
}

サイドの場合は、2→3の領域にまたがっているので 2 / 3の記述になります。

CSS
1
2
3
4
5
.side {
    background-color: #8AD6CB;
    grid-row: 2;
    grid-column: 2 / 3;
}

メインとサイドは縦から2番目になるので、grid-row: 2の記述になります。

 

最後はフッターとなります。これはヘッダーとほぼ同じなので簡単ですね。

CSS
1
2
3
4
5
.footer {
    background-color: #A299F5;
    grid-row: 3;
    grid-column: 1 / 3;
}

フッターは縦から3番目なので、grid-row: 3。

ヘッダーと同じく1→3にまたがっているのでgrid-column: 1 / 3の記述となります。

 

Grid間の余白はどうするか?

Grid間の余白も設定することができます。

  • grid-column-gap
  • grid-row-gap

この二つのプロパディで設定することができます。便利ですねぇ。

ちなみに、grid-gapはこの二つのショートハンドとなり、grid-gap: 5px 10px;と記述することで、

CSS
1
2
grid-column-gap: 5px;
grid-row-gap: 10px;

と同義になります。

 

flexboxとGrid Layoutでだいたいのレイアウトはカバーできる

Grid Layoutを使ってみて感じるのはレイアウトのしやすさというかコードがスッキリする点でしょうか。

しかし、全てのレイアウトをGrid Layoutで賄うというのではなく、flexboxと組み合わせるとレイアウトもさらにしやすくなります。

Grid Layoutが二次元のレイアウトであれば、flexboxは一次元のレイアウトという感じでしょうか。

下記の例では、全体的なレイアウトはGrid Layoutを採用していますが横並びのナビゲーションメニューやメインコンテンツではflexboxを採用してレイアウトしています。

See the Pen aGpyeL by code-school (@code-school) on CodePen.








 

関連記事



Filed Under: CSS

Primary Sidebar




Categories

  • iOSアプリ開発 (48)
    • Swift (30)
    • Xcode (13)
  • Python3 (28)
    • Django (9)
  • Ruby (17)
    • Ruby on Rails (6)
  • Scratch (1)
  • Unity (2)
  • Web制作 (42)
    • CSS (34)
    • HTML (4)
  • コラム (11)
  • プログラミングスクール (93)
    • 子供向けプログラミングスクール (58)
    • 社会人向けプログラミングスクール (41)
  • プログラミング学習方法 (8)
  • 開発ツール (30)
    • Atom (1)
    • Brackets (5)
    • Github (2)
    • Mac (1)
    • Pycharm (3)
    • Sketch (16)
[Python]Scrapyを動かした時にSyntaxError: invalid syntaxとエラーが出る場合の対処法

[Python]Scrapyを動かした時にSyntaxError: invalid syntaxとエラーが出る場合の対処法

[Django]TextField内に記載した改行を反映させたい

[Django]TextField内に記載した改行を反映させたい

[Django]変数内の文字列をトランケートする

[Django]変数内の文字列をトランケートする

[Django]変数内に格納したhtmlコードを反映させたい

[Django]変数内に格納したhtmlコードを反映させたい

[Django]画面上で変数の文字列の長さを返すフィルター

[Django]画面上で変数の文字列の長さを返すフィルター

[Django]モデルを追加した時にmigrateエラーが出ないための方法

[Django]モデルを追加した時にmigrateエラーが出ないための方法

[Django] def __str__(self)とは?

[Django] def __str__(self)とは?

[Python]DjangoでMySQLを使う方法、ハマったことまとめ

[Python]DjangoでMySQLを使う方法、ハマったことまとめ

[Python]DjangoのチュートリアルDjangoGirlsをやってみた感想

[Python]DjangoのチュートリアルDjangoGirlsをやってみた感想

Swiftの命名規則まとめ

Swiftの命名規則まとめ

PycharmでDjangoをインストールしようとするとAttributeErrorが出る時の対処法

PycharmでDjangoをインストールしようとするとAttributeErrorが出る時の対処法

Pythonの命名規則まとめ

Pythonの命名規則まとめ

[Python]Djangoで構築されたWebサービス18選

[Python]Djangoで構築されたWebサービス18選

iPhoneアプリを公開する手順まとめ!デベロッパー登録からアプリ公開までの流れ

iPhoneアプリを公開する手順まとめ!デベロッパー登録からアプリ公開までの流れ

[iOS]アプリ申請時、バンドルIDにアプリがない時に手動で登録する方法

[iOS]アプリ申請時、バンドルIDにアプリがない時に手動で登録する方法