属性を使ってすっきり | HTMLの部品 | 情報・デジタルの部屋

　CSSで使用するセレクタには，要素型セレクタ，クラスセレクタ，idセレクタなどがあって，それぞれよく使われています。それらに対して使用頻度は低いように思われる属性セレクタですが，うまく使うとHTMLの記述が簡素化されます。たとえば次の例ですが，一般的なクラスセレクタを使った場合のHTMLは，

<span class="red">赤い字です</span>

というよなかたちになりますが，クラスセレクタの代わりに属性セレクタを使うと，

<span red>赤い字です</span>

というように，すっきりします。
　一方CSSですが，クラスセレクタの場合は

.red {color:red;}

で，属性セレクタの場合は

[red] {color:red;}

ですから，ほとんど違いはありません。

　いくつか簡単な例を紹介します。

用いたCSS

　ほとんどは簡単なCSSですが，最後の例は少し特殊ですので，例5で説明します。

[box] {border:solid 1px gray; text-align:center; margin:auto;}
[b-pink] {background-color:#fdd;}
[b-sky] {background-color:#cff;}
[w480] {width:480px;}
[w320] {width:320px;}
[red] {color:red;}
[grn] {color:green;}
[l-rd1] {border-top:solid red 1px; margin:auto;}
[l-gr2] {border-top:solid green 2px; margin:auto;}
[ml]::before {content:'neko' attr(ml) 'animal.ne.jp';}

例1

HTML

<div box b-pink w480>
 <span grn>あいうえお</span>
</div>

表示

あいうえお

例2

HTML

<div box b-sky w320>
 <span red>かきくけこ</span>
</div>

表示

かきくけこ

例3

HTML

さしすせそ
<hr l-gr2>
たちつてと

表示
さしすせそ

たちつてと

例4

HTML

<div box w480>
  なにぬねの
  <hr l-rd1 w320>
  はひふへほ
</div>

表示

なにぬねの

はひふへほ

例5

　迷惑メール対策として，メールアドレスをテキストデータで記述せずに画像で表示する方法などが用いられることがありますが，HTMLファイルで@だけを属性mlの値として記述し，その他はCSSに置くという方法を紹介します。表示されたメールアドレスはテキストデータですが，コピーはできません。

HTML

<span ml="@"></span>

表示

ページの先頭へ