CSSを書くには、HTMLの時と同じようにTeraPadを使いましょう。(CSS編集モードが搭載されています)
もちろん、お気に入りのテキストエディターがあればそちらを使ってもOKです!
CSSの基本構成
CSSは基本的に、「セレクタ」「プロパティ」「値」の3つの部品で構成されます。
color:#F00; ←プロパティ(color)と値(#F00)
}
この1つのまとまりを、スタイルと呼びます。
プロパティと値は{}で囲まれ、その間には:が入ります。
また、値の後ろには;を付ける必要があります。
※上記の場合、h1がセレクタ、colorがプロパティで#F00が値となります。
ちなみに上記のスタイルは、<h1>の色を赤色にするよう指定しています。
複数のプロパティも指定可
なお、1つのセレクタに対し、複数のプロパティを指定することも可能です。その場合は;で区切り、続けてプロパティを入力します。
[複数のプロパティを指定する場合]h1 { ←セレクタ
color:#F00; ←複数のプロパティ指定も可能。
font-size:36px; ←複数のプロパティ指定も可能。
}
ちなみに上記の場合は、h1の色を赤色に指定し、なおかつ文字のサイズを36pxに指定します。
なんだかとっても複雑に感じますが、じっくり見てみると案外単純な構成です。実際に書いてみると、なんだ、こんなものか・・・って感じですぐに覚えることができると思います。
つぎはCSSを書く場所について学習してみましょう。
覚えておきたいポイント
うまく使えないブラウザも
CSSがうまく使えないブラウザも存在します。例えば、IE6や5などの古いブラウザではCSSの解釈に不具合があり、ページのデザインが崩れる可能性もあります。それ以降や最近のブラウザでは問題ありません。ほとんどのブラウザでCSSを使うことができます。