HTML講座 - スタイルシート

スタイルシート

さて、このCSS編ではCSSについて解説するのですが、そもそもCSSとはなんでしょう。

CSSとは、Cascading Style Sheetsの略のことで、これは実はスタイルシート（Style Sheets）の一種なのです。

今回題名にもなっているこのスタイルシートですが、HTMLや、その他にもXMLという形式で書かれた文書などの見栄えを記述するものです。

HTMLと組み合わせる場合は、スタイルシートの一種であるCSSが圧倒的に広く使われているので、この講座でもCSSを解説します。

HTMLの役割とCSSの役割

CSSをHTMLで使用する場合は、CSSは文書の見栄えを担当します。逆に、HTMLが担当するのが構造です。

この話はHTML編 2-3:マークアップとHTMLの理念でもしましたが、HTMLそのものは構造しか記述しないのです。具体的には、次のような感じです。


<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>テスト</test>
  </head>
  <body>
    <h1>見出し</h1>
    <p>段落</p>
  </body>
</html>

この文書は、見出しひとつと段落ひとつがあるだけの簡単なHTML文書です。これらはHTMLの構造です。そして、この文書のどこにも、「文字は何色で」とか「大きさはこれくらいで」とか書いていません。それは、それらがCSSの範疇だからです。

ひと昔前のHTMLを見てみましょう。これはHTML4.01文書です。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
  <HEAD>
    <META http-equiv="content-type" content="text/html; charset=UTF-8">
    <TITLE>テスト</TITLE>
  </HEAD>
  <BODY>
    <H1><FONT color="red">赤い見出し</FONT></H1>
    <P><FONT color="blue" size="+2">青くて大きい段落</FONT></P>
  </BODY>
</HTML>

FONT要素という見慣れない要素があります。この要素は、ずばり「文字の色や大きさを指定する」という要素なのです。

ところが、HTML5では、HTMLにそぐわない要素であるとして廃止されました（ちなみにこれらは、HTML4.01の段階ですでに非推奨となっていました）。

つまりどういうことかというと、文字の色が変わろうと大きさが変わろうと、見た目が変わっただけで文書の意味は変化しないのです。だから、HTMLにはいらない要素なのです。

逆に、段落とか見出しとかは、有るのと無いのでは意味が違います。だから、HTMLで表現するのです。そして、見た目が違っても意味は変わらないので、そういった部分はCSSで表現すべきだということになるのです。

さて、これで、CSSの意味について紹介しました。いよいよ次回からCSSの書き方を紹介します。