(8/31まで)高価なキッチン用品が30日間試せる

CSSの基本

セレクタ

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

ひとつのセレクタに複数のスタイル宣言をする

コード
p {
    color: red;
    font-weight: bold;
}

複数のセレクタに同じスタイル宣言をする

コード
p, h1 {
    color: red;
    font-weight: bold;
}

子要素を指定してスタイル宣言をする

親要素 子要素 セレクタ { プロパティ: 値; }

コード
header p {
    color: red;
}

上記の例は<header>要素の中の<p>要素だけに対してスタイルが適用される。

クラス属性にCSSを指定する

要素名.クラス名(要素名は省略可能)

sampleclassに対して赤色を設定
HTML
<p class="sampleclass">サンプル</p>

CSS
.sampleclass { /* 要素名を省略しないなら p.sampleclass */
    color: red;
}

複数のクラス属性を一度に指定した場合

半角スペースを開けていると、親要素の中の子要素を指す。

コード
<div class="board">
	<p class="title">タイトル</p>
</div>

.board .title {
	color: red;
}

半角スペースを開けずに連結すると、クラス名"abc", "xyz", 両方を持つ要素だけが反応する。

コード
<p class="abc xyz">タイトル</p>

.abc.xyz {
	color: red;
}

id属性にCSSを指定する

要素名#id名(要素名は省略可能)

sampleidに対して赤色を設定
HTML
<p id="sampleid">サンプル</p>

CSS
#sampleid {    /* 要素名を省略しないなら p#sampleid */
    color: red;
}

CSSの3つの記述方法

1.インライン
HTMLタグの中に直接style属性を記述する
一時的なテスト以外で使用してはいけない。

インライン
<h1 style="color:#ff0000;">見出し</h1>
<p style="color:red; font-style:italic">こんにちは</p>

2.内部参照
HTML文書のhead要素の中にstyle要素を設定しCSSを記述する
一時的なテストか、例外的にそのページ限定で使いたいスタイル指定を記述する。

内部参照
<head>
<style>
    h1{color: #ff0000;}
</style>
</head>

3.外部参照

外部参照
<head>
    <link rel="stylesheet" href="style.css">
</head>

または

<head>
    <style>
        @import url(style.css);
    </style>
</head>

基本、CSSは全て外部参照にすべき。
文書構造はHTML、装飾はCSS、と完全に分離させる。
インラインや内部参照はあくまでも一時的なテストとして利用する。

CSSの優先順位

スタイルの記述が被った場合、以下の優先順位によってスタイルが決定される。

優先度が高い

インライン
内部参照、外部参照

優先度が低い

内部参照、外部参照による優先度に差はない。
ただし、<head>内部での読み込み、記述位置による後勝ちルールの影響は残る。

優先順位が同じ状態でスタイルが被っている場合(style.cssの2箇所で指定がされている場合など)
セレクタが同じ場合は後勝ちになる。
p { color: red; }
p { color: blue; }
上記は、後から書かれた青色が反映される。

セレクタが違う場合は、セレクタ毎に持つ点数によって、最も高いものが優先される
基本はタグの指定が、最も深いものが優先されると理解すれば良い。

タグのstyle属性 style="" 1000点
id #sample 100点
要素+属性セレクタ a[target="_blank"] 11点(要素1点、属性10点)
class .sample 10点
属性セレクタ [target="_blank"] 10点
擬似クラス :hover 10点
要素名 a 1点
疑似要素 :first-child 1点
全称セレクタ * 0点

p { color:red; }
要素名のみ。1点

header p { color:red; }
要素名2つ。2点

.content p { color:red; }
classと要素名。11点

#wrap .content p {color:red;}
id、class、要素名。111点

!importantをつけると最優先になる
順番、点数に関係なく、このスタイルが設定される。
p { color:red !important; }

CSSファイルの1行目

CSSファイル(*.css)の1行目には文字コードを書く、というルールがある。

@charset "utf-8";

コメント

CSSのコメント
/* コメント */

HTMLのコメント
<!-- コメント -->

リセットCSS

ブラウザ毎に初期スタイルが設定されている。
ブラウザによって見た目が変わってしまうので、それらを初期化するためのリセットCSSというのが使われている。

Eric Meyer's Reset CSS
世界中で最も利用されているリセットCSS。
特に理由がなければこれを利用するか、これを元にカスタマイズする。
リセットしたら、設定し直さないとダサいままになる。

Normalize.css
ブラウザ毎の有用なスタイルはそのまま維持し、ブラウザ毎の誤差などを正常化するCSS。
再定義しなおすよりも効率がよく近年人気。
Normalizeした後は、そのまま使用してもブラウザの初期スタイルが生きるので、それなりの体裁を維持できる。

参考 CSS Resetcssreset 参考 Eric Meyer’s “Reset CSS” 2.0cssreset 参考 Normalize CSS Downloadnormalize.css