|
|
© 2014 abhp.net All Rights Reserved. | |
| ホーム ＞ HPB19 ＞ HTML スタイルシートの活用 |
HTML スタイルシートの活用 |
HTML スタイルシートの活用文字の大きさや色等見栄えに関する設定記述をまとめたものをスタイルシート（ style sheet ）と言います CSSファイルを指してスタイルシートと言うこともあるのですが、ヘッダー部に書いても、外部ファイルに切り出しても、その機能が変わるわけではありません このページでは、スタイルシートの一般的な記述の仕方、ルールについて説明しています 個別の目的に応じた記述の仕方につきましては、「次のページ」以降をご参照下さい 本サイトでは、CSSファイルに切り出した場合、スタイルシートとして区別しています （参照） 「 スタイルシート（ CSS ）とは 」 |
スタイルシートの記述例例えば、以下のように記述します
「 body 」の部分を セレクタ、「 line-height 」の部分を プロパティ （属性）、「 170% 」の部分を 値 （属性値）と言います プロパティ・値を複数指定したいときは、「 ; 」（セミコロン）で区切って指定します コメントは、前後を、「 /* 」と「 */ 」で挟んで記述します それぞれのタグに対する設定の仕方の説明は、後続ページ（次のページ）のそれぞれのトピックをご参照下さい スタイルシート内コメントの書き方スタイルシート内では、「 /* 」 と 「 */ 」 で囲んだ範囲がコメントになります
＜id 宣言＞ 「 id 」 「 # 」 の使用方法セレクタには、タグ文字の代わりに、任意の「 #半角英数字 」を指定することもできます これを id宣言と言います
ヘッダー部で、タグに属性を付けてしまうと、ページ内全てに適用されてしまいます 任意の一部分にだけ適用させたい時に使用します ＜クラス宣言＞ 「 class 」 「 . 」 の使用方法セレクタには、任意の「 .半角英数字 」（半角英数字の前に半角ピリオドを付けています）.を指定することもできます これをクラス宣言と言います
使用方法・目的は、「 id 」宣言と同じです 任意の一部分にだけ属性指定を適用させたい時に使用します 各指定方法の優先度
同じ優先度の指定が複数ある場合は、後から定義されたものが優先されます 「 !important 」ルール半角スペースで区切って、「 !important 」を追記すると、その指定が優先されます 例えば、下記のように、値の後ろ、それぞれに追記します
擬似要素と擬似クラス擬似要素（ pseudo-elements ）とは、要素内の特定の文字や行に対してスタイルを指定したり、文字や画像を追加する為のもので、「 :before 」 擬似要素と 「 :after 」 擬似要素を使用すると、対象となる要素の前または後に、content プロパティで指定した内容が表示されます content プロパティには、テキスト文字、及び、URL指定で、画像も表示できます
擬似クラス（ pseudo-classes ）とは、要素が特定の状態にある場合にスタイルを指定する為のもので、下記では、「 :last-child 」 が相当します 擬似要素、擬似クラス、ともに、セレクタとなる要素名のあとにコロン（ :）をつけて、擬似要素 擬似クラス名を記述します擬似要素と擬似クラスを使用したパンくずリスト（ breadcrumb navigation ／ トピックパス topic path ）の作成例
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ホーム ＞ HPB19 ＞ HTML スタイルシートの活用 |