【CSS】「CSS」のコード書式

■「CSS」コードの書式
■「CSS」コードを記述する位置
■「セレクタ」の代表的な指定方法
■「セレクタ」の指定方法 一覧

CSSコードは、
主に、下記のような書式で、「CSS外部ファイル」などに記述する。

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

Back

「CSS」の記述では、
「CSS」ヘッダ部分を記述する場合は、
最初に記述する必要がある。


「CSS」ヘッダ部分の後に、「CSS」コード部分を記述する。

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

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

Back

「CSS」で、
よく使われる「セレクタ」の指定方法は、いくつかあります。

必ず覚えておく必要のある基本的な指定方法は、
常に使用するので、
CSSコードを何度か作成するだけで、
身につくと思います。


・HTMLタグ
・ID名
・クラス名
・複数指定
・リンク指定

などは、常に使用する「セレクタ」指定方法です。


複数一括指定をするときは、「,（カンマ）」で区切って、
複数の「セレクタ」を指定します。


訪問済みリンクなど状態を指定する方法は、
「:」で接続して「状態」のワードを記述することで指定が可能です。

・「セレクタ:link」は、未訪問のリンクを指定。
・「セレクタ:visited」は、訪問済みのリンクを指定。
・「セレクタ::active」は、マウスでクリックしているリンクを指定。
・「セレクタ::hover」は、マウスが重なっているリンクを指定。
・「セレクタ::focus 」は、フォーカスがあたっているリンクを指定。
・「セレクタ::first-child」は、親要素から見て最初の要素を指定。

などの方法で状態での指定も可能。

CSSコードの基本書式

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

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

tag{ プロパティ: 値;}
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; }

「h1」タグの中の「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; }


Back

「CSS」では、
「セレクタ」の指定方法が幅広く用意されている。
「HTMLタグ名」「ID名」「クラス名」などで指定する代表的な方法のほかに、
「複数」の指定を一度で行う方法や、
同じセレクタの最初だけを指定したり、
訪問済みのリンクだけを指定することも可能。


「セレクタ」の指定方法を覚えておくと、
「CSS」を便利に扱うことができるので、
頭の片隅に入れておくと良い。

* { ... }	すべての要素
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