CSSリファレンスの使い方

ライター

2010.03.19

　本リファレンスでは、Webページのデザインを行うCSS（Cascading Style Sheets）で利用できる、各プロパティの概要と使い方を紹介しています。リファレンスには以下のような内容が記載されています。

構文

　「構文」では、CSSでのスタイルの記述形式を掲載しています。この形式に沿って値を指定する必要があります。例えば、「color」プロパティは以下の用に記載されています。

color : 色;

　このプロパティを利用するには、「color :」の後に、利用したい色を指定し、行末に「;」を記述します。

説明文

　「説明文」では、プロパティの概要や利用した場合の効果、使い方について説明します。また、配置などといった表示位置に関わる内容については、図を利用して説明しています。

使用例

　「使用例」では、このプロパティを実際に使う方法を紹介しています。「CSSの定義」にCSSのスタイルを記載しています。これを、HTMLファイルのヘッダ部分や、別途CSSファイルを作成して記述しておきます。

　また、CSSの定義で指定したスタイルを利用する例を、「HTMLの例」に記載しています。

　「表示結果」では、Webブラウザで上記した「CSSの定義」と「HTMLの例」のWebページを読み込んだ際の表示結果を掲載しています。ここでは、Internet ExplorerとFirefoxでの表示例を掲載しています。この表示結果から、実際にプロパティがどのように表示されるか把握できるのに加え、IEとFirefoxの表示結果の違いを比べて見ることができます。

サンプルを実際に試す

　掲載したサンプルを実際の自分のWebブラウザで表示させてみることもできます。この場合には、CSSの定義とHTMLの例を適当な位置に張り付けて作成したHTMLファイルをWebブラウザに読み込みます。

　また、HTMLやCSSファイルの作成になれていない場合は、以下のファイルをダウンロードして利用すると簡単にサンプルのCSSとHTMLを貼り付けて作成できます。

ファイルをダウンロードしたら、メモ帳などのテキストエディタを利用してダウンロードしたファイルを開きます。次に、開いたテキストファイル内の「ここに「CSSの定義」を貼り付ける」の部分に、リファレンスの「CSSの定義」の内容をコピーします。この際、前後にある「」は削除しないようにします。次に、「」にリファレンスの「HTMLの例」の内容をコピーします。この際、「」を上書きして消してしまいます。

　編集が完了したら、ファイルを保存します。ファイル名を変更する場合は、必ず拡張子を「.html」にしておきます。

　保存したファイルをWebブラウザで読み込めば、サンプルを表示することができます。