CSS gridの学習ロードマップと資料
CSS gridを学ぶ順番は大事
CSS gridは覚えることが多く、単純にプロパティの数だけ比べてもCSS flexより多いです。そのため手当たり次第ではなく、順番を考えて学ぶことが大事です。
なぜCSS gridを覚えられないのか？ - (Zennに書いた別記事より)
ところが、世間一般の記事の多くは「CSS gridは2次元レイアウトに向いている」という説明から始まります。CSSを使いこなすためには、最初に注目すべき点はそこではありません。たしかに2次元レイアウトはCSS gridの重要な特徴ですが、それだけに注目すると「なんだか難しい」「使用場面が少ない」と誤解しやすくなり、結局CSS flexばかり使ってしまいがちです。
CSS gridの利用機会を増やすために、練習期間中は1次元レイアウトでも積極的にgridを試してみてください。普段ならCSS flexを使いたくなる場面でも、敢えてgridを使うこと、そして最初は 「CSS flexとの使い分け」を気にせず、gridを使い続けることがコツです。慣れてくれば、自然とflexとの使い分けが出来るようになります。
というわけで、次は1次元レイアウトの練習について説明したい…ところですが、その前に紹介したい本があります。
ステップ0: すでに非常に良い本が一冊ある
実は本記事を読むまでもなく「読めばCSS gridを使いこなせる！」という、教科書のような書籍があります。
この書籍の大きな特徴として、1989年のWeb誕生から続く伝統的Webレイアウト「フローレイアウト」（別名 ノーマル・フロー）と対比する形で「CSS grid vs. フローレイアウト」という視点を紹介していることが挙げられます。
「CSS grid vs. フローレイアウト」という視点
先述のように、世間一般のCSS gridの解説は2次元レイアウトに終始するものが多いので、それらとは違う「CSS grid vs. フローレイアウト」という視点を得られるだけでも、この書籍を読む価値があります。
他にもおすすめしたいポイントは:
- インターネット各所に散在する膨大な資料、長年の議論、仕様書などを自分で調べる代わりにこの本がまとめてくれています
- 4章のレイアウト・アルゴリズムは他で見たことがないほどの深さで解説され、極めたい人や、どうしても困った時の助けになります
- 5章に記載の順番に沿って手を動かせば、自然とCSS gridを使いこなせる、仕事で使えそうな実践的な課題も豊富です
この書籍の紹介だけで本記事を終えてもいいくらい充実した書籍内容ですが、まだ買うか迷っている人、買ったあとも補足資料を欲しい人もいると思うので、この先も読んでいただけるとありがたいです。
ステップ1: 1次元レイアウトから練習する
CSS gridは2次元レイアウト専用ツールではなく、1次元にも2次元にも使えます。
特に練習期間中は1次元レイアウトでも積極的にCSS gridを使っていきましょう。なぜなら、2次元レイアウトは1次元レイアウトより難しく、また利用頻度は少なくなるので、1次元レイアウトでも積極的にCSS gridを使って練習すると慣れやすくなります。
1次元レイアウトでも積極的にCSS gridを使いましょう
先ほど紹介した書籍「作って学ぶ HTML + CSS グリッドレイアウト」の5章にも以下のような1次元レイアウトの例が載っています。
- スタックレイアウト（縦並び・横並び）
- アイコン付きリンクとボタン
- 検索フォーム
- ヘッダー
もっとたくさんの1次元レイアウト課題が欲しい人はどこを探せばいいでしょう？世間一般のCSS grid解説記事は2次元に集中しているものが多いため、以下のような方針で練習課題を探すと良いと思います。
- 現実のWebサイトを参考に、1次元レイアウト例を探す
- CSS flexを解説した記事の1次元レイアウト例をCSS gridで実装し直す
ただし、2番目についてはflex wrapなど折り返し機能をCSS gridで再現すると難しくなるので、折り返しなしの1次元に集中しましょう。
私からも、いずれ別記事でCSS gridの1次元レイアウト課題を紹介したいと思っています。
ステップ2: 初心者向け解説 （2次元レイアウトを含む）
こちらでは比較的初心者向けと思われる資料を紹介します。ただし、2次元レイアウト中心の内容なので、いきなり全部理解する必要はありません。
最初の動画は「1冊ですべて身につくHTML & CSSとWebデザイン入門講座」などのベストセラー書籍で有名なWebクリエイターボックス、Manaさんの動画です。初めてCSS gridを学ぶ方には必要な前提知識が少なくわかりやすいと思います。
ちょっと情報量が多いですが、QiitaにCSS Grid Layout を極める！（基礎編）という人気の記事があり、こちらをわかりやすいと感じる人も多いかと思います。
英語もいける方には、以下の動画もおすすめします。
- Web Dev Simplified: Learn CSS Grid in 20 Minutes (YouTube)
- Slaying The Dragon: Learn CSS Grid - A 13 Minute Deep Dive (YouTube)
いずれも初心者向けですが、細かいところが気になる人は見失うかもしれません。これらはみな巧みな説明によって、難しい部分や細かい部分をうまく省いているからです。また、初心者向けに取捨選択された情報量では、実際のWebサイトをどう組めばいいのか想像つかない人もいると思います
わからなくなったら一旦放っておいて全く問題ありません。無理に2次元レイアウトに挑戦するより、しばらく1次元レイアウトに戻って練習を重ねてもいいと思います。十分理解した上で後から戻ってくると「そういうことが言いたかったのか！」とわかる瞬間があります。
ステップ3: 中級者向けの練習
初歩的な1次元レイアウトに慣れ、初心者向け動画の内容もなんとなくわかってきたら、現実のWebサイトを参考に少しずつ複雑なレイアウトに挑戦していきましょう。CSS gridに慣れるにはたくさん手を動かすことが重要です。このZennのページ内レイアウトでもいいですし、いろんなWebサイトのうち部分的なレイアウトを自分で再現するのも効果的です。
ここでひとつおすすめしたいのが、1次元レイアウトの入れ子を遠慮せずに使うことです。
1次元レイアウトの入れ子。もっと複雑なレイアウトも実現できます。
CSS gridを練習していると「gridらしく2次元レイアウトで組んだほうがいい？」と迷う場面が出てくると思います。一見、2次元レイアウトが適していそうでも、あるいは複雑そうなレイアウトでも、「1次元レイアウトの入れ子」が適している場面がたくさんあります。
「2次元レイアウトか？」「1次元レイアウトの入れ子か？」迷ったときに一番実力が身につくのは、両方試して比較する練習です。ただし、時間がかかって毎回できるわけではないので「1次元レイアウトの入れ子は意外と使用頻度が高い」と覚えておくと、迷って手が止まることも少なくなるでしょう。
「1次元レイアウトの入れ子では、CSS flexと同じでは？」と思うかもしれませんが、その通りです。CSS flexで入れ子にしたくなるところを、CSS gridの入れ子で実現するのです。 普段ならCSS flexを使いたくなるところでグッと気持ちを抑え、CSS gridを使っていく練習が必要です。そうしてCSS gridとflexの両方に習熟することで初めて、両者の最適な使い分けが身につきます。
もちろん、2次元レイアウトが適している場面もあります。CSS gridで2次元レイアウトを組むときには、grid-template-areasを検討してみてください。複雑で読み解きづらくなりがちなCSS gridによる2次元レイアウトを、直感的に管理しやすくなります。
練習していると使う機能がだんだん増えてきて、手短にCSSプロパティで出来ることを確認したくなるので、ビジュアル表現 + 一覧で見られる以下のサイトが役に立ちます。
練習に飽きてきたら以下のようなゲームに取り組んでもいいと思います。
ステップ4: 公式の情報
CSS gridを突き詰めるなら、公式の情報をじっくり読み込むタイミングはいずれやって来ます。ここではブラウザーベンダーであるMozillaとChrome、そしてCSSの仕様を管理しているW3Cの情報を「公式」として紹介します。
ただし、公式情報によくある話ですが、情報の正確さや網羅性に重きが置かれるため、必ずしもわかりやすく書かれていない箇所が多くあります。そのため、最初は理解できなくても問題ありません。ある程度理解が進んでから読み直すと、パズルのピースがハマるように理解できる瞬間が来ます。
以下はChromeを中心としたGoogleからの情報です。
またChromeは開発者向けYouTubeチャンネルも持っていて、CSS Grid - Superchargedを含むCSS grid関連の動画も多数アップロードされています。
最後にW3CのCSS仕様を紹介します。
とはいえ、ほとんどのCSS利用者はW3C仕様書まで見る必要はないでしょう。MozillaやChromeの情報を「公式」と考えれば十分です。ブラウザーをつくる人や、何らかの理由で最も正確で詳細な情報が必要な場合はW3Cの仕様を見ることになります。
2024年時点の最新仕様はCSS Grid Level 3
https://www.w3.org/Style/CSS/current-work にあるように、CSS gridは過去にLevel 1と2があり、2024年の最新はCSS Grid Level 3です。
Level 1, 2, 3と見慣れないバージョン管理に感じる人も多いと思いますが、以下にあるようにCSSは「モジュール」と呼ばれる単位で、「Level」と呼ばれるバージョンを持ちます。CSS gridはモジュールの1つです。
Mozilla CSS: カスケーディングスタイルシート: 皆さんも CSS1、CSS2.1、また CSS3 についても聞いたことがあるでしょう。CSS3 や CSS4 にはなりません。すべて単なる "CSS" と、バージョン番号を持つ個々の CSS モジュールとなりました。
CSS 2.1 以降、仕様の範囲が大幅に拡大し、CSS モジュールごとに進捗状況が大きく異なるようになったため、モジュールごとに勧告を開発して公開することがより効果的になりました。W3C では、CSS 仕様のバージョン管理の代わりに、最新の CSS 仕様の安定した状態のスナップショットと独立したモジュールの進捗を定期的に取得するようになりました。CSS のモジュールは、CSS Color Module Level 5 のように、バージョン番号またはレベルを持つようになりました。
ステップ5: CSS Working Groupメンバーによる情報
公式情報だけでは少し味気なく感じる場合、仕様策定をした人々から背景情報や設計思想を聞くと納得しやすくなります。
CSS gridに関してはリリース当時から複数年にわたって積極的な啓蒙活動が行われていたので、先ほど紹介したW3CのCSSの仕様を策定しているCSS Working Groupメンバーのうち、Jen Simmons氏とRachel Andrew氏による資料を紹介します。
上記動画は歴史的な背景 - 紙面上のデザインからインスピレーションを得たこと、1990年代Web黎明期のデザイン、スマートフォンの流行、CSS flexの登場といった様々な事柄が1つのストーリーとして語られ「なぜCSS gridが必要だったのか？」を学べる動画になっています。ただし、情報量が非常に多いため一度で理解するのは難しいと思います。
歴史的背景は何度も言葉を変えて語られているので、彼女の別の講演も合わせて見てみるとだんだんわかってくるかもしれません。下記のJen Simmons氏のYouTubeチャンネルからリンクされているプレイリストLayout Design on the Web — conference talks from Jen Simmonsで閲覧できます。
このチャンネルには、他にもCSS Gridに関する9つの最大の間違い、Basics of CSS Grid: The Big Pictureなど興味深い動画があります。
次にRachel Andrew氏の動画を紹介します。
- YouTube “Graduating to Grid” by Rachel Andrew—An Event Apart Denver 2017
動画の所有者により埋め込み表示・再生が許可されていないため、YouTubeサイトへリンクしています
上記動画でもCSS gridの歴史的背景が紹介され、CSS gridに対する理解度が一段階上がる内容になっています。またRachel Andrew氏が啓蒙している「CSS gridでは%サイズ指定によるハックをやめよう！」という点についても説明されています。%でのサイズ指定はCSS gridの登場初期によく見られたようです。
Rachel Andrew氏はデザイン系のWebマガジンであるSmashing Magazineでも多数の記事を投稿していて、CSS gridの関するものも数多く含まれます。
ステップ6: その他エキスパートたちの情報
CSS Working Groupメンバー以外にもCSS gridに精通しているデザイナーやエンジニアは複数いて、今回は紹介するのはこちらの方々です。
鹿野 壮さんはUbie株式会社でフロントエンドなどを担当しつつ、CSSやTypeScriptで数々の講演や記事を発表、またJavaScriptコードレシピ集という書籍の執筆もされています。CSS gridに関する記事はこちら。
Josh Comeau氏はReactフレームワークのGatsby、DigitalOcean、Khan Academyなどでエンジニアとして働き、多数の記事発表やCSS、JavaScript学習コースの運営などをしています。
坂巻 翔大郎さんは2016年以前と、非常に早い時期からCSS gridの啓蒙活動をされていました。大手ソフトウェアダウンロード販売会社、Web制作会社などで、マークアップエンジニア、プログラマ、サービス企画、ディレクターを経験された方です。下記サイトCodeGridは有料サイトになっており、無料記事は一部だけです。
- これからのグリッドレイアウト
- もっと知りたい！ CSS Grid
- CSS Gridサブグリッド入門
- …他の記事もあります
ステップ7: CSS gridとflexの使い分け
最後に紹介するのはCSS gridとflexの使い分けに関する情報です。これを最後に持ってきたのは「CSS gridとflexの両方に精通した後で初めて、最適な使い分け、自分なりの使い分けが身につく」という意図からです。
上記は再び坂巻 翔大郎さんによる動画ですが、25分34秒時点で「まずCSS Gridで出来ないか考えてみる」という発言があります。
SNSで活発にCSSやフロントエンド関連の発信をされているTakさんもブログ記事で似た内容を書いています。
flexとgridどちらかを使用してレイアウトを組むといった際、僕はまずgridで実装できないか？を意識して考えるようにしています。
Discussion