スタイルシートとは？

HTMLだけでは、ホームページのデザインを細かく指定することができません。これからは、CSSと言うものを使ってホームページを作ることが推奨されています。

CSSは Cascading Style Sheet （カスケーディング・スタイルシート）の略で、これを使うとホームページの見栄えを細かく指定することができます。例えば、CSSを使用すると↓のようなことができます。

これらのことは、文字だけでなく様々なものに使うことができます。

CSSはHTMLのように簡単に書くことができます。↓を見てください。

p {
font-size : 12pt
}

ちなみに見やすいように空白を入れています。これは、p要素のフォントサイズ（文字の大きさ）を１２ポイントに指定するCSSです。p要素で囲まれたすべての部分の文字サイズが１２ポイントになります。

pと書いている部分をセレクタ font-sizeの部分をプロパティ（HTMLでいう属性の部分）そして、12ptの部分を値（HTMLでいう属性値の部分）と言います。

セレクタにはどの要素に対してCSSを適応するかを書いて、 {～} の中にプロパティと値を書きます。

プロパティ・値を複数指定したいときは、 ; （セミコロン）で区切って指定します。下は、p要素のフォントサイズとフォントカラー（文字色）を指定してます。ソースはみやすいように改行してあります。

p {
font-size : 12pt;
color : red
}

次にCSSの指定方法を説明します。一番簡単な指定方法は、各要素の style属性に指定することでCSSが適応されます。

もう一つの指定方法は、head要素の中でCSSを宣言し、body要素の中で適応されるというものです。style要素を使用します。

このときCSSのタイプを指定しておく必要があります。style要素の type属性の属性値を text/css と指定しておきます。

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

<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
  <title>CSS</title>
  <style type="text/css">
  
  </style>
</head>

<body>
  <p>この部分の文字サイズは10ポイントになります。</p>
</body>

</html>

この指定方法だけでは、body要素内のすべてのp要素にCSSが適応してしまうので、もう一つ指定方法を説明します。

まず、↑のようにhead内でCSSの宣言をして、セレクタを指定するときに #半角英数字の名前でセレクタを指定するとidを宣言したことになります。

idを宣言し、今度はCSSを適応させたい要素の id属性で宣言した名前を指定すると、その部分にだけCSSが適応されて便利です。

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

<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
  <title>CSS</title>
  <style type="text/css">
  
  </style>
</head>

<body>
  <p id="aaa">この部分の文字サイズは10ポイントになります。</p>
</body>

</html>

↑のソースでは、aaaというid名でidを宣言し、p要素のid属性でCSSを適応させています。このほかにも同じような指定方法でクラスで指定することができます。

#の代わりに . で宣言し、各要素の class属性で名前を指定することによって適応することができます。

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

<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
  <title>CSS</title>
  <style type="text/css">
  
  </style>
</head>

<body>
  <p class="aaa">この部分の文字サイズは10ポイントになります。</p>
</body>

</html>