HTML と CSS の役割分担

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

• 内容と見栄えを分離させよう
• 内容と見栄えは別けた方が便利
• 正しい HTML の書き方
• 正しい CSS の書き方

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

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

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

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

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

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

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

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

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

HTML は、文章の構造をタグで表したのみで、見栄えに関する指定は一切書いていない。見栄えに関する指定は全て CSS で行っており、link 要素で CSS ファイルを読み込んでいる。

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

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

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

ということだと分かる。

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

正しい HTML の書き方

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

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

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

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

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

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

正しい CSS の書き方

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