ITTI STAFF
BLOG

イッティWEBスタッフの制作ブログ

サクッとグリッドCSSを理解して、クライアントワークに使う

こんにちは。イッティのデザイナーのHです。

クライアントワークにも徐々に取り入れているCSSグリッドですが、3つの基本が分かれば簡単に導入できて、レスポンシブなレイアウトでも便利です。

グリッドCSSは、グリッドの分割方法新しい単位frを覚えることで、グリッドCSSを使いこなすことができます。

グリッドの指定方法がいくつかありますが、まずは基本的な指定方法を習得しましょう。

複雑なレイアウトも可能ですが、運用の効率化も考慮してシンプルなグリッドレイアウトにすることも重要になります。

まずはグリッド線の理解

まずはグリッド線の理解から。

Y軸は「row」
X軸は「column」
です。

グリッドを指定するプロパティ

グリッドを指定するプロパティや、値の記述方法はいくつか用意されていますが、まずはサンプルの3つを理解すればOKです。

サンプルの前提としてHTMLとCSSは下記になります。

HTML
<div class="oya">
   <div class="blue-box">青いボックス</div>
   <div class="yellow-box">黄色いボックス</div>
   <div class="green-box">緑のボックス</div>
   <div class="pink-box">ピンクのボックス</div>
</div>
CSS
.oya {
     display:grid;
     grid-template-rows:100px 100px 100px;
     grid-template-columns:200px 100px;
}

1.グリッド線で指定する方法

グリッド線で指定するベーシックな方法です。まずはこの方法を覚えて使いこなしましょう。
IE10でもベンダープレフィックスが用意されています。

CSS
.blue-box{
     grid-row:1 / 2;
     grid-column:1 / 2;
}

下記のように記述することもできますが、上記の方が理解しやすいかと思います。

CSS
.blue-box {
grid-row:1;
grid-column:1;
}

2.グリッドエリアで指定する

始点と終点でグリッドを指定する方法で、個人的には分かりやすいと思ったプロパティです。
IE11から対応しています。

CSSはショートハンドだと下記になります。

CSS
.blue-box {
    grid-area:1 / 1 / 2 / 2
}

※値とスラッシュは半角スペースが必要です。

ショートハンドを使わない場合は下記になります。

CSS
.blue-box {
     grid-row-start:1;
     grid-column-start:1;
     grid-row-end:2;
     grid-column-end:2;
}

3.グリッドエリアに名前を付けて指定する

グリッドエリアに名前をつけて、グリッドをレイアウトする方法です。

あらかじめ親要素のグリッドに名前を付けて、子要素にグリッド名を記述してはめ込んでいく感じです。

グリッドエリア名称のルール統一や、エリア名を考えることに困ることもあると思いますので「ヘッダー」「フッター」「サイドバー」などに使うのが良さそうです。

CSS
.oya {
display:gird;
grid-template-rows: repeat(3,100px);
grid-template-column:200px 100px;
grid-template-areas:
"key-visual sidebar"
"news       sidebar"
"footer footer";
}
.blue-box {
grid-area: key-visual;
}
.yellow-box {
grid-area:news;
}
.pink-box {
grid-area:sidebar;
}
.green-box {
grid-area:footer;
}

「repeat」とは?

ここで「repeat(3,100px);」が出てきました。
repeatとは繰り返しのことで、サイズ100pxのグリッドボックスを3つ繰り返すことになります。

repeatを使わない場合は
「grid-template-rows:100px 100px 100px;」となります。

マイナスの値で指定する方法

通常は、左上からグリッド線を数えてプロパティの値に指定しますが、右下からグリッド線を数えてプロパティの値に指定することもできます。

行(grid-row)が増えても、常に下に配置される「フッター」に使うと便利です。

値には「-(マイナス)」を付けて記述します。

CSS
.green-box {
     grid-row: -1 / -2;
     grid-column: -3 / -1;
}

マイナス指定はあまり使いませんが、知識として知っているとイザという時に使えます。

frとは

frとはfraction(分数)のことで、グリッドように用意された新しい単位になります。

例えば下図のようにすると、自動でサイズ調整してくれます。

.oya {
    display:gird;
    grid-template-rows: 100px 100px 1fr;
}

frを使った比率割りもできます。

.oya {
    display:gird;
    grid-template-rows: 1fr 1fr 2fr;
}

repeatを使ったサイズの均等割りもできます。

.oya {
    display:gird;
    grid-template-rows: repeat(8,1fr);
}

重要なのは「frは親のサイズに合わせて、均等、比率でサイズ調整する」ということです。autoとは違います。

frとautoの違い

autoはグリッドのコンテンツに合わせてサイズ調整されます。

例えばautoを使うと、下図のようになります。

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

サイズを指定とautoを組み合わせると下図のようになります。
frと同じことになります。

.oya {
display:gird;
grid-template-rows: repeat(2,100px) auto;
}

autoとautoを組み合わせると下図のようになります。
これもfrと同じことになります。

.oya {
display:gird;
grid-template-rows: repeat(2,auto) ;
}

グリッドの分割方法と、新しい単位frを使えることで、グリッドの基礎は身につきましたね。もうグリッドを使ったレイアウトでコーディングできる知識はついていますよ。

CSS グリッドのジェネレーター

面倒なCSSグリッドを簡単に生成してくれるジェネレーターです。

かなり便利です。

CSS グリッドのジェネレーター

CSS グリッドのチートシート

CSS グリッドをより理解するためのお薦めのチートシートをご紹介します。
下記の2つがお薦めです。

GRID

グリッドを作りながら見るとより理解できます。お薦めです。

CSS Grid Cheat Sheet

こちらもチートシートとなっていますが、プロパティを記入しながらグリッドを確認できます。
コレでグリッドを勉強するのではなく、一度グリッドを作った後に使ってみるとより理解することができます。

Grid テンプレート

Gridレイアウトのさまざまなテンプレートが用意されています。こちらもお薦めです。

 

基礎知識の参考になるグリッドレイアウト5選

CodepenからCSS Gridの基礎学習に最適な5つのレイアウトを紹介します。

お手本のようなグリッドレイアウトです。

こちらもオーソドックスなグリッドレイアウトです。「Naaah」の7番目のグリッド、8番目のグリッドにちょっとしたTipsが施されています。

斜めのグリッドはClip-pathによるもので、複雑なグリッドに見えますがオーソドックスなグリッドレイアウトです。

グリッドレイアウトを利用したメニューです。
オーソドックスなレイアウトですが、アニメーションでスタイリッシュ感を演出しています。

疑似要素(before、after)を使ってラインを描き、複雑なグリッドレイアウトに見えますがオーソドックスなレイアウトです。

ウェブサイトのレイアウト表現が広がりますね。

新しい記事

新宿のWEB制作会社イッティ

新宿のWEB制作会社イッティ