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

最終更新：2019-12-17 スタート：2019-12-17

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

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

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

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

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

.red {color:red;}

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

[red] {color:red;}

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

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

CSS

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

[box] {border:solid 1px gray; text-align:center; margin:auto;}
[b-pink] {background-color:#fdd;}
[b-sky] {background-color:#cff;}
[w640] {width:640px;}
[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';}

HTML

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

表示

あいうえお

HTML

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

表示

かきくけこ

HTML

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

表示

さしすせそ

たちつてと

HTML

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

表示

なにぬねの

はひふへほ

HTML

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

表示

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

ページの先頭へ