ヘッダスタイル情報／ファイル内スタイル設定
ヘッダスタイル情報／ファイル内スタイル設定
CSS設定をファイル内で有効にするには
CSSファイル内設定は、W3C仕様CSS1及びHTML3.2で定義され、HTML(XHTML)のheadタグ内においてstyle要素の開始タグと終了タグ間でCSSプロパティを設定します。
ちなみにこれを含めCSSスタイルシートの適用方法には3種類あります。
- 【CSS1/HTML4で定義】
- 個々のHTML要素内でstyle属性により設定するCSSインライン設定
- 【CSS1/HTML3.2で定義】
- headタグ内においてstyle要素内で設定するCSSファイル内部設定
- 【CSS2/HTML4で定義】
- CSS設定のみの外部ファイルを読み込むCSS外部ファイル設定
これら３つのCSS設定方法は同時に利用する事ができ、同じタグの同じ属性への重複するCSS適用の優先順位は、このstyle属性によるインライン設定、次にstyle要素による内部設定、最後に外部ファイルであり、重複しない場合には複数の設定が併せて適用されます。
但し、CSS2(CSS 2.0/CSS 2.1)含む以降のCSSバージョンではCSS外部設定が推奨されていますし、後の編集作業などを考慮してもHTML(XHTML)タグ１つ１つに設定するインライン設定やページが増えれば増えるほどファイルごとに設定するファイル内設定は後の編集も大変ですので外部ファイルを使うとよいでしょう。
尚、適宜注釈を入れてはいますが、CSSのお約束事や記述方法などについては下記も併せて参照。
| 【CSS共通定義】文法と記述方法 |
1つのhtmlファイル内部全体にスタイル設定
CSSの設定を１つのhtmlファイル全体で有効にするには<head></head>タグ内でstyle要素を宣言して設定します。
(<body></body>タグ内に設定した場合も同様の効果があるケースもありますが、script要素と異なり、用途に違いもなく、効果があってもその差はない為、メタデータ(データの為のデータ)はbody部ではなくhead部に記述するという作法に沿っておくのが無難です。)
１つのファイル内全体にスタイルを反映させる為には、ブラウザに
「ここからファイル内で有効なスタイルを設定しますよ」
と教える為に<head></head>の内側に
<!-- 必要に応じた doctype --> <html> <head> <meta http-equiv="content-style-type" content="text/css"> <style type="text/css"> <!-- HTML/XHTML用のコメントアウトの開始と終了はなくても可 そもそもhead内の文字は表示されないはずも 万一の為に記述するケースも /* とは言え本来は、style要素内はCSS外部ファイルと同じ扱いなので コメントアウトもCSSのコメントアウト設定を使用することは妥当 */ p { width:90% ; /* color:#000000 ; CSS設定の中のコメントアウトは、当然CSSのコメントアウト記号 */ } --> </style> </head> <body> ... </body> </html>
のようにstyle要素を記述し、このstyle開始タグとstyle終了タグの間にCSSプロパティの設定方法に沿ってhtmlファイル内で反映させたいCSSプロパティを設定します。
尚、この時、CSSを使う際には、style開始タグ内で利用する内容の種類を設定する為のtype属性にその値として[ text/css ]と設定します。
(ブラウザによっては、type属性設定がなくても反映されるケースもありますが、設定しておくのが無難です)
セレクタと擬似要素・擬似クラス
インライン設定とは異なり、ファイル内設定や外部ファイル設定では、セレクタと擬似要素・擬似クラスを使用することが可能です。
次は、外部スタイルシートによる設定方法を見てみましょう。
CSS設定を専用ファイルにまとめたい！『CSSスタイルシート外部ファイル編』
CSS/スタイルシート情報
- CSSインライン設定
- CSSファイル内部設定
- CSS外部ファイル設定
