CSSの基本

CSS の基本的な書式や、値の指定方法についてまとめます。CSS3 を基準としています。

書き方

HTML 内に書く

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

<h1 style='color:red'>テスト</h1>

<head>
    <style>
        table{
            border: solid 2px;
        }
    </style>
</head>

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

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

<head>
    <link href="style.css" rel="stylesheet" media="all">
</head>

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

selector { 
    property : 値;
    property : 値;
}

/* ～ */

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

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

@import url(外部CSSファイルへのパス);

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

表1: 値の単位

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

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

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

表2: 色の指定

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