チュートリアル

スタイルシートの構成


<html>

<head>

  <title>TMYK's ホームページ</title>

</head>


<body>

  <h1>TMYK's ホームページ</h1>

  <p>TOM、MOT、YAN、KIMたちは、やまびこのふえを手に入れた。

</body> 

</html>

h1要素の文字色(colorプロパティ)を青に設定するには、以下のようなCSS規則を用います。


h1 {color:blue;}

CSS規則は、セレクタ「h1」及び宣言「color:blue」という2つの主要な部分から構成されます。更に宣言は、プロパティ「color」及び値「blue」から構成されます。


セレクタ {宣言}

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

スタイルシートの記述

スタイルシートをHTML文書に埋め込むにはstyle要素を利用します。


<html>

<head>

  <title>TMYK's ホームページ</title>

  <style type="text/css"><!-- 

  h1 { color: blue }

  --></style>

</head>


<body>

  <h1>TMYK's ホームページ</h1>

  <p>TOM、MOT、YAN、KIMたちは、やまびこのふえを手に入れた。

</body>

</html>

「」はstyle要素に対応していないブラウザからスタイルシートの記述を隠すための記述です。

外部スタイルシートの利用

CSS2では、柔軟性のある外部スタイルシートを推奨しています。そうすればひとつひとつのHTML文書をいちいち編集することなく、1つのスタイルシートを編集するだけで複数の文書に一度にスタイルを適用することができます。

外部スタイルシートにリンクするには、link要素を用います。


<html>

<head>

  <title>TMYK's ホームページ</title>

  <link rel="stylesheet" href="tmyk.css" type="text/css">

</head>



<body>

  <h1>TMYK's ホームページ</h1>

  <p>TOM、MOT、YAN、KIMたちは、やまびこのふえを手に入れた。

</body>

</html>

テキストファイル「tmyk.css」に下記のように記述することでスタイルシートが適用されます。


h1 {color:blue}

link要素が示しているのは以下の事項です。

リンクの種類が「stylesheet」であること。
スタイルシートの所在がhref属性の指定先であること。
リンクされているスタイルシートの種類(MIMEタイプ)が「text/css」であること。

さらに文字色を追加してみます

更にbody要素に文字色(colorプロパティ)を追加してみます。


<html>

<head>

  <title>TMYK's ホームページ</title>

  <style type="text/css"><!--

  body { color: red }

  h1 { color: blue }

  --></style>

</head>



<body>

  <h1>TMYK's ホームページ</h1>

  <p>TOM、MOT、YAN、KIMたちは、やまびこのふえを手に入れた。

</body>

</html>

この例では、スタイルシートに2つの規則が含まれています。前者はbody要素の文字色を赤に設定し、後者はh1要素の文字色を青に設定しています。p要素には文字色が設定されていないので、親要素、すなわちbody要素の値を継承することになります。h1要素もbody要素の子要素ですが、後者の規則がその継承値を上書きします。

さらにいろいろ追加してみます

その他のプロパティも見てみましょう。


<html>

<head>

  <title>TMYK's ホームページ</title>

  <style type="text/css"><!--

  body {

  font-family: "ＭＳ Ｐゴシック", sans-serif;

  font-size: 12pt;

  margin: 3em;

  }

  --></style>

</head>



<body>

  <h1>TMYK's ホームページ</h1>

  <p>TOM、MOT、YAN、KIMたちは、やまびこのふえを手に入れた。

</body>

</html>

複数の宣言が中括弧のブロック内にまとめてあることにお気づきでしょう。更に個々の宣言はセミコロン[;]で区切られています。

body要素に設定された最初の宣言は、フォントの種類を"ＭＳＰゴシック"に設定しています。このフォントが入手できない場合、ブラウザはsans-serifという汎用ファミリ(<generic family>)を使用します。汎用ファミリとはどのようなブラウザにおいても認識される5つのフォントファミリのことです。body要素の子要素はfont-familyプロパティを継承します。

2つ目の宣言は、body要素のフォントサイズを'12pt'に設定しています。この[pt]という単位は、印刷を主とした組版において、フォントサイズやその他の長さを示す時に一般に用いられる単位です。この単位は、絶対単位の一例です。

3つ目の宣言では、相対単位が用いられています。[em]という単位は、当該要素の文字サイズを参照します。この場合、body要素の周囲にできるマージンは、文字サイズの3倍幅を取ることになります。

style属性を利用したスタイルシートの記述

HTML、XHTMLでは、スタイルを適用したい要素にstyle属性を指定し、その値として直接スタイルシートを記述することもできます。


<html>

<head>

  <title>TMYK's ホームページ</title>

</head>



<body>

  <h1 style="color:blue">TMYK's ホームページ</h1>

  <p>TOM、MOT、YAN、KIMたちは、やまびこのふえを手に入れた。

</body>

</html>

XHTML1.1では、style属性は非推奨とされています。