スタイルシートを使ってみよう！

Web Frontier » ウェブデザイン » スタイルシートの技 » スタイルシートを使ってみよう！

スタイルシートの技

スタイルシートを使ってみよう！

「スタイルシート」をこれから使ってみる人、ほとんど使った事の無い人のために、どのようにしてスタイルシートを扱うかを明記しておく事にします。スタイルシートを扱うには以下の３種類の手法があります。

style属性に記述する
head要素内にstyleタグを作成し、そこに記述する。
head要素内にlink要素で外部スタイルシートファイルを設定する

最も理想的で推奨されているのは3番だとされています。順番に見て行きましょう。以下のようなHTML文書があったとしましょう。「hr」というのは水平線（horizon）を表すものですが、例えば、「この水平線(hr)を赤色にして高さを1ピクセルにしたい」というのであれば、

<hr size="1" color="#ff0000">

今までは、このようにしていた方が多いと思います。「color」属性は「Internet Explorer」専用のものだったりして結構厄介なものです。その半面、スタイルシートを使いますと、そんな不安要素はなくなります。 簡単な例として、スタイルシートを使ってこの水平線(hr)を赤色にして高さを1ピクセルにしたいとします。

<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
   <meta http-equiv="content-style-type" content="text/css">
   <title>テスト</title>
</head>
<body>
   <h1>テスト</h1>
   <hr>
   <p>これはテスト文書です。</p>
</body>
</html>

1番の手法を用いると、次のようになります。ちょっとしたものならこちらがお手軽で初心者様にも分かりやすいと思います。

<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
   <meta http-equiv="content-style-type" content="text/css">
   <title>テスト</title>
</head>
<body>
   <h1>テスト</h1>
   <hr style="color: #ff0000; height: 1px;">
   <p>これはテスト文書です。</p>
</body>
</html>

つまり、hr要素の中のstyle属性に直接記述してしまう方法です。style属性は共通属性ですので、 hr要素に限らずほとんどの要素で利用できる属性です。この「color」は指定した場所の色を設定するスタイルシートです。「height」は領域の高さを指定するスタイルシートです。 「color」を専門用語では属性、「#ff0000」がその値に相当するので属性値と言います。これはしっかりと押さえておきましょう。続いて2番目の手法を用いると次のようになります。

<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
   <meta http-equiv="content-style-type" content="text/css">
   <title>テスト</title>
   <style type="text/css">
      hr {
         color: #ff0000;
         height: 1px;
      }
   </style>
</head>
<body>
   <h1>テスト</h1>
   <hr>
   <p>これはテスト文書です。</p>
</body>
</html>

こうする事で、hr要素に対して「color: #ff0000;」と「height: 1px;」が適応されます。

最後のスタイルシート用のファイルの方は、まず適当にエディタで、以下のようなファイルを作って「sample.css」というファイルにして保存して見て下さい。保存場所は今回は、HTMLファイルを保存しているフォルダと同じ所だとしておきます。「.css」はスタイルシートの最も良く使われている拡張子です。 スタイルシート内でコメントを書くときには、 C言語と同じで「/* ... */」で囲んでください。

sample.css

hr {
   color: #ff0000;
   height: 1px;
}

作成できたら保存して、HTMLファイルのhead部分に以下のように書いてみます。

<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
   <meta http-equiv="content-style-type" content="text/css">
   <link rel="stylesheet" href="sample.css" type="text/css">
   <title>テスト</title>
</head>
<body>
   <h1>テスト</h1>
   <hr>
   <p>これはテスト文書です。</p>
</body>
</html>

この3つの表現方法、実は優先度が存在します。例えば、外部スタイルシートには「color: #ff0000;」（赤色）を、 style属性に「color: #00ff00;」（緑色）を指定した場合にどうなると思いますか？答えから言ってしまうと緑色、つまりstyle属性が優先されます。上の番号で言うと、優先度は高い順に1→2→3となります。 同じ属性であれば優先度の高いものに上書きされますが、違う属性の場合にはスタイルシートは足し合わせた形になります。どうしても最優先させたいのであれば「!important」という記述をしますが、そのようなシチュエーションはまだ想定外で良いと思います。

なんとなくスタイルシートの使い方は分かりましたか？大雑把にスタイルシートの表現方法はこの3つを押さえておくと取りあえずは問題ありません。後は経験と知識を増やしていくと飛躍的にHTML+CSSの構築が楽しくなる事でしょう！

top