blog

ホームページの作り方 htmlとcssを分ける理由

ホームページを作る時、文章構造はhtmlで装飾や配置はcssでそれぞれ指定するのが当たり前になってますが、これってちょっと面倒くさいですよね。なぜ別々に作るのでしょう。
それを知るために、ホームページの歴史を紐解いてみましょう。
実は初期のhtmlにはスタイルシートという概念は存在しませんでした。文章の構造も装飾もタグで全部行っていたのです。今ではだいぶ見られなくなった<b>(太文字指定)や<i>(イタリック体)など、装飾用のタグが色々ありました。さらに各ブラウザメーカーは、少しでも自社のブラウザを魅力的なものにしようと様々な独自タグを導入し始めました。
その結果「あるブラウザではきれいに見えるサイトが他のブラウザでは崩れて読めない」などの現象が頻発するようになりました。
そこでWEBの生みの親ティム・バーナーズ=リーなどを中心にWEBの標準化団体“W3C”が組織され、WEBの決まり事を提案し、業界全体でそれに準拠していくことを目指すことになりました。
スタイルシートもW3Cの提案の一つです。1996年にCSS1(Cascade Style Sheet1)として最初のスタイルシートが発表されましたが、当時はブラウザ側でスタイルシートをサポートしたものが無く理想論的なものとして扱われていました。
その状況が変わったのは2001年頃です。MozillaやOperaなどがCSSをサポートするようになります。さらに2006年にはInternet Explorer7等がCSSに完全に近い形で対応をするようになり以後は、現在の「文章構造はhtmlで、装飾や配置はcssで」がスタンダードになっていったのです。
さて、ではそもそも何故「文章構造はhtmlで、装飾や配置はcssで」と分ける必要があるのでしょう?
一番大きいのは「デバイス毎でベストな装飾や配置は違う」という点です。デバイス毎で最適化するには、装飾や配置はタグから切り離した方が効率的で見通しが良くなります。
htmlとcssを分けて作成するのは、一つの情報を閲覧環境に関わらず幅広く多くの人に少しでも快適に閲覧してもらえるようにするためなんですね。