皆さん、こんにちは！日々のコーディング、本当にお疲れ様です。
CSSを学び始めると、HTMLを汚さずに特定の要素だけを狙い撃ちしてデザインを当てられる「構造的疑似クラス（`:nth-child` や `:first-child`、そして最近話題の `:has()` など）」の便利さに、きっと感動しますよね。
「2番目の要素だけ背景色を変えたいから `:nth-child(2)` を使おう！」
「最後の要素の余白を消したいから `:last-child` を使おう！」
これらは魔法のように便利で、モダンなWeb制作には欠かせない道具です。
しかし、この便利な魔法たち、実は「使いどころを間違えると、ブラウザが裏側でヒィヒィ息切れしてしまう」という、ちょっとした秘密があるのです。
今日は、そんなCSSの裏側にある「パフォーマンス（表示速度や動作の軽さ）」のお話を、難しい専門用語をできるだけ使わずに、身近な例え話で分かりやすく紐解いていきましょう。
大丈夫、難しいことは何もありません。私と一緒に、一歩ずつ楽しく学んでいきましょう！
—
ブラウザは「超生真面目なクラスの担任の先生」
CSSが画面に反映されるとき、ブラウザの裏側ではどんなことが起きているでしょうか。
イメージしやすいように、ブラウザを「超生真面目な学校の担任の先生」、HTMLの要素（タグ）を「教室に座っている生徒たち」に例えてみます。
例えば、クラスに100人の生徒（要素）が並んでいるとします。
1. `:first-child` や `:last-child` の場合
先生が「出席番号が『最初』の人と『最後』の人、立ってください！」と言いました。
これは簡単ですね。先生は名簿の先頭と一番お尻を見るだけで、一瞬で誰を立たせればいいか判断できます。ブラウザにとっても、この処理は朝飯前です。
2. `:nth-child(3n)` の場合
次に先生が「出席番号が『3の倍数』の人、立ってください！」と言いました。
先生は、1番から順に「1、2、3（君だ！）、4、5、6（君だ！）……」と、頭の中で引き算や割り算をしながら、100人全員をチェックしなければなりません。
生徒が100人ならまだしも、これがもし「1万人の全校集会（超巨大なHTML）」だったらどうでしょう？ 先生は計算だけでクタクタになってしまいますよね。
3. さらなる難敵 `:has()` や `:not()` の登場
最近使えるようになった超強力な `:has()`。これは、例えるなら先生が「カバンの中に『赤い筆箱』が入っている人、立ってください！」と言うようなものです。
先生は、生徒一人ひとりの机のところまで行って、カバンの中身を覗き込んで確認しなければなりません。
しかも、誰かが筆箱を筆記用具入れにしまったり、隣の席に移動したりするたびに、先生は全員のカバンを「もう一度最初から」チェックし直す必要があるのです。
これが、ブラウザの裏側で起きている「再計算（スタイルの再計算）」の負担です。
—
なぜ「大規模なDOM（HTML）」で問題になるの？
ブログ記事やシンプルなポートフォリオサイトなら、要素の数はそこまで多くありません。そのため、疑似クラスをどれだけ使っても、体感できるほどの遅さは感じないでしょう。
しかし、以下のような「大規模なサイトやWebアプリ」では話が変わってきます。
- 何千行もある長大な表（テーブル）
- 無限にスクロールして増え続けるSNSのタイムライン
- 大量の商品が並ぶECサイトの検索結果
HTMLの要素（これを専門用語で「DOMツリー」と呼びます）が数千、数万と増えた状態で、ユーザーが画面をスクロールしたり、ボタンをクリックして要素が追加されたりするたびに、ブラウザの先生は「誰が3の倍数だっけ？」「カバンの中身は変わってない？」と、凄まじいスピードで何度も何度も全員分を数え直します。
これが、スマホで画面がカクついたり、スクロールが重くなったりする隠れた原因になるのです。
—
実際にエディタで試してみよう！「重い書き方」と「軽い書き方」
では、実際にどのようなコードがブラウザに優しく、どのようなコードが負担をかけるのか、具体的なサンプルを見てみましょう。
以下のコードをコピーして、ご自身のエディタに貼り付けて動かしてみてくださいね。
✕ ブラウザが少し疲れやすい書き方（構造的疑似クラスの多用）
まずは、HTMLをシンプルに保とうとするあまり、CSS側で無理に特定しようとするパターンです。
- たろう（1人目）
- はなこ（2人目）
- さくら（3人目）
- けんじ（4人目）
/ CSS側で、ブラウザに「数え上げる仕事」をさせています /
/ 1. 3の倍数の人だけ背景をグレーにする /
.user-list li:nth-child(3n) {
background-color: #f0f0f0; / ブラウザは毎回、要素を数え直します /
}
/ 2. 最後の要素だけ下線を消す /
.user-list li:last-child {
border-bottom: none; / 要素が増減するたびに、どれが最後か再確認します /
}
◯ ブラウザが泣いて喜ぶ「軽い」書き方（クラス名の活用）
次は、最初からHTML側に「目印（クラス名）」をつけてあげる方法です。
これは、先生に探させるのではなく、「最初から名札を貼っておいてあげる」ような優しさです。
- たろう
- はなこ
- さくら
- けんじ
- ゆうと
/ CSS側は、ただその名札（クラス）を見るだけで済みます！ /
/ 1. 目印がついている人だけ背景を変える /
.user-item.is-highlighted {
background-color: #f0f0f0; / 数える必要がないので、一瞬で処理が終わります /
}
/ 2. 最後の目印がついている人の下線を消す /
.user-item.is-last {
border-bottom: none; / 迷わずピンポイントで適用できます /
}
「HTMLにクラス名が増えるのはちょっと格好悪いな……」と思うかもしれません。
しかし、ブラウザの表示スピードという観点から見ると、「具体的なクラス名が1つ書いてあること」は、どんなに複雑なCSSの裏技よりも圧倒的に高速なのです。
—
つまずきやすいポイントへの「優しい処方箋」
ここまで読んで、「えっ、じゃあ `:nth-child` や `:last-child` は使っちゃダメなの？」と不安になった方もいるかもしれません。
大丈夫ですよ、安心してください。決して「使ってはいけない悪者」ではありません。
技術を学ぶ上で一番大切なのは、バランスです。以下の3つの優しいルールを心に留めておくだけで、あなたの書くCSSは劇的にプロの品質に近づきます。
1. 「数」を意識しよう
要素がせいぜい10個〜20個程度の小さなパーツ（ナビゲーションメニューなど）であれば、`:first-child` や `:last-child` は積極的に使って問題ありません。
2. 「動的に増える場所」を警戒しよう
「ユーザーの操作で100個にも1000個にも増える可能性があるリスト」や「データベースから読み込む記事一覧」のような場所では、疑似クラスを避け、HTML（JavaScriptやサーバーサイドの処理）側でクラス名を付与することを検討しましょう。
3. `:has()` は「ピンポイント」で使う
便利すぎる `:has()` ですが、広範囲の親要素（例えば `body:has(…)` など）に使うと、ブラウザの先生は家中のタンスを全部ひっくり返す羽目になります。必ず `.card:has(.card-image)` のように、影響範囲を狭い範囲に限定して使いましょう。
—
まとめ：あなたの優しさが、Webサイトを速くする
CSSのパフォーマンスを高めるということは、トリッキーなコードを書くことではありません。
「ブラウザという、健気に働く先生が、いかに迷わず、いかに計算を少なく目的の場所に辿り着けるか」を考えてあげる、思いやりの心そのものです。
「ここにクラス名をつけておけば、ブラウザが楽できるな」
そんな視点を持てた瞬間、あなたはもう立派なプロフェッショナルの入り口に立っています。
焦らず、まずは目の前のコードから、ブラウザに優しい書き方を試してみてくださいね。
あなたのWeb制作の旅が、もっと楽しく、もっと素晴らしいものになりますように。応援しています！
コメント