HTMLとCSSの2つにわざわざ分ける理由って?

HTMLってそもそも何?

混同されがちなHTMLとCSSですが、そもそも持つ役割が全く違っています。HTMLとはハイパーテキストマークアップランゲージと呼ばれる、WEBページを構成することができる言語のうちのひとつです。 HTMLによって記述された文章を、コンピュータが読み込むと「これは見出し」「これは一段落の文章」「これは表だ」と認識することが可能であり、WEBブラウザで画面上に表示することが可能です。 しかし、HTMLの場合、そこに記述された文章やデータが、どんな要素かを示すことを目的としているので、白い背景に黒い文字が並ぶだけという、無味簡素な画面になってしまいます。色やサイズを始めとした、デザインを指示する言葉を追加してやることで、デザインの面でも見やすいWEBページが表現可能となるのです。 こうしてWEBページ制作の際は、HTMLの記述を駆使して、よりこだわったデザインのものを作り上げる文化が生まれました。しかし、本来のHTMLの役割は先に述べた通り、文章の要素を定義するものですので、全てをHTMLで表現することは適切ではないのです。

デザインを表現する役割を持つのがCSS

一方で、CSSはカスケーディングスタイルシートの略称で、WEBページのスタイル(デザイン)を指定するために生まれた言語です。 HTMLで最低限のデザインを実現することは可能ですが、前の段落の通り、それは言語の用い方としては適切とは言えませんし、デザインのための言語であるCSSの方が、より適切かつ複雑なデザインを構築することが可能です。 また、HTMLの内部にCSSを記述することもできます。しかし、全てのページにCSSを記述することは、大変な無駄です。まず、デザインの変更を行う時に、全てを書き換えなければならないという問題があり、また、読み込み速度などに影響を与える可能性があります。このため、HTMLは別に存在するCSSを読み込んで適用する、という手法が一般的になりました。