スタイルシートの基本

この項では、スタイルシートの基本について説明します。

1.基本の書式

スタイルシートは、タグなどの要素を対象に、細かい指定をすることができます。
スタイルシートはは、.cssという拡張子で保存します。

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

というのが基本的な書式となります。
これらは全て、基本的に半角で書きます。

セレクタとは、タグなどの名前のことで、ここで指定したタグに対しての設定を指定することができます。
複数のセレクタに対して指定をしたい場合は、カンマ（,）をセレクタ名の間に入れます。

プロパティとは、セレクタで指定した要素に対して適用するスタイルの種類のことです。例えば、文字の大きさ(font-size)などがこれにあたります。

間のスペース・改行は無視されるため、見やすいように適宜スペース・改行を用いていきましょう。

スタイルシートを使用する際は、以下のタグをヘッダー内に記述しておきます。

また、スタイルシートでのコメントの仕方はHTMLと違い、以下のように書きます。

/*①*/
＊①にコメントが入る

[ページTOPへ]

2.divとspan

divとspanは、構造を追加するだけの、何の意味もないタグです。
意味のあるタグを使う必要性がないが、スタイルを指定したい、というときに使います。
divはブロック要素（前後で改行される）spanはインライン要素（前後で改行されない）です。

このdivとspanと、次に説明するクラス・IDを用い、使いたい箇所にスタイルシートを適用していきましょう。

[ページTOPへ]

3.classとid

各タグには、classとidを設定することができます。
例えば、以下のように設定します。（idも同じ方法で設定できます。）

<p class="naka">
ここは赤です。</p>

タグに設定したclassとidのスタイルを指定するには、以下のようになります。

classの場合は

.naka{
text-color:red;}

idの場合は、

#naka{
text-color:red;}

classの場合はピリオド（.）、idの場合は#を冒頭に付けることに注意しましょう。
また、classは複数箇所に適用でき、idは特定箇所のみに適用できます。

[ページTOPへ]

4.スタイルシートの記述場所

スタイルシートを記述する場所は3種類あります。

外部スタイルシート
HTMLファイルのヘッダーの中
タグの中

1.外部スタイルシート

スタイルシートをHTMLファイルとは別につくり、HTMLファイルからスタイルシートにリンクする方法です。（スタイルシートは.cssの拡張子をつけて保存します）
スタイルシートを1つ作っておけば、後は各HTMLファイルからリンクするだけで、各HTMLにデザインを適用出来ます。
外部スタイルシートへのリンクは、以下のようにします。

<head>
<title>タイトル</title>
<link rel="stylesheet type="text/css" href="①">
</head>
＊①は外部スタイルシートのファイル名