munepi.com > Article > 良いHTMLの書き方〜CSS研究

良いHTMLの書き方〜CSS研究

HTMLは文書の構造だけを書こう

CSSはHTMLから「表示」に関する属性を分離したものです。例えば、色、フォント、背景画・背景色、下線や囲みの有無、 位置、配置などなどです。

それならばHTMLには何が残るのでしょうか。

それは、「文書」そのものです。もっと言えば、「文書と構造」でしょうか。

例えばH1タグは大見出し、H2タグは中見出し、 Pタグは段落で、TABLEは表です。実際、この程度あれば普通の文章は書けそうです。

でも、「構造」・・例えば、 ナビゲーション(サイト内の移動用リスト)やヘッダ、フッタがある場合には足りません。こういった場合にはDIVタグを使って囲み、ブロックを表します。

この状態でHTMLをブラウザにて表示してみると、 大変簡素ながら、内容を捉えやすい状態になっていることと思います。

ビジュアル機能のないブラウザ(w3mとか)では、 この状態で表示されることでしょう。音声ブラウザ(見たこと無いが)では、この文書を読んでくれるのでしょう。

しかし、一般に使われているビジュアルブラウザで表示させてもインパクトに欠けますし、 それでは訪問者へのアピールも弱っちぃのも事実です。

これを補う目的でCSSを併用するのです。

ビジュアル(CSS)のためのHTMLを書かない

WWWページをうまくHTMLとCSSに分けるコツは、「始めにビジュアルありき」にしないことでしょう。

HTMLタグの意味づけを自分なりに行っておき、 それを厳密に守ってHTMLドキュメントを書きます。そして、それをCSSを駆使してビジュアルインパクトのあるものに仕上げるのです。

タグの意味づけというのは、 「H1は文書の見出しとして、ドキュメントに一つだけ使う」 「H2はブロックの見出しとしてDIVの前に必ず付ける」とか、 「文の重要部分はEMで、特に強調したいところにはSTRONG」などというように HTMLのもともとの定義をより厳密にすると言う意味であり、 間違っても「赤い字はEMで」とか「Qで括ったら斜体」とかやってはいけません。

その他、もちろんレイアウトをTABLEタグを使うなんて以ての外であり、 FONT、I、Bなども使いません。これらは全てCSSで代替が可能であり、 また文書の構造という観点からは全く必要ないものです。

#表としてTABLEを使うのは○。

どうしても例外的に斜体にしたい場合は、 SPANというのが使えますが、私は好きではありません。

非推奨要素を使わない

こういった方針をうまく守るもう一つのコツは、 HTML4.0で「非推奨要素」となっているタグ・属性を使わないことです。

非推奨要素を排除していくと、 自動的に上で書いたようなことが実現されてしまうので、 とっても楽(?)です。

また、「DTD」も書きましょう。DTDとはHTMLにはどんなタグがあってどんな属性をもっているかを定義するもので、 いくつかのバリエーションが標準規格として定められています。

バリエーションはタグや属性の使用可否の厳しさによっていて、 非推奨要素を使わないと決めたなら「Strict DTD」がオススメです。

Strict DTDを使うには、HTMLの最初の行に次のように書きます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">

そういう私は、インラインフレーム(IFRAME)を使いたかったため(広告のため)、 不本意ながらTransitional DTDにしております(^^ゞ

非推奨要素のないHTML + CSS

まとめれば、非推奨要素を使わずに、読みやすい文書構造を持ったHTMLを書き、それをCSSでビジュアルインパクトのあるものに仕上げるということになりそうです。

ところで、どのタグが非推奨要素なのかを調べるのはなかなか大変です。W3Cの定義とか見ればいいかも知れませんが、いちいちやってられません。

特にCSSを駆使したHTMLドキュメントを書こうとするとどうしても手書きになってしまうので、 HTMLタグのリストがあると便利です。

そこで、オススメは参考文献にあげた辞典です。HTMLタグとDTD定義、CSS命令が網羅されておりとても使いでのある良書ですよ。

参考文献

{http://images.amazon.com/images/P/4798000272.09.TZZZZZZZ.jpg|http://www.amazon.co.jp/exec/obidos/ASIN/4798000272/munepicom-22} 詳解HTML&スタイルシート辞典岡蔵龍一 著

HTMLとスタイルシートがみっちり詰まったリファレンスです。ジャンル毎に分類してあって使いやすく、 またCSSの理念に沿った解説がなされていて、 今後のHTMLをどう組み立てるべきかの参考にもなります。