スタイル指定の方法

3つの要素で見た目を指定

ウェブサイトの見た目をCSSで指定する場合は、「どこ」の「何」を「どうするか」をそれぞれ「セレクタ」「プロパティ」「値」の3つの要素で指定します。
{}（中括弧）の前に「セレクタ」を記述します。中括弧の中には「プロパティ」：（コロン）「値」を記述し、文末は；（セミコロン）で締めくくる、という形式で記述していきます。例文としては「p { color : blue ; }」です。この記述は、p（Paragraph（段落））のcolor（文字色）をblue（青）にするという意味になります。セレクタのpは、HTMLのpタグということになります。

セレクタで「どこ」を指定する

セレクタは、CSSの装飾を適用する場所を指定するものです。指定方法は大きく3種類あります。まず、HTMLのタグをそのまま使う「要素セレクタ」について説明します。前述のp（段落）タグやh1やh2といったh（見出し）タグなどが該当します。次に特定の要素を指定する「IDセレクタ」があります。HTMLのタグに「id=”名称”」と記述することで指定できます。例えば、<p id=”名称”>テキスト</p>といったように表記されます。CSSでは「#名称 { color : blue ; }」と記述します。複数の要素に対して装飾を指定する場合は、「クラスセレクタ」を使います。HTMLで複数のタグに「class=”クラス名”」と記述して指定することが可能です。例えば、<p class=”クラス名”>テキスト</p>となり、CSSでは「.クラス名 { color : blue ; }」と記述します。IDセレクタはHTML内に一つしか設置できませんが、クラスセレクタは何個でも設置することができるのです。

プロパティと値で具体的な装飾を指定する

プロパティは、その要素の属性を意味します。前述のcolorというプロパティは、その要素の文字色を指定する属性です。他には文字サイズを指定する「font-size」、文字の太さを指定する「font-weight」、背景色を指定する「background-color」、背景画像を指定する「background-image」などがあります。値はプロパティの値そのものです。前述の例であれば「blue」＝青となります。色の場合はこのように色名で指定することもできますが、6桁の16進数で表されるカラーコードを使って指定するのが一般的です。値には「単位」が必要になることがあり、文字サイズであれば、「px（ピクセル）」や「pt（ポイント）」などを使って指定します。文字の太さは、100～900といった実数や「normal」「bold」といった名称を使用します。背景画像など、CSSからほかのファイルを呼び出す場合は「url」というプロパティを使用します。絶対パスと相対パスの両方が使用可能です。相対パスを使用する場合はCSSが保存されているディレクトリから目的のファイルへのパスを記述する必要があります。