こんにちは！フロントエンドの現場で、日々CSSという「生き物」と格闘しているチーフアーキテクトです。
CSSを学び始めると、`div`や`class`を指定するだけの「単体指定」にはすぐに慣れますよね。でも、実務の現場では「ある要素の隣にいるからこそ、こう動いてほしい」という、いわば「空気を読む」ような指定が必要になる場面が山ほどあります。
今日は、そんなCSSの「空気を読む力」の代表格、隣接兄弟結合子（`+`）について、お話ししましょう。これを知るだけで、あなたのコードはぐっと洗練されて、無駄なクラスを量産する苦しみから解放されますよ。
—
「隣接兄弟結合子（`+`）」って何？
言葉は難しそうですが、仕組みはとてもシンプルです。「`+`」という記号は、「Aの直後にいるBだけ」という強烈な限定条件を加えるためのスイッチです。
身近な例え話で考えてみよう
想像してみてください。あなたはカフェのレジに並んでいます。
「`+`」という指示は、「一番前に並んでいる人の、すぐ後ろにいる人だけ、サービスでチョコをあげる」というルールに似ています。
- 一番前の人は対象外。
- 一番前の人の「すぐ後ろ」にいる人だけが対象。
- そのまた後ろ（3番目以降）の人は、残念ながら対象外。
CSSの世界でも同じです。「見出し（`h2`）のすぐ下にある段落（`p`）だけ、少し余白を広げたい」といった時に、わざわざ`p`タグに一つ一つクラスをつける必要はありません。CSSに「`h2`のすぐ後ろの`p`を狙え！」と指示すれば済むのです。
—
実際にコードで見てみよう
例えば、ニュースサイトの記事ページをイメージしてください。見出しの直後の段落には「読み始めの余白」が少し必要だけど、段落同士の余白は狭くしたい……そんなシーンです。
/ 見出し(h2)のすぐ後ろにある段落(p)だけを狙い撃ち！ /
h2 + p {
margin-top: 20px; / 見出しとの距離を広げる /
font-weight: bold; / 読み始めを強調してみる /
color: #333; / 少し濃い色にする /
}
/ ちなみに、p + p と書けば「段落と段落の間」だけにスタイルを当てることも可能 /
p + p {
margin-top: 10px; / 段落同士は少し控えめな余白に /
}
この書き方なら、`class=”first-paragraph”`のようなクラス名を悩んでつける必要もありません。「見出しの直後ならこうなる」というルール自体をCSSに持たせることができるので、後から修正するのも非常に楽なんです。
—
つまずきやすいポイントと、「大丈夫ですよ」というフォロー
「あれ、思った通りに動かないぞ？」と焦る時、大抵は以下の2つのどちらかです。
1. 「直後」じゃない：
`h2`と`p`の間に、別の要素（例えば`div`や`img`）が挟まっていませんか？`+`はあくまで「すぐ隣（兄弟）」しか見ません。間に別の要素が入ると、その瞬間に効力を失います。「兄弟だけど、隣同士じゃないとダメ」という厳格なルールがあるんです。
2. HTMLの構造：
`+`はあくまで「同じ階層（親が同じ）」にある要素でしか使えません。お父さんが違う要素同士には、この魔法はかからないので注意してくださいね。
もし動かなくても、「あ、今は隣に誰か割り込んでいるんだな」とか「親子関係が違うんだな」と気づくだけで、解決までの距離はぐっと縮まります。最初は誰だって間違えます。少しずつ「CSSの目」が養われていく過程ですから、安心してください。
—
現場で役立つ「美学」
私が新人の頃、とにかく何でもかんでもクラス名をつけていました。でも、ある時、先輩に言われたんです。
「クラス名をつけるのは、その要素に『意味』がある時だけ。構造だけで解決できるなら、CSSに任せたほうがコードは汚れないよ」と。
`h2 + p`のような指定は、まさにその「構造の美しさ」を体現しています。HTMLをシンプルに保ち、CSSの論理でレイアウトを制御する。これができると、Web制作はパズルを解くような楽しさに変わります。
まずは今日、あなたの書いているコードの中で「これ、クラス名つけなくても`+`で指定できるかも？」という場所を探してみてください。その小さな発見が、あなたのCSSスキルを次のステージへ引き上げてくれるはずです。
もし分からないことがあれば、いつでもまた聞きに来てくださいね。CSSという深い世界、一緒に楽しみながら攻略していきましょう！
コメント