【CSS】「CSS」の書式

■「CSS」とは
■「CSS」外部ファイルの書式
■「CSS」のコメント
■「CSS」ヘッダーの書式
■「CSS」コードの書式

「CSS」外部ファイルの拡張子

「CSS」外部ファイルの書式配置

Back

コメントは、プログラムを記述する中で、目印や説明文を残したいが、
プログラムへ影響をさせたくない文を除外（コメントアウト）する時に使う手法。

CSSのコメントは、「/*」と「*/」の間に記述することが決まっている。
コメントの書き方は、各プログラムによって異なってくる。

コメントは、色々と利用ができて、かなり便利。

• コメント
• CSSコードのカテゴリー分け
• エラー検出

コメントの記述例

Back

@charset　（必要に応じて記述。省略可能。）

@font-face　（必要に応じて記述。省略可能。）

@import　（必要に応じて記述。省略可能。）

@media　（必要に応じて記述。省略可能。）

@namespace　（必要に応じて記述。省略可能。）

@page　（必要に応じて記述。省略可能。）

Back

書式

tag{ プロパティ: 値 !important;}

「!important」の記述（すべてのスタイル指定よりも優先される）

tag{ プロパティ: 値 !important;}

タグ名での指定

h1 { color: #00ff00; }

ID名での指定

#ID名 { color: #00ff00; }

クラス名での指定

.クラス名 { color: #00ff00; }

特定タグの中のクラス名での指定

タグ名 .SampleClassName { color: #00ff00; }

複数タグへの指定

h1, span, div{ color: #00ff00; }

複数クラスへの指定

.クラス名, .クラス名, .クラス名{ color: #00ff00; }

複数セレクタへの指定

ID名, クラス名, h1, span{ color: #00ff00; }

「ｈ１」タグの中の「span」タグの指定

h1 span{ color: #00ff00; }

ID名の中の「span」タグへの指定

#ID名 span { color: #00ff00; }

クラス名の中の「span」タグへの指定

.クラス名 span{ color: #00ff00; }

未訪問のリンク

link { color: #00ff00; }

訪問済みのリンク

a:visited { color: #00ff00; }

マウスでクリック中など、アクティブな要素

a:active { color: #00ff00; }

マウスが乗せられている要素

a:hover { color: #00ff00; }

一括指定

a:link, a:visited, a:active { color: #00ff00; }

ID名での一括指定

ID名:link, ID名:visited, ID名:active { color: #00ff00; }

クラス名での一括指定

.クラス名:link, .クラス名:visited, .クラス名:active { color: #00ff00; }

セレクタ	スタイル適用する対象をセレクタといい、 「タグ名」「クラス名」「ID名」などをセレクタの場所に記述する。 その対象を指定する属性を「セレクタ」は、 CSSスタイルを適用する対象を指定するための機能。 対象をセレクト＝指定することから、セレクタという。 セレクタの値は、 スタイルの対象「タグ名（要素）」「ID名」「クラス名」などを記述。 英語では、「要素」のことを「Element」という。 Element = 要素 = タグ名
プロパティ	セレクタに、どのような装飾をするか、装飾を指定するプロパティを明記する。
値	値によって、プロパティで指定された装飾を、どれくらい適用するかを指定する。
!important	important 宣言を指定することにより、すべてのスタイル指定よりも優先される。優先させたいときにのみ利用する。

セレクタの一覧

* { ... }	すべての要素
Element { ... }	指定の要素
ns|Element { ... }	名前空間nsの中の要素
Element.class { ... }	class属性の値が一緒の指定要素。「.（ポイント）」の後にクラス名で記述。クラス名だけでの指定も可能。
.class { ... }	class属性の値が一緒のすべての要素。「.（ポイント）」の後にクラス名で記述。
Element#id { ... }	id属性の値が同じ要素。ID名だけでの指定も可能。
#id { ... }	id属性の値が同じすべての要素。
Element, Element { ... }	要素を複数指定する場合。「,（コンマ）」で区切る。
Element Element { ... }	要素の中の要素を指定する場合。要素の子孫として出現する要素。
Element > Element { ... }	要素の中の要素を指定する場合。要素の子として出現する要素
Element + Element { ... }	要素の直後に登場する兄弟要素
Element ~ Element { ... }	要素よりも後ろに登場する兄弟要素
Element[attr] { ... }	attr属性を持つすべての要素
Element[ns|attr] { ... }	名前空間ns中のattr属性を持つすべての要素
Element[attr="val"] { ... }	attr属性の値が val であるすべての要素
Element[attr~="val"] { ... }	attr属性の値のひとつが val であるすべての要素
Element[attr|="val"] { ... }	attr属性の値が val もしくは val- で始まるすべての要素
Element[attr^="val"] { ... }	attr属性の値が val で始まるすべての要素
Element[attr$="val"] { ... }	attr属性の値が val で終わるすべての要素
Element[attr*="val"] { ... }	attr属性の値が val を含むすべての要素
Element:link { ... }	未訪問のリンク
Element:visited { ... }	訪問済みのリンク
Element:active { ... }	マウスでクリック中など、アクティブな要素
Element:hover { ... }	マウスが乗せられている要素
Element:focus { ... }	フォーカスがあてられている要素
Element:root { ... }	文書のルート要素。HTMLの場合は常に html要素
Element:first-child { ... }	親要素から見て最初の子要素
Element:last-child { ... }	親要素から見て最後の子要素
Element:first-of-type { ... }	親要素から見て最初の要素
Element:last-of-type { ... }	親要素から見て最後の要素
Element:nth-child(n) { ... }	親要素から見て前から n番目の子要素
Element:nth-last-child(n) { ... }	親要素から見て後から n番目の子要素
Element:nth-of-type(n) { ... }	親要素から見て前から n番目の要素
Element:nth-last-of-child(n) { ... }	親要素から見て後から n番目の要素
Element:only-child { ... }	親要素から見て唯一の子要素である場合の要素
Element:only-of-type { ... }	親要素から見て唯一の要素である場合の要素
Element:empty { ... }	子要素を持っていない要素
Element:target { ... }	クリックされたリンクの対象要素
Element:lang(c) { ... }	言語cで記述された要素
Element:enabled { ... }	有効な(enabled)状態の要素
Element:disabled { ... }	無効な(disabled)状態の要素
Element:checked { ... }	チェックされた(checked)状態の要素
Element:indeterminate { ... }	チェック状態が不確定の状態の要素
Element:first-line { ... }	要素の中の1行目
Element:first-letter { ... }	要素の中の1文字目
Element:before { ... }	要素の先頭
Element:after { ... }	要素の末尾
Element:selection { ... }	要素選択された箇所
Element:not(s) { ... }	否定疑似クラス

Back