CSSを使う理由

CSSは、HTMLで構造を表した文書のレイアウトを整えることができる言語です。CSSを使えば、文書構造と見栄えの設定を切り分けられるので、ソースを見てどのような構造になっているかが分かりやすくなります。また、CSSを外部ファイルとして参照するようにすれば、容量の軽減にもなります。

使い方

基本的な使い方

CSSは基本的に以下のように記述します。

h1{color:#ff0000;}

この記述は、「要素h1の色(color)を#ff0000と指定する」ことを表しています。このように、CSSを適用するセレクタ (この場合はh1) を選び括弧 { } で括り、その中に適用したいプロパティ (この場合color) を選び、コロン(:)の後に値 (この場合#ff0000) を記述し、文の終わりにセミコロン (;) をつけます。

CSSは複数のプロパティを同時に指定することもできます。その場合、セミコロンに続けて記述します。その際、改行や半角スペースは自由に使うことができます。

適用範囲

CSSを適用するには、上の例のように直接要素を選ぶこともできますが、これだと指定した全ての要素に同じスタイルが適用されてしまいます。全てに適用されて欲しくない場合は、HTMLでclassやidを指定した要素だけにCSSを適用するようにできます。以下のように記述します。

.big{font-size:100px;}
#small{font-size:10px;}

.bigは、HTMLにclass="big"と指定した要素に対して文字を大きくすることを、#smallはHTMLでid="small"と指定した要素に対して文字を小さくすることを表しています。

また、セレクタをカンマ ( , ) で区切れば、複数のセレクタに対してCSSを適用することもできます。

記述方法

外部ファイルに記述する方法

CSSを記述するには、HTML内に直接書く方法と、外部CSSとして一つのファイルにまとめる方法の二つがあります。外部CSSにまとめた方がレイアウトを一括で指定できるなどのメリットがあるので、通常はこちらを使います。このサイトのサンプルでは、ソースを書きやすくするために内部にCSSを使っていますが、実際の使用の際は、外部ファイルにまとめた方がよいと思います。

外部ファイルを使うには、CSSを記述したファイルの拡張子を「.css」として名前をつけて保存します。そして、このファイルを呼び出すために、<head>内に以下のタグを挿入します (CSSファイルをsample.cssとしています) 。

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

HTMLに直接記述する方法

そのページだけ特別にスタイルを変えたい場合などに、内部CSSを使います。指定にはそのページの<head>内に以下のように記述します。<!-- と -->の中にCSSを記述します。

 <meta http-equiv="Content-Style-Type" content="text/css">
 <style type="text/css">
 <!--
 .normal{color:#333333; #background:#ffffff;}
 em{color:#ff0000; #background:#ffffff;}
 -->
 </style>

色の指定

# + 0〜9, a〜fを使った16進数6個の文字列で光の三原色を指定します。6個の文字列は2桁ずつで区切られ、赤・緑・青の設定ができます。それぞれ00〜ffまでの256通りがあります。例) #ff0000：赤。Webセーフカラー参照。

大きさの指定

CSSでの大きさの指定には、以下のような値が使えます。