トップ > スキル : Web > CSS知識

Web

CSSの基本記述

CSSでは、「セレクタ」、「プロパティ」、「値」という言葉を使います。HTML要素の中の属性と属性値とほぼ同じ考え方だと思っても差し支えありません。基本的な記述は下図のようになります。

css記述

セレクタには、スタイルシートを適用したいHTMLの要素を主に指定します。要素の他には、id属性やclass属性で指定した名前をセレクタに指定します。

まずセレクタを指定して、どのようなデザインを適用するかは"{"、"}"(ブレス)で囲みます。プロパティと値の対応は""(コロン)で区切ります。複数のプロパティを指定する場合は、""(セミコロン)を付けて、次のプロパティと値を記述します。1つのデザインでもセミコロンを付ける習慣を付けて置くことで、後からプロパティを追加する時の書き忘れを防ぐことができます。

複数のスタイルを記述する時、横一行に記述しても良いですが、プロパティと値を1対で書き、改行して次のプロパティと値を対に記述すると見やすくなります。下の図がその例となります。

css例

コロンやセミコロン、そしてブレス"{ }"の前後に半角の空白を入れて、さらに見やすくすることができます。セレクト名やプロパティ名、そして値のそのものの中に空白を入れなければ、その前後に半角空白を入れても問題ありません。
CSSの記述はこれが基本です。よって、セレクタとプロパティの種類と覚えることがCSSの本来の学習内容になります。

CSS(スタイルシート)専用として作ったファイルに名前を付けて保存する場合は、拡張子「.CSS」を付けて保存します。例えば、「desighn.css」と名前を付けて保存するとアイコンは下の図のようになります。
※これは「メモ帳」を使用した時の例です。

css例

【CSSの基本記述】