Google推奨CSSの書き方！FlexboxとGridの正解は？
CSSの書き方、これで合ってる？と不安になりませんか
Webサイトを作っていると、「このCSSの書き方、本当にモダンで正しいのかな？」と不安になること、ありますよね。情報が多すぎて、どれが最新のベストプラクティスなのか分からなくなりがちです。
そんな悩みを解決するヒントが、実はGoogleから提供されています。Google Chromeチームが公開している「Modern Web Guidance」は、まさにモダンなWeb開発の「やるべきこと・やってはいけないこと（Dos / Don'ts）」が詰まったガイドラインなんです。
この記事では、そのガイドラインを元に、特に重要なCSSの基礎とレイアウトのポイントを絞って、分かりやすくご紹介します。これを読めば、あなたのCSSコードがもっとスマートで壊れにくくなるはずです！
まずは基本から！Googleが示すCSSの基礎方針
モダンなCSSを書くための第一歩は、基礎方針を理解することです。Googleが推奨するのは、「重複を避け、ブラウザの標準機能を最大限に活かす」という考え方です。
同じ値を何度も書くと、後で修正するときに直し忘れが起きやすくなりますよね。これを避けるために、まずはCSSの変数（カスタムプロパティ）を使うのが基本です。しかし、それよりも優先すべきなのが、ブラウザに元々備わっている仕組みを使うことです。
- currentColorを使う
親要素の色を継承したいとき、わざわざ変数で色を指定しなくてもcurrentColorで対応できます。 - inheritキーワードを使う
親子で同じ値を使いたい場合、inheritを使えば明示的に継承させられます。 - em単位やコンテナ単位を使う
font-sizeやボックスモデルの値を繰り返す代わりに、相対的な単位を使うことで柔軟な設計が可能です。
また、もう一つ重要なのが「論理プロパティ」の優先です。margin-leftのような物理的な指定ではなく、margin-inline-startのような論理的な指定を使うことで、日本語の縦書きや右から左に読む言語（RTL）でもレイアウトが崩れにくくなります。
論理プロパティは常に万能というわけではありません。言語や書字方向に関わらず、常に同じ位置に表示したいアイコンや影などには、従来どおり物理プロパティを使うのが適切です。「これは反転してほしいか？」と自問自答するのがコツです。
こうした基礎を押さえるだけで、コードはぐっと見通しが良くなり、将来の変更にも強くなります。
レイアウト手法の選び方！FlexboxとGrid、どう使い分ける？
CSSレイアウトの主役といえば、FlexboxとGridですよね。でも、どちらをいつ使えばいいのか迷うことも多いはず。Googleのガイドラインでは、明確な判断基準が示されています。
基本的には「ブラウザのレイアウトエンジンに任せる」のが最も高速で効率的です。固定の幅や高さでガチガチに固める前に、コンテンツの量に応じてサイズが変わる「intrinsic sizing」や、これから紹介するレイアウト手法を検討しましょう。
以下の表は、どのレイアウトを使うかの判断基準をまとめたものです。
| 用途 | 使うべきCSS機能 |
| 要素を1方向（タテかヨコ）に並べる | Flexbox |
| 行と列を持つ複雑なページ構造 | Grid |
| 入れ子要素を親のグリッド線に揃えたい | subgrid |
| 新聞のような段組み | multi-column |
| 要素を別の要素に追従させて浮かせる | anchor positioning |
このように、単純な横並びならFlexbox、ページ全体の骨格を作るならGrid、というように目的で使い分けるのが正解です。適材適所で選ぶことが、壊れにくく美しいレイアウトへの近道となります。
FlexboxでやりがちなNG例と正しい書き方
1次元のレイアウト、つまり要素を横一列や縦一列に並べるのに非常に便利なFlexbox。しかし、便利な反面、いくつか知っておくべき「やってはいけないこと」があります。
特に注意したいのが、見た目の順番とHTMLの構造（DOM順）が食い違ってしまうケースです。これはキーボードで操作するユーザーにとって、非常に使いにくいサイトになってしまう原因になります。
- orderプロパティの乱用
クリックできるボタンなどの順序をorderで変えると、見た目とキーボードのフォーカス順がズレてしまいます。 - flex-direction: *-reverseの使用
これも同様に、DOM順と見た目の順序が逆転するため、操作可能なコンテンツには使うべきではありません。 - justify-selfの使用
justify-selfはGridレイアウト用のプロパティで、Flexboxでは効きません。代わりにmargin: autoを使いましょう。
一方で、これを知っているとコーディングが楽になる「やるべきこと」もたくさんあります。
- gapプロパティで余白を作る
要素間の余白は、各要素にmarginを指定するより、親要素にgapを指定する方がシンプルで確実です。 - autoマージンで端に寄せる
一つの要素だけを右端や左端に寄せたい場合、margin-inline-start: auto（またはmargin-inline-end: auto）を使うのが定石です。 - 長い文字列には`min-inline-size: 0`
URLなどの長い文字列がコンテナからはみ出す問題は、flexアイテムにmin-inline-size: 0(またはmin-width: 0) を指定することで解決できます。
これらのDos/Don'tsを意識するだけで、より多くの人にとって使いやすく、そして保守しやすいFlexboxレイアウトが実現できます。
Gridとsubgridで実現する高度なレイアウト
ページ全体の骨格や、行と列が組み合わさった複雑なコンポーネントを作るなら、Gridレイアウトの出番です。Gridは2次元のレイアウトを直感的に作れる強力なツールです。
Gridを使いこなすコツは、レイアウトのパターンに応じて適切なプロパティを選ぶことです。
画面幅に応じて列数が自動で変わるカードリストを作りたいなら、repeat(auto-fit, minmax(200px, 1fr))という書き方が定番です。これにより、各カードが最低200pxの幅を保ちつつ、利用可能なスペースを均等に分け合います。
ヘッダー、サイドバー、メインコンテンツ、フッターといったページ全体のレイアウトにはgrid-template-areasが非常に便利です。各エリアに名前を付け、アスキーアートのように視覚的にレイアウトを定義できます。
Gridレイアウトの中にさらにGridを入れ子にしたとき、内側の要素が隣のカードの要素と揃わない…という問題がよくあります。これを解決するのがsubgridです。子のグリッドが親のグリッド線を継承するため、カード間でタイトルやボタンの高さをピタリと揃えられます。
特にsubgridは、これまでJavaScriptで高さを計算していたようなデザインをCSSだけで実現できる画期的な機能です。Gridを使いこなせば、これまで諦めていた複雑なレイアウトも、シンプルかつ堅牢に実装できるでしょう。
バズリ編集長のひとこと
結論から言うと、モダンCSSは「ブラウザに任せる」のが一番賢いやり方なんですよね。個人的には、昔みたいにピクセル単位でガチガチに固めるんじゃなくて、fr単位やminmax()で柔軟性を持たせる考え方が好きです。これからCSSを学ぶ人は昔の書き方を飛ばしてOK。ベテランの方は、昔の常識をアップデートする良い機会やと思います。
まとめ
今回は、Googleの「Modern Web Guidance」を元に、モダンなCSSの「やるべきこと・やってはいけないこと」を見てきました。
重要なのは、固定値に頼りすぎず、FlexboxやGridといったブラウザの強力なレイアウト機能を信頼し、その特性を最大限に活かすことです。また、論理プロパティを使うことで、よりグローバルでアクセシブルなサイト構築に繋がります。
このガイドラインは、コーディングに迷ったときの道しるべになります。ぜひ、日々の開発に取り入れて、より良いCSSを目指してみてください！
元記事はこちらで確認できます: GoogleのModern Web Guidanceに学ぶ、モダンCSSのDos / Don'ts大全
