このページは、CSS を使うための準備や基本的な書式などを説明したものです。
CSS を使う方法は4つあります。4つの方法は次のとおりです。
この4つの方法で CSS を使うことが出来ますが、3番目と4番目の方法は、HTML 文書の中に直接書くために、 CSS の要素のスタイルをまとめて指定できる利点がなくなってしまうので、お勧めできません。link 要素を使う方法と @import を使う方法は、両方とも CSS が書かれているファイルを読み込むのですが、@import の方はブラウザが対応していない場合があります。
都合のいいことに、CSS に対応していて @import に対応していない主なブラウザは IE3、NN4 です。「テキスト編」で説明した通り、これらのブラウザはスタイルシートの対応が中途半端なので、あまり複雑なスタイルシートを使いたくありません。という訳で、これらのブラウザがうまく対応できない部分は @import を使っていくことにします。IE3、NN4 でも問題ない部分は、link 要素を使います。
まず、@importの使い方ですが、次の例を見てください。
<style type="text/css"> @import url("sample.css"); </style>
head 要素の中に書くことで、CSS が読み込まれ、HTML 文書に適応されます。style 要素の type 属性で指定している "text/css" は、CSS を表しています。@import の url で、CSS が書いてあるファイルを相対 URL か絶対 URL を使って指定します。
link 要素を使った場合は次のようになります。
<link rel="stylesheet" type="text/css" href="sample.css">
link 要素も head 要素の中に書きます。rel 属性でスタイルシートにリンクすることを指定し、type 属性でスタイルシートは CSS だと指定しています。href 属性にはファイルの URL を指定します。
@import は、link 要素などで読み込む CSS の書かれたファイルにも書くことができます。この場合は、ファイルの先頭に書かなければいけません。IE3、NN4 で使う CSS を分ける場合には、まず、全体に使う CSS のファイルの先頭で @import を使い、IE3、NN4 で問題のある部分を読み込むようにしておきます。それを link 要素で HTML 文書から読み込むことで、分けることができるはずです。
CSS でスタイルを指定する方法は簡単です。CSS での書き方の基本は、スタイルを指定する要素を選び、文字のサイズ、色、表示の位置などの設定項目を決めて、値を設定するという形になっています。スタイルを指定する要素を選ぶ部分をセレクタ、設定項目をプロパティと呼びます。実際には セレクタ { プロパティ : 値; } のように書きます。
実際の例を見たほうが分かりやすいですね。
body { font-size: 10em; }
一応説明しておくと、セレクタで body を選択し、プロパティで設定項目を文字のサイズに決めて、10em という値を指定しています。これで、body 要素とその中にある全ての要素の文字の大きさを、使われているフォントサイズの10倍にするという意味になります。body 要素だけでなく、その中の要素まで含むのは、CSSには「継承の仕組み」があるためです。まずは、こういう形で指定することを覚えておいてください。
CSS では、要素に対してスタイルを指定します。ここで問題になるのは、要素以外の部分にスタイルを指定したい場合です。例えば、ナビゲーション用のメニューがあって、その部分のスタイルを指定したい場合、メニューを表している要素はないので、CSS でスタイルを指定することが出来ません。
そこで使われるのが div 要素と span 要素です。これらの要素には特別な意味が無いのですが、その部分がまとまって何かを表していることを示すことが出来ます。div 要素は、大きな範囲で他の要素をまとめるのに使い、span 要素は、文章の一部などをまとめる時に使います。先の例えで使ったナビゲーション用のメニューの場合、メニューの部分を div 要素を使ってまとめておけば、メニューの部分にスタイルを指定できるようになります。
CSS で h1 要素のスタイルを指定すると、HTML 文書中の全ての h1 要素のスタイルが変わります。便利なのですが、このままでは一部の h1 要素だけのスタイルを変えるということが出来ません。対象となる要素を区別するのには class 属性と id 属性を使います。例えば、注意として書いている段落があり、そこを区別したい時には、次のようにします。
<p class="caution">飲みすぎ、食べ過ぎに注意しましょう。</p>
この p 要素が注意 (caution) という意味を持っていることを class 属性で表しています。この注意の意味を持つ p 要素だけ CSS で指定する場合は、次のようになります。
p.caution { font-size: 10em; }
このように要素名の後ろにドット (.) を使って、class 属性の値を書くことで指定できます。
id 属性も同じような使い方をしますが、こちらは区別したい要素が1つだけの場合に使います。例えば次のような例では、id 属性を使います。
<p>私の名前は<span id="my-name">HAL</span>です。</p>
id 属性の場合は、CSS での指定にはシャープ (#) を使い、次のように書きます。
span#my-name { font-size: 10em; }
このように、div 要素、span 要素、class 属性、id 属性を組み合わせると、自由にスタイルを指定できます。CSS でスタイルを指定する場合に、よく使われるので覚えておいてください。
