CSS - @規則とセレクタ

CSSの基本的な書き方

@規則

ここで説明する「CSSの書き方」は外部ファイル（拡張子「.css」のファイル）としての書き方です。

順序が決まっているもの

1. @charaset：文字コード

   @charaset "Shift_JIS";

   • @charset "文字コード";と書きます。
   • @charsetはスタイルシートの先頭に書きます。
   • @charsetと "の間は半角スペース一つのみ。
   • 引用符にはダブルクォート（")を使います。
   • 最後のダブルクォート（")の直後にセミコロン(;)を付けます。
2. @import：別のスタイルシート取り込み

   @import url("base_style.css");

   • @importは@charsetを除く、全ての規則の前に位置しなければいけません。
   • @import url("スタイルシートのURL");と書きます。
   • URLを文字列として@import "スタイルシートのURL";と記述することもできます。
   • URLとセミコロンの間に出力対象とするメディアタイプを記述できます。複数あるときはカンマで区切ります。何も指定されなかったときは、"all"が指定されたものと見なされます。

その他の@規則

@media：メディアタイプ（コンピュータ画面、印刷媒体など）別にスタイルを適用

braille（点字）、embossed（点字プリンタ）、handheld（携帯電話のブラウザなど）、print（印刷されたページや、印刷プレビュー）、projection（投影機）、screen（コンピュータの画面）、speech（音声ブラウザ、スクリーンリーダーなど）、tty（テレタイプ、端末など）、tv（テレビ）

@page

ページボックスの大きさを設定したり特定のページに宣言を適用したりする際に使用（詳しくはページ媒体）

@font-face

フォントのきめ細かなマッチングを行う（詳しくはフォントを記述する（Font Descriptions and @font-face））

セレクタ

CSSでは、セレクタによってどの要素に対してスタイルを適用するのかを決定します。セレクタの条件がある要素に当てはまるとき、「セレクタがその要素にマッチ(match)する」と表現します。

* {
margin: 0;
padding: 0;
}

h1 {
color: red;
font-size: 24px;
}

div em {
border-bottom: 1px dotted red;
font-style: normal;
}

<div>div要素の中の<em>em要素</em>に適用される。</div>

<div>div要素の中の<p>p要素の中の<em>em要素</em>にも適用される。</p></div>

div > em {
border-bottom: 1px dotted red;
font-style: normal;
}

<div>div要素の中の<em>em要素</em>に適用される。</div>

<div>div要素の中の<p>p要素の中の<em>em要素</em>には適用されない。</p></div>

h1 + p {
border-top: 1px solid #000;
}

<h1>h1要素<h1>
<p>h1要素の直後にあるp要素に適用される。</p><p>h1要素の直後にないp要素には適用されない。</p>

p.noice {
font-style: italic;
}

<p class="notice">「notice」というクラス属性を持つp要素に適用される。</p>

p#myid {
font-weight: bold;
}

<p id="myid">「myid」というID属性を持つp要素に適用される。</p>