HTMLとCSSは体と服くらい違う

いまいちHTMLとCSSの違いがわからないという方のための解説ページです。

HTMLは文書構造を示す技術で、CSSは文書の体裁を示す技術なのですが、初めての方はイメージしにくいかもしれません。

HTMLとCSSの違いがよく理解できている人は、このページは飛ばしてください。

HTMLやCSSは、ウェブページに限った技術ではありませんが、ここではウェブページについて解説しています。

昔はHTMLとCSSは分離されていなかった

HTMLとCSSの違いがわかりにくいのには原因があります。

実は、昔はHTMLとCSSを特に区別していなかったそうです。

10年以上前から、文書構造とスタイルを分離しようという提唱がされてはいたものの、実際にはHTMLにスタイルが混在していたようです。

		
			昔のスタイル

このように、文書構造以外を示すcenterタグやfontタグなどがHTMLに存在し、一般的に見た目を示す技術として使われていたようです。

これらのタグはHTML5では廃止されているようですが、ブラウザでは機能するようです。

おそらく、ウェブが普及し、HTMLが普及し、そして見た目を良くする技術の需要が高まったが、いまいちCSSの普及が追いつかなかったのだと思います。

HTMLでも色を変えられるし、文字も大きくできるので、それでいいじゃないという風潮だったかもしれません。一方でブラウザの対応の問題もあったかもしれません。

いずれにせよ、過去には文書構造とスタイルを特に区別していなかったということが、HTMLとCSSの違いを曖昧にした原因のひとつだといえます。

さらにウェブは進化し、企業などもウェブサイトを持つようになりました。

そうなってくるとウェブページは一気に複雑化し、効率化のためにウェブデザインは分業され、文書構造とスタイルを分離する需要が高まり、またブラウザのCSS対応も追いついてきた結果、現在ではウェブコンテンツにおいて文書構造とスタイルを分離するのは一般的になりました。

HTMLとCSSの違いがはっきりしないのは、つまり文書構造（HTML）と文書スタイル（CSS）の違いがはっきりしていないと思うので、それぞれの違いを簡単に説明しておきます。

文書構造というのは、文書内のそれぞれの文字や文に対して、タイトルであるとか、見出しであるとか、段落であるとか、強調文であるとか、そういった文書上の役割を示すものです。

単なる文章とは違い、文書内の文章にはそれぞれ文書上の役割があり、それを示すのがHTMLなのです。

一方で文書スタイルというのは、見た目やデザインを示すものです。見出しかどうかではなく、赤か青かを示します。大きさや位置なども文書スタイルで示します。

ただし、HTMLだけのファイルでもブラウザはスタイルを表現してしまいます。例えば見出しを示すh1はスタイルを指定しないでも、ブラウザが勝手に大きく太く表現します。このようなデフォルトのスタイルもHTMLとCSSの違いを曖昧にしているかも知れません。

HTMLとCSSの違いはわかったけど、では具体的にその違いをはっきりすることで、どんなメリットが生まれるのでしょうか。

例えるなら、文書構造は肉体、文書スタイルは洋服です。これらを分離しないということは、体にマジックで洋服の絵を書くようなものです。

デザイナーが上手に洋服の絵を描いたとします。すばらしいのでまた使おうと思ってコピーすると、肉体まで複製されてしまいます。

ところが洋服として分離させておくと、洋服だけ複製して他の肉体に着せることができるのです。

肉体の方も、色んな洋服を着用することで、浴衣で花火に行ったり、水着でプールに行ったりすることが可能になります。

この例えを実際にウェブページに当てはめると、ボタンのスタイルを複数のページに適用できたり、ページの見た目を閲覧者によって変えることが簡単になります。