なぜCSS gridを覚えられないのか？
CSS gridは聞いたことがあるし、なんとなく触ったこともあるけど、いざ使うとなると 「覚えることが多すぎて面倒」とか「結局CSS flexの方が楽」 と感じる人も多いと思います。だからといってCSS flexばかりでレイアウトを組んでいると、当然ながらCSS gridの習得は進みません。
記事タイトル「なぜCSS gridを覚えられないのか？」の答えは、単純に「CSS gridを使う機会が少なく、練習不足だから」…というのは一面の真実ではありますが、それではあまりに根性論的でアドバイスになりません。
ある程度時間をかけてCSS gridを習得した私の経験から言うと、CSS grid習得の壁はその難易度ではありません。学習を始める前段階として、そもそものモチベーションを持つことに困難があると考えています。
CSS gridを習得するモチベーションが湧かない理由
CSS gridで出来ることは、CSS flexでも出来てしまう。
これがCSS grid習得のモチベーションがわかない最大の理由だと思います。CSS flexでも出来てしまうことが多いので、CSS gridが何の役に立つのかわからないのです。
CSS flexが浸透していった間に、世界中の人々が様々なレイアウトパターンを実現し、それらがテクニックとして広く知れ渡りました。その結果、世間一般によく見られるWebレイアウトの中で「CSS flexでの実現は無理だが、CSS gridでのみ可能」なパターンはほとんどなくなったといえるでしょう。私もしばらく考えてみても思いつきません。
CSS flexのみで実現できてしまうレイアウトの例
では「CSS gridの方が格段に楽」なレイアウトはあるでしょうか？よくCSS flexは１次元レイアウト、CSS gridは２次元レイアウトが得意と言われますが、利用頻度は１次元レイアウトの方がはるかに多いです。複雑なレイアウトも１次元レイアウト同士の入れ子で表現できるものが多いので、最初から２次元で考えざるを得ないレイアウトは少数派です。
さらに次の理由もCSS grid習得のモチベーション維持を困難にしています。
CSS flexよりgridは覚えることが多い
CSS gridを覚えるのが大変と感じるのは、思い込みや気のせいではありません。実際にCSSプロパティの種類だけを見てもCSS gridの方が多く、機能が豊富なことがわかります。そして機能が豊富であれば、当然覚えるべきことは多くなります。
デザイナー、エンジニアなど、みなさんは日々忙しく様々な技術にキャッチアップしていると思います。勉強時間の捻出だけで一苦労なのに、なんの役に立つかわからず、しかも覚えることの多い技術を学ぶモチベーションは持ちづらいものです。
結局「仕事でCSS grid導入が決まった」あるいは「世の中でCSS gridを使うのが当たり前になった」など強い圧力がかからない限り、あえて習得するモチベーションは湧きづらいでしょう。それでは世間一般ではどれほどCSS gridは受け入れられているでしょうか？
CSS gridの浸透度の現状
State of CSSという年に一度のCSSトレンドの調査があり、世界中の数千人を対象にアンケートを集計しています。
2021年時点ではCSS gridはflexに比べるとまだ知名度は劣る一方、2019年、2018年からの変化では急激に「使った」人の割合が増えています。2022年以降のState of CSSではCSS girdとflexに関する調査項目がなくなったので、その後の変化はわかりませんが、おそらくCSS gridとflexの間の「使った」割合の差はさらに縮まったと考えられます。
もちろんState of CSSの調査対象は、CSSの新技術に対する感度の高い人であると考えられ、世間一般のWebデザインではまだまだCSS flexが優勢であると考えられます。ただ、数年のうちにCSS gridはCSS flex並に「使ったことがある」技術になることは推測できます。
昔のCSS flexもおそらく似た状況だった？
2013年に書かれた以下の記事を見ると、CSS flexも最初からみんなが使い始めたのではなく、当初はみんな苦労を抱えながら段々と広まっていったことがうかがえます。
flexboxは大幅な仕様の変更が過去に2度もあり、各ブラウザとそのバージョンによって実装している仕様が異なるため、後方互換をきっちり対応しようとすると、gradientと並んで2大考えるのをやめたくなるプロパティとなっております。
CSS gridはgridで、利用の浸透に向けて別の種類の難しさを抱えていますが、いずれflex並にみんなが使いこなす日が訪れるかもしれません。
CSS grid と対比すべき相手は本来…？
CSS flexと比較すると、何が優位性なのかわかりづらいCSS gridですが、それもそのはず、CSS gridの誕生背景を考えるとgrid vs. flexという対比自体が間違っていて、本来CSS gridと対比されるべきは、1989年のWeb誕生のころから続く「伝統的Webレイアウト」であることがわかります。ちなみに現在では「伝統的Webレイアウト」=「フローレイアウト」と呼ばれています。
「CSS grid vs. フローレイアウト」という視点を学ぶのにうってつけの書籍が日本語で出版されています。
CSSは「ドキュメントをレイアウトするために作られたもの」であり、現在のWebのように多種多様なものをレイアウトしたり、コンポーネント化して管理するといったことは想定されていなかったからです。
そんな中、ドキュメント以外の、さまざまなレイアウトに対応すべく登場したのが、新しいレイアウトシステムの「CSSグリッド（CSS Grid）」です。
引用した「はじめに」の部分は上記Webサイトでも公開されています。「はじめに」だけでもCSS gridの正しい立ち位置が理解できますし、書籍購入後１章と２だけでも読めば、フローレイアウト、CSS flex、gridと続くWebレイアウトの歴史、なぜCSS gridが必要だったのか？がよくわかります。
長年積み重なった議論、インターネット各所に散在する資料、W3C仕様書などを広く深く読み込まないとわからない内容を、この本が代わりにまとめてくれています。一読者として「これだけの情報を集め、一つのストーリーにつなげるのは、並々ならぬ苦労とCSS gridへの深い理解がなければ出来ないだろう」と思わされます。
歴史の話だけではなく、gridレイアウトのアルゴリズムが丁寧に解説され、これ一冊でCSS gridをしっかりマスターできる内容になっています。３章４章のレイアウト・アルゴリズムの解説はほかでは見たことがないほどの深さで解説され、私もいつもわからなくなったときに読み返しています。
昔は名前がなかった「フローレイアウト」
フローレイアウトは別名ノーマルフローとも呼ばれ、今ではMDNなどのドキュメントにも現れる用語なので、すっかり市民権を得ています。
Normal Flow, or Flow Layout, is the way that Block and Inline elements are displayed on a page before any changes are made to their layout. - MDN - CSS flow layout
NThis article explains normal flow, or the way that webpage elements lay themselves out if you haven't changed their layout. - MDN - Normal Flow
しかし、フローレイアウトもノーマルフローも最初からあった用語ではありません。CSS Working GroupがCSS gridの仕様策定とともにWebレイアウトの概念を整理し、以前からあった伝統的なWebレイアウト手法を指す用語として近年用いるようになりました。
Jen Simmons氏はCSS Working Groupのメンバーとして仕様策定を行うメンバーであり、CSSのエキスパートとして有名です。彼女の“Designing Intrinsic Layouts”という有名な発表の中で以下の内容が含まれます。
This is what is called Flow Layout, and this is the default layout you get. You don’t get “no layout”, when you don’t put any CSS. You get, what we should start calling, flow layout, the default. That never had a name because it was the only thing it could do. Rachel and I started calling this Flow Layout. It comes from CSS Working Group…
それでは「CSS grid vs. フローレイアウト」という考え方をもとに、よくありがちな間違った考え方を訂正してみましょう。
CSS gridに対する間違った考え方
さて、どんな技術でも初心者のうちは間違った考え方・捉え方をしてしまう、的はずれな質問をしてしまうということがあります。CSS gridに関しては以下の２つについて考えを改めると習得が早くなります。
- 「CSS gridは２次元、CSS flexは１次元」という考え方をやめる
- 「CSS flexとCSS gridをどう使い分けるか？」という質問をやめる
「CSS gridは２次元、CSS flexは１次元」という考え方をやめる
たしかにCSS gridは２次元に向いている、というのは正しいです。実際にCSSの標準化団体であるW3Cのドキュメントにも以下の記述があります。
Grid Layout is optimized for 2-dimensional layouts: those in which alignment of content is desired in both dimensions.
Firefox開発元のMozillaが監修し、多くのWeb開発者が信頼するであるMDNマニュアルでも冒頭に以下の記述があります。
CSS グリッドレイアウトは、二次元グリッドシステムを CSS にもたらします
ただし、 どちらの文書も「CSS gridは１次元に向いていない」とは書いていません。ここが多くの人が勘違いしているポイントです。 後述しますが、１次元でも２次元でも統一的な考え方で扱えることがCSS gridを使うメリットです。これからCSS gridの使い方を学ぶ段階では、１次元２次元という分類は習得の障害になります。
「CSS flexとCSS gridをどう使い分けるか？」という質問をやめる
CSS flexとgridの使い分けを知りたいという考え方でいると、いつまで経ってもCSS gridを使う機会がやってきません。先述のように、CSS flexでほとんどのレイアウトが実現できてしまうからです。少なくともCSS gridを練習している期間は、Webレイアウト第一の選択肢としてCSS gridを使いましょう。 そうしていれば、練習期間が終わって初心者を脱した後も、あなたはCSS gridを第一の選択肢として優先したくなるはずです。なぜでしょうか？
2017年以前と非常に早い時期からCSS gridの啓蒙活動を行ってきた坂巻 翔大郎さんも「まずはCSS gridでできないか考えてみることが大事」ということをCSS flexとgridの使い分けのコツとして紹介しています。
2021年3月12日開催 CodeGridから読み解くイマドキのCSS（CSS Nite）25分34秒時点
またSNSで活発にCSSやフロントエンド関連の発信をされているTakさんもブログ記事で以下のように書いています。
flexとgridどちらかを使用してレイアウトを組むといった際、僕はまずgridで実装できないか？を意識して考えるようにしています。
CSS gridを使いこなせるようになるとわかるのですが、CSS gridはその考え方も含めて本領を発揮します。CSS gridの背景にある思想を理解し、WebレイアウトをCSS gridで考えるクセが身につくと、多くの場面でflexよりも便利なツールとして好んで使うようになります。
もちろん中にはCSS flexのほうが向いている場面はあるのですが、CSS flexとgridの最適な使い分けは、両方を十分に使いこなせるようになって初めてわかります。最初から使い分けを学ぼうとする姿勢は、CSS gridの世界にどっぷりと浸かって背景思想を学ぶ機会を遠ざけてしまうのです。
「わざわざ背景思想まで学ばないといけないのは面倒だな…」と思う方も多いと思います。そういう方には繰り返しですが下記書籍をおすすめします。リンク先で無料公開されている「はじめに」を読むだけでも背景思想にだいぶ詳しく慣れますし、可能なら購入後１章と２章だけでも読めば背景思想は完璧です。CSS gridに苦手意識を持っている人ほど「そうだったのか！」という気づきがある、読んでいて面白い内容です。
CSS gridは「一次元レイアウト」から練習を始める
CSS gridは２次元も１次元も統一的に扱えます。そして１次元レイアウトの方が世の中で使われる機会が多く、簡単です。ということは、 CSS gridの練習は１次元レイアウトから始めるべきです。 CSS gridで挫折した人の多くは２次元レイアウトの例だけを練習して、使い所が少ない上に難しいので、結局flexに戻ってきてしまったのだと思います。練習法を変えれば、マスターはすぐ近くです。
１次元レイアウトの練習
「１次元レイアウト」には垂直と水平があります。
こちらの練習メニューは後日別記事でより詳しく紹介する予定です。
１要素センタリングの練習
「１次元レイアウト」の特殊例として、１要素センタリングもCSS gridの理解に役立ちます。
こちらの練習メニューも後日別記事でより詳しく紹介する予定です。
１次元入れ子レイアウトの入れ子の練習
「１次元レイアウト」の入れ子も考えると、実現可能なレイアウトの幅が大きく広がり、実用レベルのものも作成できます。
こちらの練習メニューも後日別記事でより詳しく紹介する予定です。
まとめ
CSS gridと聞くと「覚えることが多すぎて面倒」とか「結局CSS flexの方が楽」と考えてしまい、習得のモチベーションが湧かない人も多いかと思います。そこでCSS gridへの考え方を変えるため、CSS grid vs. flexという対比自体が間違っていて、「伝統的Webレイアウト」=「フローレイアウト」と考えるべきであることをお伝えしました。そして、CSS gridの練習は「一次元レイアウト」から始めることをおすすめしました。
CSS gridは使い慣れると楽しくて、Webレイアウトに関する自分の思考をクリアにしてくれるツールです。本記事がその楽しさを知るきっかけになれば幸いです。
Discussion