(cache) とほほのスタイルシート入門(基礎知識)

CSS は Cascading Style Sheets の略です。スタイルシートは、HTMLで記述された Webページの見栄え・スタイルを効率的に定義するための技術です。HTMLで文書の意味を定義し、CSSで見栄えを定義することにより、意味と見栄えを分離することが可能となります。

最も基本的なスタイルシートの使用例を下記に示します。この例では、<h1>～</h1> で囲まれたタイトル部が赤字で表示されます。「h1 { color: red; }」は、「h1 の部分の色(color)を赤(red)にする」という意味を持ちます。この例の「色」のような見栄えなどの情報を「スタイル」と呼びます。

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>CSSのテスト</title>
    <style type="text/css">
    <!--
    h1 { color: red; }
    -->
    </style>
  </head>
  <body>
    <h1>CSSとは</h1>
    <p>CSSはCascading Style Sheetsの略で・・・</p>
  </body>
</html>

スタイルシートの指定方法には下記のようなものがあります。

◆ style属性で指定する方法

h1 や div や span や p など、大半のタグに style属性を用いて指定することができます。下記の例では、<h1>～</h1> で囲まれた「CSSとは」の文字が赤字で表示されます。

<h1 style="color:red;">CSSとは</h1>

セミコロン( ; )で区切って、複数のスタイルを指定することも可能です。最後のスタイルのセミコロン( ; )は省略可能です。

<h1 style="color:red; font-size: 24pt;">CSSとは</h1>

◆ <style>～</style>で指定する方法

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>CSSのテスト</title>
    <style type="text/css">
    <!--
    h1 { color: red; }
    -->
    </style>
  </head>
  <body>
    <h1>CSSとは</h1>
    <p>CSSはCascading Style Sheetsの略で・・・</p>
  </body>
</html>

◆ <link>を用いた外部スタイルシートファイルで指定する方法

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>CSSのテスト</title>
  </head>
  <body>
    <h1>CSSとは</h1>
    <p>CSSはCascading Style Sheetsの略で・・・</p>
  </body>
</html>

外部スタイルシートファイル(style.css)には、次のように記述しておきます。ファイル名は何でもよいですが、拡張子は通常 .css とします。

h1 { color: red; }

◆ @importを用いた外部スタイルシートファイルで指定する方法

下記の様に @import を用いて外部スタイルシートファイルを読み込むことも可能です。

<style type="text/css">
@import url(style.css);
</style>

CSS2 では下記のような記法もサポートされました。

<style type="text/css">
@import "style.css";
</style>

CSS の基本動作は「○○要素の、○○というスタイルを、○○にする。」となります。例えば上記の例では、「h1要素の、色(color)スタイルを、赤(red)にする」となります。各用語の使い方を下記に示します。

<h1>～</h1> で囲まれた部分を h1要素(element)
<h1>～</h1> の～の部分を h1要素のコンテンツ(content)
<h1>～</h1> の <h1> の部分を h1要素の開始タグ(start tag)
<h1>～</h1> の </h1> の部分を h1要素の終了タグ(end tag)
h1 { color: red; } の h1 の部分をセレクタ(selector)
h1 { color: red; } の color:red; の部分を宣言(declaration)
h1 { color: red; } の color の部分を属性(property)
h1 { color: red; } の red の部分を値(value)

下の図のそれぞれの枠が要素(element)となります。html要素の中に head要素と body要素が、body要素の中に h1要素と p要素があるように、要素は親子関係を持ちます。

<html>

<head>

</head>

<body>

</body>

</html>

親要素に指定されたスタイルの多くは、子要素に継承されます。例えば、h1 { color: red; } と定義されている時、親要素である h1要素の color属性は、子要素である em要素に継承され、「いいい」の部分も赤くなります。

<h1>あああ<em>いいい</em>ううう</h1>

CSS2 では、大半のスタイルで、親のスタイルを継承することを意味する inherit という値がサポートされました。通常では継承されないスタイルを継承させたり、継承することを明示的に示したい場合、に使用されます。IE8、Firefox 2.0、Opera 9 などでサポートされています。例えば下記の例では、リンクテキストを親要素と同じ色で表示します。

