スタイルシートで何が変わる?

HTMLで意味付けを

HTMLは文章やブロックをマークアップすることで、意味を持たせる役割がある。例えば、このページの見出し「スタイルシートで何が変わる?」は、ブラウザにとっては、ただの文章でしかない。それを次のようにマークアップしてみる。

<h1>スタイルシートで何が変わる?</h1>

こうすると、ブラウザはこの文章がページの見出しだと理解する。ブラウザは<h1></h1>でマークアップされた文章は見出しだから、文字を大きく表示する。だから、スタイルイシートを設定する前の見出し1はとても大きいのだ。

スタイルシートでデザインをコントロール

スタイルシートという仕組みが出来るまでは、HTMLでデザインをコントロールするしか出来なかった。例えば、もちろん今でもつかえるが<font></font>というHTML要素がある。これは文字の大きさや色をコントロールする要素。この仕組みはHTMLの意味付けするという役割とは違う役目を果たす。つまり、「この文章の文字の大きさは大で、色は青色」と指定する<font></font>は、意味付けではなくて、見た目のデザインをコントロールするということ。そこで、生まれたのがスタイルシートという考え方。HTMLは意味付けを、スタイルシートはデザインのコントロールを。二つに分けることで、いろいろな利点が生まれた訳だ。