CSSの基本書式

スポンサーリンク

CSS基本書式について説明します。CCSの記述は通常次のようになります。

基本書式

まずは3つの用語を押えてください。 セレクタ(selector)、プロパティ(property)、値(value)の3つです。 各用語の意味は次のようになります。

用語意味
セレクタスタイルの適用対象
プロパティスタイルの性質(色、長さ、大きさ等)
プロパティに指定する値

具体的に見てみましょう。

次の場合は、「div 要素の文字色(color)を "red" にする」という意味になります。

div {color: red;}

次の場合は、「h1 要素の文字サイズ(font-size)を"18px"にする」という意味になります。

h1 {font-size: 18px;}
このように、CSSの指定は「セレクタプロパティにする」という形で指定します。
セレクタ {プロパティ: 値;}

プロパティと値は「コロン(:)」で区切り、値の後に「セミコロン(;」)をつけます。 そしてプロパティと値のセットを「波括弧 {}」 で囲みます。

プロパティの指定が1つの場合はセミコロン(;)は無くても構いません。

プロパティと値の間には空白スペースを入れることができます。 「color:red」よりも間に空白を1つ入れて 「color: red」とした方が見やすくなります。 但し、プロパティと値の途中に空白を入れることはできません。(例「c o l o r: r e d」はダメ)

プロパティを複数指定する場合は、次のように記述します。


p {color: red; font-size: 15px;}

上記を複数行に分けて記述すると次のようにも記述できます。

p {
    color: red;
    font-size: 15px;
}

上の記述よりも、下の記述の方が見やすいと思います。 通常は下のように複数行に分けて見やすいように記述します。

役立ちツール

CSS 基本事項

CSS セレクタ

CSS テキスト・フォント

CSS 色・画像・背景

CSS ボックス

トランジション

リスト

テーブル

CSS レイアウト

CSS その他

用語

関連サイト