a { color: inherit; }

セレクタには、スタイルを適用する対象となる要素を指定します。要素の指定は様々な方法があります。

h1 { color: red; }			/* h1要素に対して指定 */
h1, h2 { color: red; }			/* h1 と h2要素に対して指定 */
ul li { color: red; }			/* <ul>～</ul> の中にある li要素に対して指定 */
.sample { color: red; }			/* class="sample" を持つ要素に対して指定 */
#sample { color: red; }			/* id="sample" を持つ要素に対して指定 */
h1.sample { color: red; }		/* class="sample" を持つ div要素に対して指定 */
a:link { color: red; }			/* <a href="..."> のリンク(未訪問)に対して指定 */

詳細は「セレクタ」を参照してください。

/* と */ の間はコメントとして無視されます。

h1 { color:red; }    /* Red Color */

コメントを入れ子にすることはできません。下記は、誤ったコメントの使用例です。

/* h1 { color:red; }    /* Red Color */    */

ひとつの要素に相反するスタイルが指定された場合、適用されるスタイルの優先度は style属性、id指定、class指定、タグ指定の順になります。同じ優先度のスタイルが存在する場合は、後から定義されたものが優先されます。複数のクラスが指定される場合、class="c2 c1" の並びではなく、.c1 と .c2 で、後から定義されたものが優先されます。例えば、下記の例の優先度は、gray > yellow > blue > green > red > maroon の順となります。

<style type="text/css">
#z1 { color: blue; }    /* id指定 */
.c1 { color: red; }     /* class指定 */
.c2 { color: green; }   /* class指定(.c1より優先度が高い) */
h1 { color: maroon; }   /* タグ指定 */
</style>
   :
<h1 class="c2 c1" id="z1" style="color:yellow; color:gray;">CSSとは</h1>

! important を用いることにより、優先度を一番高めることができます。

<style type="text/css">
#z1 { color: blue; }    /* id指定 */
.c1 { color: red; }     /* class指定 */
.c2 { color: green; }   /* class指定 */
h1 { color: maroon ! important; }   /* タグ指定 */
</style>
   :
<h1 class="c2 c1" id="z1" style="color:yellow; color:gray;">CSSとは</h1>

HTML の height=100 や width=100 は単位を書きませんが、CSS では数値が 0 の時を除いて単位は必須です。長さの単位に関する詳細は <length> を参照してください。

スタイルシートを使用することのメリットには次のようなものがあります。

◆ 見栄えを一度に指定できる

すべての H1要素に <em>～</font> を指定してまわるよりも、スタイルシートで一度に指定した方が楽になります。外部ファイルで指定しておけば、より一層楽になります。

また、見栄えを外部ファイルに定義しておけば、それちょっと変更するだけで見栄えを一度に変更することができます。春には春のスタイルを、秋には秋のスタイルを適用してやることもできます。この時、class=red のようなクラス名だと、.red { color:blue; } などと変更した時に妙な気分になるので、class=pastoral のような、見栄えに影響しない名前をつけておくとよいそうです。

◆ 見栄えと意味を分離できる

Webページを自動収集して情報データベースを作成したり、目の見えない人が音声ブラウザでWebページを読む場合など、見栄えがあまり重要視されないケースもあります。見栄えを別のページで記述することにより、不要な見栄え情報を読み込んでくる煩わしさを解消することができます。

とほほのスタイルシート入門(基礎知識)

■ 目次

■ スタイルシートとは？

■ スタイルシートの例

■ スタイルシートの指定方法

◆ style属性で指定する方法

◆ <style>～</style>で指定する方法

◆ <link>を用いた外部スタイルシートファイルで指定する方法

◆ @importを用いた外部スタイルシートファイルで指定する方法

■ タグと要素とセレクタ

■ 継承

■ セレクタ

■ コメント

■ 優先度の制御(important)

■ 長さの単位

■ スタイルシートのメリット

◆ 見栄えを一度に指定できる

◆ 見栄えと意味を分離できる