HTML と CSS の役割分担

構造と見栄えを別けよう、というお話。

内容と見栄えを分離させよう

HTML は HyperText Markup Language の略、つまり「文章に目印をつけていく言語」ということになります。「この文章は見出しで、これは箇条書きの文章で…」といった、文書の構造を示すわけです。

一方 CSS は、文書とは別に、文章の表現ルールを設定する仕組みです。「見出しはサイズを大きくして、太字にして…」といった、見栄えを制御していくわけです。

つまり、HTML と CSS で、その役割が別れているのです。

内容と見栄えは別けた方が便利

HTML と CSS (内容と見栄え) を別けて作るのと、一緒に作ってしまうのとでは、何が変わるのでしょうか。

まず、内容と見栄えを別けずサイトを作った場合。すべての見出しに font や center といった見栄えを指定する要素を使ったとすると、見出しのデザインを変えたくなったとき、それらを一つ一つ変更していかなくてはなりません。

また音声読み上げブラウザは、HTML の要素からその文章の意味を理解して読み方を変えるので、適切なマークアップのされていない HTML だと、キレイに読んでもらえません。

それでは、内容と見栄えを別けて作った場合はどうでしょうか。

HTML は、文章の構造をタグで表したのみで、見栄えに関する指定はいっさい書いていません。見栄えに関する指定はすべて CSS で行いました。

すると、デザインを変えたくなったときは HTML に触れることなく、CSS の記述を変更するだけですべてのページの見栄えが一斉に変えられます。文書の構造もしっかり指定してあるので、音声読み上げブラウザもそれぞれの文章の意味を理解して読み上げていきます。

HTML と CSS を別けることのメリットは、

  • メンテナンスがしやすい
  • アクセシビリティの向上

ということだと分かります。

結論 : HTML と CSS、内容と見栄えは別けて作る!

正しい HTML の書き方

それでは、正しい HTML を書くにはどうしたらよいでしょうか。

ここまでで分かったように、HTML では、見栄えの指定をいっさい行わず、文章の意味づけだけを行っていけばいいのです。

簡単なやり方としては、次のように HTML を書いていけばよいでしょう。

  1. HTML 4.01 の非推奨要素、非推奨属性、規格外要素は使わない。
  2. W3C Markup Validation ServiceAnother HTML-lint で、作った HTML が正しいか見てもらう。

DTD は必ずしも HTML 4.01 である必要はありませんが、最低でも HTML 4.01 の規格に沿って書けば見栄えを指定する要素はほぼ使えないので、自然と正しい HTML が書けるようになります。

HTML 文法チェッカは、どこをどのように直せばよいか教えてくれるので、指摘された箇所を直しながら、正しい HTML の書き方を覚えていきましょう。

正しい CSS の書き方

CSS にも、書き方のルールがあります。W3C CSS 検証サービスを使って、指摘された点を直していくとよいでしょう。