CSSの書き方

CSSでスタイルを指定する際には、どの部分に対してどのスタイルをどのように適用するかを指定します。
以下の例では、「.text」部分の色を赤、文字サイズを10pxで表示するスタイルを指定しています。

なお、見やすいように空白と改行を入れています。
どの要素に対してCSSを適用するかを:を用いて書き、 {} の中に適用する内容を書きます。内容を複数指定するときは、;（セミコロン）で区切って指定します。
CSSもHTMLタグと同じく、かならず半角文字および小文字で書きます。

★CSSの読み込み

CSSを読み込むためには、CSSを記述したファイルをHTMLファイルとは別に作成し、HTMLファイル内で読み込みます。読み込むためには、HTML文書のheadタグ内に <link rel="stylesheet" type="text/css" href="CSSファイル名"> と記入します。
CSSを適用させる箇所を指定する際、HTMLファイル内で <p class="text"> のように適用させたい箇所のタグの後に「class="任意の名前"」と書き、CSSファイル内で「.text{}」のように「.指定した名前」でCSSを書きます。

CSSの部分はCSS専用ファイル（xxx.css）に書く


.text {

color: red;

font-size: 10px

}

HTMLソースでCSSを読み込む


<html>

<head>

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

</head>

<body>

<p class="text">内容となる文書の部分です。</p>

</body>

</html>

</div>

★CSSが反映されない場合

何らかの理由でCSSが反映されない場合は、 <link rel="stylesheet" type="text/css" href="CSSファイル名?v=1"> のように末尾に「?v=半角数字」（バージョン情報）を付け加えてCSSのバージョンを更新させると直る場合が多いです。それでも直らない場合は「?v=1」→「?v=2」→「?v=3」というように数字を変えてみてください。

★divとspan

pタグなどの中に「class="任意の名前"」を指定できない場合や、複数のタグ部分にまとめてCSSを適用させたい場合は、divタグを用いて <div class="任意の名前"> で指定します。divタグで囲んだ部分は、ひとかたまりの範囲として扱われます。
一方、文書の中の単語や記号など、ある一部分にだけCSSを適用させたい場合は、spanタグを用いて <span class="任意の名前"> で指定します。

《例》


<div class="menu">

<p><span class="star">★</span>メニュー1</p>

<p><span class="star">★</span>メニュー2</p>

</div>

《表示結果》

★CSSでよく用いる単位

以下の2つはCSSでよく用いられるので、覚えておくと良いでしょう。なお、数値が0の場合は単位は不要です。

px（ピクセル）：1ピクセルを1とした単位
em（エム）：その範囲のフォントの高さを1とした単位

★メモ書きの挿入

/*メモ書き*/

のように、/* と */ で囲んだ部分はメモ書きとして扱われ、ブラウザには表示されません。CSSファイル内のどこに書いてもOKで、メモ書きを複数行にすることも可能です。

★CSSの使い方