Web Survive

Webで生きる道を模索するブログ

CSSの基本

「セレクタ」「プロパティ」「値」

CSSでは「セレクタ」「プロパティ」「値」という
3つの用語を押さえておくことが大切です。
「セレクタは」スタイルの適用対象、
「プロパティ」はスタイルの種類
「値」はスタイルの具体的な内容や程度です。

段落(p要素)の文字色を赤にする場合は「p{color:red;}」と指定しますが、
この場合セレクタは「p」、プロパティは「color」、値は「red」となります。

css-basic

セレクタは、まずは「h1」や「p」といったHTMLの要素名と考えておきましょう。
ほかにも、IDやクラスをセレクタにしたり、
ある要素に含まれる子要素といった書き方も認められていますが、
詳しくは後ほど解説します。

プロパティと値はコロンで区切ります。
プロパティと値のセットは、セミコロンで区切って複数指定できます。
たとえば、「p{color:red; font-size:120%;}」というようにです。

ただ、このように1行に書いてしまうと、
指定するプロパティが増えるごとに見にくくなってしまいますので、
プロパティごとに改行するのが一般的です。

改行したプロパティは、
タブキーまたは半角スペースふたつで
インデント(字下げ)しておくと見やすいでしょう。

css-basic-property-multiple

コメントの書き方

CSSのソースコードにコメントを記入するには、
テキストを「/*」と「*/」で囲みます。

コメントは制作者が目印やメモに使うもので、スタイルの適用には影響しません。
たとえば「/*見出しに適用するスタイル*/」と記述します。
コメントの中で改行したりと、長い文章を見やすくすることもできます。

なお、コメントのなかにコメントを書くことはできない点に注意してください。
(「/*・・・/*・・・*/・・・*/」と記述することはできません)

コメントの書き方の例

指定できる値

CSSのプロパティそれぞれには、
「指定できる値」「初期値」「適用できる要素」
あらかじめ標準仕様で決められています。
例えば背景画像の繰り返し方法を指定するための
background-repearプロパティでは、
「repeat」「repeat-x」「repeat-y」「no-repeat」が指定でき、
初期値は「repeat」、適用できる要素は「すべての要素」となっています。
初期値とは、そのプロパティを指定していない場合、自動的に設定される値です。

任意の値を指定できるプロパティもあります。
たとえばフォントサイズを指定するためのfont-sizeプロパティでは
「120%」「10pt」といった任意の値が指定できます。

単位の省略

値に「0」を指定する場合、単位が省略できます
(たとえば「0px」は「0」と書くことができます)

利用できる単位

CSSでは様々な単位が利用できます。
代表的なものは次のとうりです。

長さの単位

スクリーンメディア(パソコンでの表示)を前提とした場合には、
ピクセル(px)、ポイント(pt)、
フォントの大きさを1とする単位(em)などがよく使われます。

単位

意味

pt

ポイント(1/72インチ)

12pt

pc

パイカ(12pt)

1pc

in

インチ(2.54cm)

3in

cm

センチメートル

1.5cm

mm

ミリメートル

10mm

px

ピクセル

16px

em

フォントの大きさを1とする単位

1.2em

ex

小文字「x」の大きさを1とする単位

2ex

パーセンテージ

パーゼンテージ(%)指定もよく利用されます。

単位 意味
% パーセンテージ

小数点の仕様

整数(1、2、3など)だけでなく小数点(1.2、2.5など)も使えますが、
あまり細かいとブラウザやデバイスが表現できないため、
小数点は第1位か第2位ぐらいにとどめておくのが一般的です。

色の単位

6桁のRGB値(#rrgbb)、3桁のRGB値(#rgb)、カラー名(「red」など17色)が利用できます。

カラー名(17色)

カラー名 RGB値
aqua 水色 #00ffff
black #00000
blue #0000ff
fuchsia

紫紅色

#ff00ff

gray 灰色

#808080

green

#008000
line 黄緑 #00ff00
maroon

えび茶色

#800000
navy 紺色 #000080

olive

オリーブ色  #808000

orange

オレンジ色

#ffa500

purple

#800080
red #0000ff
silver 銀色 #c0c0c0
teal 青緑 #008080

white

#fffff

yellow

黄色

#0000ff

URL

一部のプロパティでは画像のパスなどURLを指定します。
「url(…)」という形式で記述するのが一般的です。

値にURLを指定するやり方の例

文字列

一部のプロパティでは文字列が指定できます。
「”…”」(二重引用符で囲む)という形式で記述するのが一般的です。

値に「文字列」を指定する書き方の例