スタイルシートってなに？

前回の「HTML タグってなに？」という話で、文字（文章）に意味をつけるためにHTMLタグを使うと解説を行いました。また、「HPってなんでできてるの？」では見た目に関する指定を「文字の意味を付ける文字」、すなわちHTMLタグに対して行うことができると説明をしました。ここまで読んでくれた方は「ではどうやって、見た目に関する指定を行えばいいの？」と当然思われるでしょう。その答えはCSS【Cascading Style Sheet】と呼ばれるものなのです。CSSを使用することにより、本文とは別に見た目のルールを設定することができます。もっと正確に言えば、HTML文書の見た目を設定したければCSSを使用することとなります。

そればかりではありません。CSSを外部ファイルとして保存することにより、WEBサイト全体で統一した見た目を実現することも可能ですし、一度作成した見た目を修正することも簡単となります。早い話が、CSSを使って文書のコンテンツや論理構造と表現のルールを分離することによって、さまざまなメリットがうまれるというわけです。ただ、こちらではわかりやすく「見た目」と言うことで表現をしていますが、CSSは文章のスタイルを指定するものですので視覚表現だけを表すのではありません。

ここでスタイルシートに話を戻しましょう。スタイルシートはHTML文書に限って言えば、「HTML文書を整形するための過程」と言うことになっています。HTML文書内のある特定の要素に対して、Webブラウザが見た目を整形することがあります。この整形の過程を指してスタイルシートと呼ぶのです。また、CSSを使用した際も見た目を整形できますので、CSSを使うと言うことも広い意味でのスタイルシートと言うことになります。ただし、世間一般で（誤った意味で）使われているスタイルシートはCSSを指すことが多いようです。CSSはあくまでスタイルシートの1種でしかありません。意味を間違えないようしっかりと使い分けてください。

では、実際CSSの記述方法について見ていきましょう。まずは書き方と用語の定義からです。

p {color: #0000ff; font-size: 20px;}
セレクタ プロパティ 値 プロパティ 値
宣言

例として要素名「P」（段落を表すHTMLタグです）の文字色を「#0000ff」（青色）、文字の大きさを「20px」のように表示するCSSについて見てみましょう。

最初の「p」（要素名）のことをセレクタ（Selector）と呼び、見た目（スタイル）を適用する対象を記述します。そして、「{」と「}」で囲まれた範囲を宣言（Declaration）と呼びます。宣言の中にはプロパティとその値をコロン（ : ）で区切って記述します。プロパティと値のペアはセミコロン（ ; ）で区切って複数記述することもできます。

書き方は以上なのですが、次に気になるのが「どこにこんなもの書くの？」ってことでしょう。用語と書き方をマスターしても記述する場所が分からないことにはどうしようもありませんよね。その答えは大きく分けて３つあるので順番に見ていくことにしましょう。

外部ファイルに記述する方法

CSSの定義部分（セレクタと宣言）を必要なだけ列挙し、別のファイルに記述することができます。つまり、別のファイルに記述したCSSの定義（見た目）を複数のHTMLファイルから読み込む事もできる、ということになります。

例えば、サイト全体で共通した見た目を定義したCSSファイルを用意したとしましょう。全てのHTMLファイルからそのファイルを参照するようにしておけば、サイト全体の見た目を簡単に統一することができますよね。それだけではなく、その定義ファイルを変更するだけでサイト全体の見た目を一括変更することも可能になります。

実際、外部CSSファイルを作成してみましょう。通常、外部ファイルにCSSを記述した際は「.css」という拡張子をつけて保存します。次のようなテキストファイルを作成し、「sample.css」と名前を変更して保存して下さい。

p {
    color : #0000ff ;
    font-size : 20px ;
}

そしてこの外部ファイル（sample.css）を反映させるためには、次のようにHTMLファイルに記述します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  <a href="sample.css" link rel="stylesheet" type="text/css">
  <title></title>
 </head>
 <body>
 
 </body>
</html>

「sample.css」の部分は相対パス又は絶対パスにて記述して下さい。

HEAD 内に記述する方法

「head」要素の中に「style」要素を加えてスタイルを記述することもできます。それにより、HTML文書全体を通して共通のスタイルを設定することができます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>

  <style type="text/css">
    <!--
      p {
        color : #0000ff ;
        font-size : 20px ;
      }
    -->
  </style>

  <title></title>
 </head>
 <body>
 
 </body>
</html>

個々に記述する方法

個々のタグ内に「style」属性として見た目（スタイル）に関する情報を指定することもできます。個々に見た目を指定しますので、同じ種類のタグ（要素タイプ）でも他の場所にあるタグ（要素）にはその見た目が反映されることはありません。また、見た目（スタイル）を適用する対象は明らかなので、セレクタは記述せず、宣言のみを記述します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  <title></title>
 </head>
 <body>
<p style="color:#0000ff;font-size:20px;">
ここの段落にスタイルが適用されます。
</p>
 </body>
</html>

上記の「外部ファイルに記述する方法」「HEAD 内に記述する方法」はとても便利な方法ですが、今回紹介した方法ですとサイト内の全ての「Pタグ（要素）」もしくはそのページ内の全ての「Pタグ（要素）」に対して同一の見た目（スタイル）が反映されてしまいます。これではあまり使い勝手がよくないですよね。そこで、それぞれのタグ（要素）をグループ分けするような感覚で見た目（スタイル）を指定することができる方法を紹介しましょう。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  <style type="text/css">
    <!--
      p.sample1 {
        color : #0000ff ;
        font-size : 20px ;
      }
      p.sample2 {
        color : #ff0000 ;
        font-size : 10px ;
      }
    -->
  </style>
  <title></title>
 </head>
 <body>
<p class="sample1">段落１の内容</p>
<p class="sample2">段落２の内容</p>
 </body>
</html>

上記のように、セレクタでクラスによる指定をするためには「要素名.クラス名」のように、ピリオドの後ろにクラスの名前を記述します。要素タイプ名を省略して「.クラス名」のようにすると、全ての要素タイプに共通のクラスを設定することもできます。

さまざまなメリット
Webサイト全体で統一したデザインを適用できる
複数ページの見た目を一括管理することにより、メンテナンスの効率が向上する
見る人の環境ごとに異なるスタイルを設定することもできる
HTMLタグだけでは表せなかった細かな見た目まで設定できる
HTMLタグが本来の役割に徹することにより、作者、読者ともに利用しやすいものになる