CSSとは

これまで、Webページを作成するための文書記述言語である HTMLについて学習してきました。 HTMLで記述した文書は、Webブラウザで読みこみ、表示させると、 その要素によって、形式が変わりました。 例えば、h1などの見出し要素では文字が大きくなったり、 ハイパーリンクをつくる a要素では下線が引かれたりなどが、 その典型例です。

そのため、皆さんはこのような 「Webブラウザでの表示に変化をつけること」がHTMLの働きである と思っているかもしれませんね。ところが、実はそうではないのです。

HTMLの働きは、 「文書中の意味の塊(かたまり)を明確にし、文書を構造化すること」 です。その結果として、Webブラウザで表示させると、 その構造が決められた規則で表示されるようになっているのです。

ですから、HTMLを作成しているときには、 Webブラウザでの表示される「見栄え」を気にする必要はないのです。 別な言い方をすると、皆さんが作成される文書の「見栄え」を良くする機能は、 HTML自身には備わっていないため、 「見栄え」を気にしてもどうしようもないのです。

と言っても、Webページはいくら内容が良くても、見栄えがある程度良くないと、 誰も見てくれないですよね。そこで、文書の構造とは別に、 HTML文書の「見栄え」を専用の規則で指定することができるようになっています。 この HTML文書の見栄えを指定する規則を記述する文書のことを Cascading Style Sheet (CSS) と呼びます。

このCSSで指示を行なうことにより、 HTMLにより構造化された文書を、 その構造ごとにWebブラウザで表示する仕方を細かく設定することができるようになります。

CSSは、 構造化された文書であるHTML文書に対し、文字飾り(文字の色や大きさ)や、 ページのレイアウトなどを行なうスタイル規則を集めた文書 です。 つまり、CSSで行なうことは、ワードプロセッサにおける「書式」設定のような事です。

ところで、ワードプロセッサで、文字の大きさなど変えるときは、 専用の画面 (ツール)で行なう必要があります。 下図は、StarSuite Writer で、文字の書式を設定するダイアログです。

これに対して、HTMLのWebブラウザでの表示スタイルを規定する CSSは、HTMLと同じように、文字だけで記述することができます。 ですから、 専用の画面 (ツール)で行なう必要はなく、 秀丸エディタなどのテキストエディタで規則を記述する ことになります。

CSSでのスタイルは、HTMLの要素ごとに設定します。 ですから、基本的には、 「HTMLの要素名」「設定したい項目名」「設定項目の内容」 の3つの組み合わせでスタイルを設定することになります。

例えば、「(見出しを作る) h1要素」で記述する内容の「文字の色」を 「青色」にしたいときには、以下のようになります。

1. HTMLの要素名 (→ h1)
2. 設定したい項目名 (文字の色→ color)
3. 設定項目の内容 (青色→ blue)

これらを、CSSでは、以下のような形式で書きます。

h1  { color: blue; }

これらを、CSSではそれぞれ以下のように呼びます。

1. セレクタ (スタイルを適用する対象となるHTMLの要素名)
2. プロパティ (そのセレクタに、どのようなスタイルを与えるかを指定する項目名)
3. 値 (プロパティに指定する値)

ですから、一般的に CSSでは、以下の形式でスタイルを指定することになります。

セレクタ  { プロパティ: 値; }

CSSの形式に関して、以下の規則がありますので 上のCSSの一般的なスタイル指定形式を見ながら確認して下さい。

• すべて半角文字で記述します。
• プロパティ(設定項目)と その値は、 {   }で囲みます。
• プロパティとその値の間には : (コロン)を入れます。
  

  基盤的情報処理論では、プロパティの後に 空白を置かず : (コロン)をつけることにします。 これは、書式を統一して見やすくするためと、 : (コロン)を忘れないようにするためです。

• プロパティに対応する値の記述が終ったら、; (セミコロン)をつけます。
  複数の値を設定できるプロパティでは、 それぞれの値を半角空白を入れて区切り、 すべての値を記述した最後に1個だけ ; (セミコロン)をつけます。

  以下の例は、h1というセクタの、 borderという(境界線を指定する)プロパティに、 2px(線の太さ)、dotted(線の形状)、red(線の色)の３つの値を 指定しています。それぞれの値は、半角空白で区切られ、 最後に; (セミコロン)が一つ付いていますね。 (borderプロパティについての説明は、次回行ないますので、 ここではその程度の理解で十分です。)

  h1 { border: 2px dotted red; }

• 一つのセレクタ (HTMLの要素名)に対して、 複数のプロパティ(設定項目)を指定することができます。
  

  以下の例は、h1というセレクタに、文字の色 (青色)と、 文字の大きさ(1.2em : 通常文字の大きさの1.2倍の意味)という 2つのプロパティを設定しています。

  h1 { color: blue;  font-size: 1.2em; }

• CSSファイルの中には、HTMLファイルと同様、 半角空白、TAB、改行などを自由に入れることができます。 ただし、セレクタやプロパティ及びその値の文字列に、 それらを入れることはできません。

  以下の２つのCSSは、全く同じ働きをします。どちらが分りやすいですか？

  h1
  
              {
                                                                          color:
                          blue;
                                                              }

  h1 { color: blue; }