ITTI STAFF
BLOG

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

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

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

グリッドCSSを簡単に理解して、クライアントワークにも使ったポイントです。

グリッドCSSは、グリッドを指定するプロパティや、値の記述方法がいくつか用意されており、この点がグリッドCSSの複雑さを感じさせます。

デザインと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;
}

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

グリッド線で指定するベーシックな方法です。IE10でもベンダープレフィックスが用意されています。

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

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

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

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

始点と終点でグリッドを指定する方法で、個人的には分かりやすいと思ったプロパティです。
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;
}

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

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

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

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

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;
}

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

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

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

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

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

以上となります。

上記の3つの基本から、徐々に便利な記述方法や、応用を広げてステップアップしていけば良いかと思います。

新しい記事

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

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