こんにちは！フロントエンドの現場を長年うろついている、ちょっとお節介なCSSアーキテクトです。
CSSを書き始めた頃って、セレクタの記号の多さにめまいがしませんか？
「`.`はクラスだっけ？ `#`はIDだっけ？ じゃあ、この変なカギ括弧 `[]` やニョロニョロした記号 `~=` は一体なに！？」って、キーボードをそっと閉じたくなる夜もありますよね。大丈夫ですよ、最初はみんなそこを通ります。
今回は、そんなCSSの数あるセレクタの中でも、ちょっと通好みなのに、知っていると「おっ」と周りに一目置かれる`[attr~=value]`（空白区切りリストの包含）という機能について、おしゃべりするみたいに優しく解きほぐしていきますね。
難しく考えず、まずは身近な例からいってみましょう！
—
1. 例え話：クローゼットの中の「タグ付きハンガー」
想像してみてください。あなたの部屋のクローゼットに、たくさんの洋服がかかっています。
その洋服のハンガーには、いくつかの「タグ」がペタペタと貼られています。
例えば、あるシャツのハンガーには、こんな風にスペース（空白）を空けてタグが貼られています。
`[ カジュアル 夏用 お気に入り ]`
ここで、あなたが「今日みたいな暑い日だし、『夏用』っていうタグが含まれている服だけをパパッと選び出したいな」と思ったとします。
CSSの `[attr~=value]` は、まさにこの「空白で区切られたいくつかの言葉（リスト）の中から、特定の単語がポツンと含まれているやつを探し出す」ための魔法の呪文なんです。
- `attr` ＝ クローゼットのタグ（属性）
- `value` ＝ 探したい特定の単語（今回は「夏用」）
- `~=` ＝ 「この言葉、この中に含まれてる？」っていうチェックの目印
「スペースで区切られた単語のグループの中から、狙ったワードをピンポイントで捕まえる」。このイメージだけ、まずはポッケに入れておいてくださいね。
—
2. 実際のコードで見てみよう
Webの現場でも、この「1つの属性の中に、スペース区切りで複数の意味を持たせたい」という場面はよくあります。一番分かりやすいのは、ボタンのデザインや、アイコンの指定なんかですね。
実際にコードを書いてみましょう。HTMLとCSSを一緒に見てみます。
HTMLのイメージ
ここで注目してほしいのが、最初のボタンの `class=”btn primary large”` という部分です。
一つの `class` 属性の中に、`btn`、`primary`、`large` という3つの単語が半角スペースで区切られて入っていますよね。
CSSの書き方と `~=` の出番
さて、「この中のどれでもいいから、`large` という単語が含まれているボタンの文字を、ちょっと大きく太っ腹にしたい！」と思ったとします。
そんなとき、こう書くんです。
/ class属性の中に、空白区切りで “large” という単語が含まれている要素を狙い撃ち！ /
[class~=”large”] {
font-size: 1.25rem; / ちょっと文字を大きく /
font-weight: bold; / 太字にする /
}
このCSSを書くと、HTMLの1番目と3番目のボタン（`large`を含んでいるもの）だけに、このスタイルがフワッと適用されます。真ん中のボタンは `large` がないのでスルーされます。賢い子でしょう？
—
3. ここでよくある「つまずきポイント」をそっとフォロー
CSSを触り始めたばかりの頃、似たような記号が多すぎて混乱しがちなんですよね。
特にこの `~=`（チルダ付きイコール）と、よく間違えられるのが `=`（アスタリスク付きイコール） です。
「あれ、文字が含まれてるかどうかなんだから、どっちでも一緒じゃないの？」って思いませんか？ ここがとっても大切な分かれ道です。
- `[class~=”word”]` （今回の主役）
- 空白区切りの「単語単位」で探します。
- だから、`class=”my-button large”` なら見つかりますが、もし `class=”larger-btn”` だった場合、`large` という単語そのものではないので、ヒットしません（部分一致ではなく、独立した単語を探すため）。
- `[class=”word”]` （部分一致お化け）
- 単語の区切りに関係なく、文字の一部として含まれていれば何でも捕まえます。
- だから、`class=”larger-btn”` の中の `large` すらも見つけ出しちゃいます。
「うわ、厳密なんだなぁ」って思いました？ そうなんです。
`~=` は、「あくまでスペースで区切られた『単語の仲間たち』の中に、あの単語がいるかどうか」を厳しめにチェックする、ちょっと真面目な管理人さんのようなイメージですね。
—
4. 実務でどう使う？ちょっとした実用例
「で、実際のWeb制作でこれ、いつ使うの？」って思いますよね。
例えば、CMS（WordPressなど）が自動出力するクラスや、独自で作るUIコンポーネントで、「状態」や「サイズ」をひとつのHTML属性にまとめたいときによく使われます。
こんな風に、`data-` 属性を使って情報のタグ付けをしている場合、CSS側で次のようにスタイリングできます。
/ data-tags属性の中に “pickup” という単語が含まれているカードだけ、枠線を金色にする /
[data-tags~=”pickup”] {
border: 2px solid gold;
background-color: #fffdf0;
}
これなら、JavaScriptで複雑なクラスの付け替えをしなくても、CSSだけで「お、この記事はピックアップだな」と判断してリッチな装飾を施してあげることができます。なんだかちょっと、コードを書くのが楽しくなってきませんか？
—
最後に：CSSはあなたを急かしたりしません
属性セレクタの世界は、最初は記号ばかりで暗号のように見えるかもしれません。
でも、今日お話しした `[attr~=value]` は、クローゼットのタグからお目当ての服を探すような、案外とっても人間味のある優しい仕組みです。
もし実際にコードを書いてみて、「あれ、効かないな？」と思ったら、それはスペルミスか、あるいはスペースの入れ忘れ、もしくは単語単位じゃなくて部分一致（`=`）にすべきだったのかな？という小さなすれ違いだけです。
CSSはいつでもあなたの味方ですし、間違えてもパソコンが爆発することはありません（笑）。
怖がらずに、自分のペースでエディタにコードを打ち込んで、ブラウザの画面が変わる瞬間を面白がってみてくださいね。
あなたの毎日のコーディングが、少しでもワクワクする楽しい時間になりますように！
コメント