CSSの基本

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

書き方

HTML内に書く

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


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

1

2

3


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

1

2

3

4

5

6

7

8

9

<head>

<style>

table{

border: solid 2px;

}

</style>

</head>

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

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


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

1

2

3

4

5

<head>

</head>

[topBannar]

書式

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


セレクタ { 
    プロパティ : 値;
    プロパティ : 値;
}

1

2

3

4

5

6

セレクタ {

プロパティ : 値;

}

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

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


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

1

2

3

@import url(外部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日時点ですべてのモダンブラウザで利用可能なようです。

[bottomBannar]

CSSの基本

書き方

書式

コメント

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

値（数値）の単位

色の指定

参考にしたサイト