CSSの基礎 - 10press

CSS - スタイルシートって何？

Cascading Style Sheetsの略で、Webページのレイアウトを定義する規格。

CSSを使うと、フォントや文字の大きさ、文字飾り、行間などの見栄えに関する情報を文書本体(及び文書の論理構造を記述したHTML)から切り離すことができる。

HTMLが裸の人間だとすると、CSSは洋服やアクセサリーみたいなものです。

CSSをHTMLに適用するには4つの方法があります。

タグに直接書きこむ（style属性として指定する）方法
例）<p style="color:#ffffff;">～</p>
HTMLヘッダーで宣言しておく方法
例）head～head内に
```
<style type="text/css">

</style>
```
CSSファイルを作って定義する方法
例）CSSの内容を書いたファイルを別に作成し、head～head内に
```
<link rel="stylesheet" type="text/css" href="CSSファイルのURL">
```
@importで参照する方法
上記2.の方法の<style type="text/css">～</style>内、または上記3.の方法の文字コード指定を除く最初に、
@import "CSSファイルのURL";と書くことでCSSを読み込みます。

1、2の場合はhead内に<meta http-equiv="content-style-type" content="text/css">という記述が必要です。

サイト内のレイアウトの統一感を出す(全ページのレイアウトを共通のものにする)ことを考えると、上記「3.cssファイルを作って定義する方法」が一番効率がいいでしょう。

外部CSSファイルは、head～head内の内(上記2.の例だとem{color:red;})を抜き出し、新規作成したファイルにペースト、「style.css」等拡張子「.css」で保存すればOKです。

style属性として指定する書き方はここでは割愛します。

CSSは

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

という書き方になります。セレクタには要素名（タグ）の他、id属性値(先頭に#を付ける)、class属性値(先頭に.を付ける)が使用できます。

また、一つのセレクタに適用させたいスタイルはまとめて書くことができます。

body {
margin: 0;
padding: 0;
color: #000;
background-color: #fff;
}

上記の例では、body要素に対して外側の余白を0、内側の余白を0、文字色を#000（黒）、背景色を#fff（白）というふうに指定しています。

基本的にタグは入れ子にして書かれます。CSSで指定したスタイルは、親要素から子要素に継承されます。例えば

h1 {
font-size: 150%;
}
em {
color: #f00;
}

というCSSがあったなら、<h1>これは<em>大見出し</em>です</h1>という文章は以下のように表示され、親要素のh1に指定されたフォントサイズが子要素のemに継承されていることがわかります。

→

HTML文書に適用されるスタイルシートには以下の3つのものがあります。

これら３つのスタイルシート間で宣言が衝突したり、あるいは一つのスタイルシートの中であっても宣言が衝突する事があります。そういった場合に、最終的にどの指定が適用されるのか、その優先順位を決めるのがこの「カスケード処理」です。

メディアタイプと合致するものを優先する
優先度及び出所による順位づけ
- 通常の宣言の優先度、文書作成者＞ユーザー＞ユーザーエージェント
- 最重要宣言の優先度、ユーザー＞文書作成者＞ユーザーエージェント
- 最重要宣言＞通常の宣言
- インポートされたスタイルシートは@import規則が存在するスタイルシートと同じ出所として扱われる
詳細度による順位づけ
- より詳細な指定を行っているセレクタ＞より一般的な指定を行っているセレクタ
- 疑似要素及び疑似クラスは、各々通常の要素及びクラスとして扱う。
指定された順序による順位付け
- 2つの規則が全く同じ優先度及び詳細度を持つ場合は、より後の位置で指定された規則が適用される。
- インポートされたスタイルシートは、すべての規則より先行する位置に書かれているものとして扱う。

各スタイル指定のセレクタの詳細度（重み）を計算して、その値が大きいものほど優先されます。ここで、詳細度は、

「詳細度」= (ID属性の数)*100 + (クラス属性の数)*10 + (要素名の数)*1で求められます。