論理要素のススメ

なぜって？ スタイルシート（以下、CSS）を使ってレイアウト情報を記述していく際に楽だから。

W3C原理主義者に言わせると、論理タグを使ったマークアップの真の理由とは、 HTMLとは本来論理構造を記述していくためのものだから、より適切なマークアップのためには物理タグの使用なんて以ての外！ ってことなんでしょうが、知ったこっちゃありません。 いや、少しは考慮しますが・・・ 所詮道具なんですから便利だから使うんです。

CSSってレイアウトを記述するときに要素の種類が多いほど楽なんですよ。 使える要素の数が限られちゃうと、どうしても、望むレイアウトごとに 同じ要素をクラスによっていちいち場合別けしていかないといけなくなります。

例えば、フォントサイズを二段階大きくしたいときに、 中くらいの大きさ <span class="middle"> 〜 </span> マジ大きいとき <span class="large"> 〜 </span> と、いちいちClassで指定しないといかんので、めんどくさいです。

ここで論理要素の登場！ 都合よく強調という意味を持つ<em>と、さらに強調という<strong> いうタグがあるんで、こいつらを使ってやりましょう。 使用例は以下な感じで。

em {font-size:"2em";}
storong {font-size:"3em";}

これで、 殺す、<em>殺す</em>、<strong>殺ぉ〜す！</strong>と書いてやれば以下のように表示されます。

殺す、殺す、殺ぉ〜す！

元ネタは激打の名も無き街からです。 ほあっちゃぁぁぁあああ！　ぉあたぁぁぁ！ それはともかく楽です！ いちいちclass=""って書かんでいいです。

いや、ホントこういった理由で勧めるのは本当に間違っているんでしょうが、 文章として文字が書いてある以上そこには意味というか、文脈が存在するので、 だいたい対応する論理要素があります。

要素名	元ネタ（語源？）	意味
em	emphasis	強調
storong	storong	より強い強調
dfn	inatance definition	定義を強調
cite	citation	文献とか引用文
abbr	abbreviated form	略語
acronym	acronym	頭文字
code	code	ソースコード、プログラム
samp	sample	サンプル
var	variable	変数名
kbd	keyboard	入力する文字

こんなんがあるんでうまく使ってやってください。 やたらとマイナーな論理タグに愛の手を！

あっ、大概はインライン要素なのできっちり終了タグを書いてやる必要があります。 どこまでがその要素なのか明示してやらないと以後の文章に思いっきり適用され続けます。あわせてブロック要素をまたぐ指定も不可です。

ex. <p> 実は前からずっとオマエのことが好きだったんだ・・・（がばっ！） <em>タックルは腰から下</p> <p>うそ！</em>あなた本当は誰でもいいんでしょう？</p>

インライン要素である<em>〜</em>がブロックレベル要素である<p>〜</p>をまたいでいますね。却下です。でもIE5.5だとちゃんと表示されちゃいます・・・やるなMicrosoft下の例で確認してください。

実は前からずっとオマエのことが好きだったんだ・・・（がばっ！）タックルは腰から下

うそ！あなた本当は誰でもいいんでしょう？