ホーム＞コース別ガイド一覧＞CSS（スタイルシート）の記述！

CSS（スタイルシート）の記述！

CSSの基本的な書式

CSSでデザインを指定するには、基本的に右図のように「セレクタ」と「プロパティ」と「値」を並べて記述します。
セレクタはデザインを指定する要素を、プロパティにはデザインの種類を、値はデザインの程度や種類などを表します。「何の（セレクタ）、何を（プロパティ）、どのように（値）する」と覚えるといいかもしれません。
例えば右図の記述例で言うと「h1 要素の文字のサイズを20px（「px」に関してはこのページの下にある「単位と長さ」で説明しています）にします」ということです。
そしてプロパティと値を「{ 」と 「} 」（中カッコ） でとじ、プロパティの後に「:（コロン）」値の後に「;（セミコロン）」を記述します。

半角スペースを入力

右図のようにそれぞれの項目の間に半角スペースを入力すると読みやすくなります！

一つのセレクタに複数のプロパティを指定しましょう！

一つのセレクタに複数のプロパティを指定することができます。下図の「記述例１」のようにプロパティを「;（セミコロン）」と半角スペースで区切りましょう！

記述例１ h1 { font-size: 20px; color: #000000; }

記述例２（見やすくした例） h1 { font-size: 20px; color: #000000; }

記述が長すぎて読みにくい！

上図のように「記述例１」を「記述例２」のように、改行すると見やすくなり、後で編集するときもプロパティや値を見分けやすくなるので時間の短縮にもなります！

改行や半角スペースを投入できる位置は？

改行や半角スペースを投入できる位置は決まっています。下図の★に改行や半角スペースをいくつでも記述できますが、前項の図の「記述例２」のような記述がおすすめです！

複数のセレクタも指定できます！

CSSでは、同じプロパティを複数のセレクタに指定できます！この場合はセレクタを「,（カンマ）」で区切りましょう！下の例では h1 要素、p 要素の文字色を赤にしています。

記述をわかりやすくするためのコメント

CSSでは、そのデザインなどの指定内容に対して、わかりやすいコメントを記述することで、CSS文書を見やすくし、後から修正しやすくすることができます！また、デザインに反映されないため、私は作りかけのデザインをコメントとして記述し、保存しておくこともあります。下の図のように、「/*内容*/」の「内容」にコメントを記述します。

単位と長さ

下の表ではCSSで使われる単位と読み方、説明が書かれています。「em」、「px」はWebページでよく使われている単位なので、最初はこの二つを覚えれば十分です！
※「単位（相対指定）」、「単位（絶対指定）」の相対指定と絶対指定に関しては、「相対指定と絶対指定を理解しよう！」で説明しています。

単位（相対指定）	読み方	説明
em	エム	その時点での要素を「1em」とした文字の高さ
px	ピクセル	1pxは1画素に当たるため、モニターの解像度により変化します
ex	エックスハイト	その時点での要素の小文字の「x」の高さを「1ex」としたその高さ
単位（絶対値）	読み方	説明
mm	ミリメートル	1mmは0.1cm
cm	センチメートル	1cmは10mm
in	インチ	1inは25.4mm
pt	ポイント	1ptは0.3514mm（72分の1インチ）
pc	パイカ	1pcは4.2168mm（12ポイント）

必ず単位を付けよう！

プロパティの値に長さを指定するときは、必ず単位を付けましょう！もし単位が付いていない場合は無効な値と見なされてしまいます。なお、「0」の場合は単位を付けなくても問題ありません。

関連情報ページ
その他
HTMLの基礎！