CSS とは？

CSS とは？

CSS は、HTMLで記述された文書に対して「どのHTMLタグをどのような見た目にするか？」を指定するためのスタイルシート言語です（これはかなり簡略した説明です）。実際には、HTMLのタグ名だけでなく、タグの属性に対しても装飾を指定することができます。

HTMLによって文書の各要素に「意味・構造」を持たせた上で、その要素に対して「見た目」を指定するのが CSSです。HTMLとCSSで役割を分担することにより、メンテナンスがラクになります。

そして、HTML とは？ でも説明していますが、HTMLのタグと CSSの記述の両方を読み込んで、HTML文書に CSSの内容を反映してくれるのが「Webブラウザ」と呼ばれるアプリケーションです。具体的には、Chrome, Firefox, Edge, IE などがあります。これらのアプリケーションは、インターネット上から目的のWebページを閲覧する時に使用しますが、Webページを表示する度にこのような処理を行っているのです。

CSS の例

例えば、箇条書きしたいところをHTMLで以下のように書いたとします。

<ul class="foo">
  <li>晴れ</li>
  <li>曇り</li>
  <li>雨</li>
</ul>

これをこの画面にそのまま記述すると、以下のように表示されます。

—– ここから —–

• 晴れ
• 曇り
• 雨

—– ここまで —–

では、以下のようなCSSを記述した場合はどうでしょうか？
（ここでは詳しく説明しませんが、class属性に”foo”が指定された ul要素に対して見た目の定義を行っています）

ul.foo {
  list-style: none;
}
ul.foo {
  margin: 20px 0;
  padding: 1em 1em 1em 2em;
  background-color: #f9f9f9;
  border: solid 1px #eaeaea;
}
ul.foo > li:before {
  content: "●";
  color: orange;
  font-size: 50%;
  position: relative;
  bottom: 0.3em;
  right: 0.7em;
}

画像で申し訳ないのですが、以下のような表示になります。

このように、HTMLを変更することなく、CSSの指定だけで見た目を変えることができます。

CSS の仕様

CSS の仕様書はとてもたくさんあります。というのも、CSS には多くの機能があり、機能によって仕様書が分かれているからです。
以下のページで仕様書を一覧することができますが、いくつあるのかよく分からないくらいあります。

• CSS current work & how to participate
• All Standards and Drafts – W3C

詳しく知りたい方は、以下の文書から読むことをお勧めします。

• CSS 2.2 [FPWD] （日本語訳）