ホームページ作成

【ホームページ作成】属性セレクタで、スタイルシートを柔軟に！

HTML・スタイルシート（CSS）の基礎

更新日：2007年01月19日

属性セレクタで、スタイルシートを柔軟に！

西村文宏

Internet Explorer 7から使えるようになったスタイルシートの機能に、「属性セレクタ」があります。FirefoxやOperaでは以前から使えていました。これを活用すると、より柔軟な装飾対象の指定が可能になります！

属性セレクタの使い方 …の前に

通常、スタイルシートは、次のような書式で記述しますね。

要素名 { プロパティ: 値; }

※末尾のセミコロンは「区切り文字」なので、記述するプロパティが1つだけなら省略可。
例えば、見出しである「h1要素」の文字色を赤色にするには…

h1 { color: red; }

…と記述しますね。このスタイルを記述していれば、以下のようなHTMLが装飾対象になります。

<h1>ここが赤色になります</h1>

h1要素に含まれる文字が赤色に装飾されます。
…ここまでは何も問題ありませんね。スタイルシートの基礎中の基礎です。

属性セレクタの使い方

「属性セレクタ」という書式を使うと、次のような記述方法ができます。

要素名[属性名] { プロパティ: 値; }

要素名[属性名="値"] { プロパティ: 値; }

要素名の直後にカッコ [ ] を記述して、属性を指定することができます。

属性セレクタの使用例１（属性名のみ）

属性名のみを指定する場合は、以下のような感じで記述できます。

a[name] { background-color: #ffcccc; }

これは、「name属性のあるa要素」のみを対象にして、背景色を淡い赤色（#ffcccc）にする指定です。以下のようなHTMLが装飾対象になります。

<a name="apple">ここが装飾対象</a>

<a href="a.html">ここは非対象</a>

<a name="orange">ここも装飾対象</a>

<a href="b.html">ここは非対象</a>

上記のように、name属性の指定されているa要素のみが装飾対象になります。実際に表示させると、以下のように見えます。

左から、IE7、Firefox2、IE6 （※すべて標準モードでの描画時）

※IE6は属性セレクタに対応していないため、何も装飾されません。

属性セレクタの使用例２（値も指定する）

属性名だけでなく、属性に指定されている値も限定する場合は、次のように記述します。

a[target="_blank"] { font-style: italic; }

上記の場合は、a要素のうち「target属性に値 _blank が指定されているもの」のみ斜体で表示する…という指定になります。
「a要素のtarget属性に値 _blank を指定」すると、「リンク先を別ウインドウで開かせるリンク」になります。つまり、別のウインドウが開くリンクのみ斜体に装飾することになります。
例えば、以下のようなHTMLがあれば…

<a href="a.html" target="_top">これは対象外</a>

<a href="b.html" target="_blank">これは対象！</a>

最初のa要素（リンク）は対象外ですが、2つ目のa要素は条件に合致するので装飾対象になります。実際に表示させると、以下のように見えます。

左から、IE7、Firefox2、IE6 （※すべて標準モードでの描画時）

活用例と注意点

次のページでは、属性セレクタを有効に活用できるサンプルとして、入力フォームの楽な装飾方法をご紹介致します。
また、属性セレクタを使う上での注意点も掲載していますので、ご参照下さい。（この注意点を忘れると、IE7では属性セレクタが有効になりません。）

それでは、属性セレクタの活用例と注意点へ >>

回答募集中のトピック（お題）

BBQでウケる男料理はコレ！

外で過ごすのが気持ち良いこれからの季節。休日は野外で酒を片手にBBQにチャレンジしてみてはいかがだろう。BBQといえば肉と野菜を鉄板で焼くだけ、と思っている人にぜひチェックして欲しいのは、男の料理ガイド土屋敦氏による男子的簡単BBQレシピ。今回は山梨県の土屋邸に伺い、今一番おすすめのBBQレシピを実際に披露していただいた。さらに後半では、BBQに最適な土屋氏考案15レシピと、それぞれに合う酒も紹介。簡単で美味しく酒にも合う、まさに男子的BBQレシピを今すぐチェック！