CSS gridを使ったWebページ制作の考え方
見出し画像

CSS gridを使ったWebページ制作の考え方

先日webページを作成しその実装にCSS gridと静的サイトジェネレータ(Nuxt.js)、ホスティングサービス(Vercel)を使用しました。

そこで今回は主にWebデザイナーの方に向けて、ほんとの基礎からCSSgridの勘所を説明したいと考え記事を書いています。わかりやすさ重視で、図を中心に、コードは基本的に記載しません。

CSSgridを学んでからHTMLとCSSが好きになったので、その魅力を少しでも伝えられたら嬉しいです!​
(バックの実装はまた別記事で!)

💡まとめ
対象者:Webデザイナー, コーダー
トピック:CSS gridのウリと考え方

CSS gridの考え方

💡ざっくりまとめ
メリット
・HTMLの構造とCSSによるレイアウトを完全分離できる
・レスポンシブ対応が比較的ラク
デメリット
・少し慣れが必要
・IE対応のためにはベンダープレフィックスが必要

CSS gridはFlexboxと対をなすCSSの技術です。Flexboxが一次元な並びに対し、CSS gridは二次元的な配置ができることが特徴になっています。

といっても伝わりにくいと思いますので、例を交えながら説明しますね🙌

画像1

上記の図を構築するための手順の違いが抑えられればスッキリと理解できるはずです。

まずFlexboxですが、一次元なので基本的には縦か横に並べることになります。なので
(1) ボックス1,3をwidth,height共に200pxに設定し
(2) div1で囲い縦に並べ
(3)margin-top40pxをボックス3に設定します。
(4)次にボックス2を横に並べ、width440px、height200px、margin-left40px
ですね。

画像2

floatの時代からやりなれた方法だと思います。

次にCSSgridです。すごい特殊でして、まずガイドラインを引きます。指定は「どれくらいの幅で何本引くか、その間のギャップは何pxか」です。今回はギャップ40px、200pxの幅で縦横3本ずつ(2本目はギャップで広がった1本と数える)ですね。
(実際の指定はほんの少し違うのですが、今回は説明性を重視します)

画像3

次に要素を配置していきます。
ボックス1は1~2行,1~2列
ボックス2は1~3行,2~3列
ボックス3は2~3行,1~2列
と指定します。

画像4

高さや幅はガイドラインですでに決まっていますので、これで終了です。

すっきりしませんか…!!?✨
できるだけ淡々と書いていこうと思っていたのですが、やっぱり今見てもこのやり方好きなんですよね…初めて使った時感動しました。

このように、HTMLの要素にレイアウトの数値を持たせず、すべてをCSSでコントロールできるのがCSSgridの良いところです。

これはレスポンシブ対応にも大きく貢献します。スマートフォンでの並びを考えましょう。
レイアウトを変更し縦並びにしたいところですが、Flexboxの場合順番はHTMLまたはdivに左右されますので以下のような並びになります。ボックス2のmargin-topも追加されていますね。

画像5

対してCSS gridは要素の場所を指定できます。なので想定通りの並び順が実現可能です。

画像6

またレスポンシブ関連でいうと、先程の200pxの幅なのですがこれを比率で指定することができます。1:1:2といった指定です。
なのでブラウザの幅が変わっても基本的なレイアウトが崩れることはありません。これもCSSgridの大きなメリットの一つです。

画像14

このように、HTMLとCSSを完全分離できた上でレスポンシブ対応がとても楽になります。

それでは、最後に僕自身どのようにCSSgridを使用してサイトを作成したのか、ダイジェストでお見せします。
初めにデザインカンプを用意し、セクションごとに区切っていきます。1つ目のgridです。

画像8

次にそれぞれの要素の配置ですが、この際僕はXDのグリッドレイアウトを用いてデザインを作成していました。

画像9

したがってXDの設定のまま12の列,28pxの列ギャップでグリッドのガイドを作成しています。
メインビジュアルはグリッドからはずれたデザインを行ったため12列には設定していません。

画像10

今回メンテナンス性を考えそれぞれのセクションに新たなgridを用意しています。CSSgridもFlexboxと同じように入れ子構造にでき、よく使われる手法です。

最後にそれぞれのセクションで行を追加しガイドは完成です。「お店紹介」のセクションを例にとって説明します。
写真や文章の切れ目にガイドを引き…

画像11

これであとは要素を配置するのみです。

画像12

先程と同じように写真やテキストに対しどの行、どの列なのかを指定し当てはめていきます。
この際CSSgridは要素について行列方向の揃えの設定ができるため、タイトルは「左下揃え」、本文は「左上揃え」にしました。

おつかれさまでした!
以上の作業をセクション分行えばCSSgridでのレイアウト作業は終了です!🙌
最後に流れを振り返ってみましょう。

画像13

CSSgridの魅力が伝わりましたでしょうか…!?✨

これまではHTMLの要素にmarginを設定していたためそれぞれの要素が相互関係を持ってしまい、複雑なレイアウト作業で苦労する場面が多くありました。

対してCSSgridはほぼ完全に情報構造(セマンティック)はHTML,レイアウトはCSSと分けられます

これは僕たちwebデザイナーにとってとても嬉しいことです。これなら、これまではあり得なかったレイアウトも直感的かつ保守性高く実装できます。

例えば今回、先程の「お店紹介」セクションについて可読性を求めタイトルや写真、文章の位置をモバイルとデスクトップで変更しました。変更はgridの行と列の指定だけです。

すまほとcp

以上でCSSgridの説明は終了です。
他にもたくさんのメリットがあるのですが、これより先は実装の細かい話になってしまうため割愛しますね。

しいてデメリットをあげるとすれば慣れが必要なことでしょうか。しかしガイドに沿った配置はデザイナーにとってとっつきやすく、かえって親しみやすいかもしれません。
また、アイツ(IE11)の対応なのですがベンダープリフィックスでなんとかできます🏋️‍♀️

最後に参考文献を紹介して記事を閉じます。興味を持たれた方はぜひ下記文献にあたってみてください!

エビスコム様の書籍も一押しです。一通り取り組むとCSSgridの考え方と実装方法が体得できます。


それでは!みなさんのデザイン&実装作業がはかどりますように!


関連記事

webデザイン編


この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
両想いですね
日々の記録をつけています。 トマトの入った料理が好きです🍅