CSSはウェブサイトの“装飾”担当

CSSが必要な理由とは

そもそも、なぜCSSがウェブサイトには必要なのでしょうか。
CSSを使わずHTMLだけで作成すると、文字と画像が並んだだけのウェブサイトができてしまいます。装飾がないため単調で簡易的な表示になってしまうのです。しかし、これにCSSを適用することでレイアウトが整って、見た目がわかりやすく整理されたウェブサイトに仕上げることができます。
実はHTMLだけでもレイアウトを整えたり、フォントを指定したり、色や大きさを変えることは可能でした。ウェブサイトの閲覧に使用するウェブブラウザは年々高機能となっていき、ウェブの発展にともなって本来の使用目的以外でも文字の太さや色の変更、画像の大きさの変更、背景の色や画像の指定など、様々なことがHTMLで実現可能となりました。しかし、HTMLはウェブサイトに表示する文章や画像などの構造を記述したり、ウェブページの論理的な構造をマークアップしてそれぞれの情報をコンピューターが理解できるようにするための言語です。そこに装飾するための情報を入れ込むことは、本来HTMLがもつ役割とは全く異なるコードを追加することとなり、それによってコードが長く読みにくくなり、さらには文書構造の整合性が損なわれてしまう場合もあります。HTMLに装飾のためのマークアップを加えると、コンピューターやサーチエンジンに理解されにくいHTMLとなってしまい、デメリットが生まれてしまいます。これはウェブサイトを閲覧、制作、メンテナンスをしていく人間にとっても、コードを処理するコンピューターにとっても理解しにくいHTMLになってしまうということです。
また、何も装飾されていないHTMLは表示するウェブブラウザによって見た目が大きく異なります。例えば、同じHTMLをGoogle Chromeで開くと文字がゴシック体で表示されるのに対して、Safariでは明朝体で表示されます。余白の大きさや文字の基本サイズも異なるため、まったく別のサイトのように見えてしまいます。このようなウェブブラウザ毎の表示の差を埋めるためにHTMLの中に装飾を加えていくと、さらにコードの見づらさ、複雑さ、そして容量の増大を招くこととなり、メリットは微塵も生まれません。
こうした理由から徐々にHTMLとデザインを分けて記述する流れが生まれてきました。その流れをうけて実際にHTMLとデザインを分離するためにスタイルシートという考えができ、現在のようにHTMLファイルとCSSファイルを別々に記述し、管理していく手法が全世界に浸透していったのです。