CSSの基本的な書式や、値の指定方法についてまとめます。CSS3を基準としています。なお、セレクタの仕様については、別途まとめようと思います。

書き方

HTML内に書く

HTML要素のstyle属性に書くか、<head>内で<style>タグで囲み、その中に記述します。(あまり推奨されない書き方です)

 

外部ファイルに書き、HTMLから読み込む

<head>内で<link>タグを用いて参照します。この方法が推奨です。

 

書式

CSSは、セレクタ、プロパティ、値の3つの組み合わせで記述していきます。

コメント

/* ~ */ で囲みます。ネストは行えません。

外部CSSファイルを読み込む

@importで、外部のCSSファイルを読み込むことができます。

値(数値)の単位

大きさやフォントサイズなどのプロパティでは、数値を指定することができます。その際に利用する主な単位は以下の通りです。

px  ピクセル単位
pt  ポイント(1/72インチ)を1とする単位 画面のDPIに依存?
%  パーセント割合で指定(多くの場合、親要素の同プロパティ値からの割合)
em  親要素のフォントサイズ(大文字のMの高さを1するようです)
ex  親要素の小文字のxの高さを1とする
rem ルート要素(html要素)のemサイズ

 

pxとpt、表示端末のDPIとの関係については、後日詳しく調べてみようと思います。

色の指定

色の指定は、色名で指定する方法、#XXXXXX形式で指定する方法、RGBで指定する方法、HSLで指定する方法があります。

方法 結果
色名 red テキスト
# #ff0000 テキスト
rgb rgb(255, 0, 0) または rgb(100%, 0%, 0%) テキスト
rgba rgb(255, 0, 0, 0.5) テキスト
hsl hsl(180, 60%, 50%) または  hsl(50%, 60%, 50%) テキスト
hsla hsl(180, 60%, 50%, 0.5) テキスト

 

hslおよびhlsaは、CSS3以降でのみ利用できます。2017年3月9日時点ですべてのモダンブラウザで利用可能なようです。

 

参考にしたサイト