【入門編】属性セレクタ ([attr]) – CSS実践ガイド

CSSの世界へようこそ！フロントエンドの最前線で日々コードと格闘していると、「もっと早く知りたかった！」と後から気づく便利なテクニックがいくつかあります。その一つが、今日紹介する「属性セレクタ」です。

「クラス名やID名だけで十分じゃないの？」と思うかもしれません。でも、属性セレクタを使いこなすと、まるで魔法のようにコードがスッキリし、メンテナンスが劇的に楽になります。

今日は、難しい専門用語は抜きにして、日常の風景に例えながら紐解いていきましょう。

—

CSSのセレクタは「どんな要素に色を塗るか？」を決める住所のようなものですよね。これまで皆さんが使ってきた `.box`（クラス）や `#header`（ID）は、いわば「名前」で呼びかける方法です。

一方で「属性セレクタ」は、「その要素が持っている性質（持ち物）」で呼びかける方法です。

スーパーのレジを想像してみてください。

店員さんの名前（クラス）が何であれ、「エコバッグを持っている」という事実さえあれば、その人に対して「袋詰めはこちらです」と声をかけられますよね。CSSにおける属性セレクタも、これと全く同じです。

—

一番シンプルな属性セレクタは、角括弧 `[]` の中に属性名を書くだけです。
「この属性を持っている要素、全員集合！」という合図ですね。

/ 「title」という属性を持っている要素をすべて選ぶ /
[title] {
border: 2px solid orange; / 属性があるなら、とりあえずオレンジの枠線を引いて目立たせる /
}

「値が何であるか」は関係ありません。「`title`という属性が書かれている」という事実だけで、CSSが反応します。

—

初学者の頃は「クラス名をたくさんつければいいや」と考えがちですが、実はこれ、後で地獄を見ることになります。

例えば、Webサイトによくある「外部サイトへのリンク」を考えてみましょう。通常、外部サイトへのリンクには `target=”_blank”` という属性がつきますよね。

ここで「外部サイトへのリンクには、横にアイコンを添えたい」と思ったとき、わざわざクラス名 `class=”external-link”` を全部のリンクに手書きしますか？何百ページもあるサイトだったら、それだけで日が暮れてしまいます。

そこで属性セレクタの出番です。

/ target属性を持っているリンクだけに、自動でアイコンを表示する /
a[target] {
padding-right: 20px;
background: url(‘icon-external.png’) no-repeat right center;
}

たったこれだけで、HTMLを一行も汚さずに、サイト内の「外部へのリンク」すべてにアイコンを付けることができました。スマートだと思いませんか？

—

ここまで読んで、「なんだか便利そうだけど、間違いそう……」と不安になったあなた。大丈夫ですよ！

よくあるミスは、「角括弧 `[]` を書き忘れる」こと。

もしCSSが効かないときは、カッコを忘れていないか、あるいはスペルミスがないか、落ち着いて確認してみてください。最初は誰だって間違えます。僕も駆け出しの頃は、スペルミスで3時間悩んだ経験がありますから！

—

以下のコードをコピーして、ご自身のHTMLファイルで試してみてください。

/ 1. title属性がある要素を強調 /
[title] {
background-color: #fff3bf;
}

/ 2. type属性が「text」の入力欄だけ枠線を青くする /
/ これも属性セレクタの応用です！ /
input[type=”text”] {
border: 2px solid deepskyblue;
}

/ 3. 属性が「あるかないか」で判断する /
/ disabled（無効化）属性がついているボタンをグレーにする /
button[disabled] {
background-color: #ccc;
cursor: not-allowed;
}

—

属性セレクタを使いこなすと、HTMLに余計なクラス名を詰め込む必要がなくなります。これは「HTMLは構造（意味）を書き、CSSは見た目を整える」というWeb制作の鉄則を守るための、非常に強力な武器になります。

最初は難しく感じるかもしれませんが、「この要素、どんな属性を持ってるかな？」とHTMLを眺める癖をつけるだけで、皆さんのコードは一気にプロの質に近づきます。

焦らず、一つずつ試してみてくださいね。応援しています！