17.4.3 span 要素と div 要素

HTML には span 要素と div 要素というものが用意されています.これらは他の HTML の要素と同じようにという風に使いますが,これらの要素には特に意味がありません.ためしに次のようにソースに書いみると,何も変化しないことが分かります.

ソース

<span>東大太郎</span>の自己紹介

出力

東大太郎の自己紹介

この「意味のない」ということが CSS で重要な役割を果たします.例えば,文章構造としての意味を持たない単語にスタイルを指定したい場合などは,span 要素 +CSS を用いてスタイルを記述することが出来ます.また文書中の単語などに著者が独自に意味づけをする場合に,後述する class 属性と併用して使ったりします.

div 要素は span 要素と同じく意味のない要素ですが,span 要素がインライン要素なのに対して div 要素はブロックレベル要素です.

div 要素と span 要素は CSS を書く上でほとんど必須とも言えるものです.しかし使い方を誤ると CSS の利便性を失うことにもなりかねません.特に<span style=”…”>〜</span>という書き方は極めて局所的なものです.「本当にその部分固有のスタイルを指定するべきか」「もっと一般的な指定はできないか」ということを常に考えながら,使うようにしてください.