インラインスタイル情報／インラインスタイル設定
インラインスタイル情報／インラインスタイル設定
CSSインライン設定するには
CSSインライン設定は、W3C仕様CSS1とHTML4で定義された各HTML要素(XHTML要素)に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共通定義】文法と記述方法 |
◆CSSインライン設定
CSSインライン設定の特徴は、ほぼ全てのhtml/xhtmlタグに直接スタイル設定を記述してCSSを適用できる点です。
インラインスタイル設定はCSSプロパティの設定方法に沿って、CSSを使いますよとブラウザに教える為にhtml要素の開始タグの中で[style=""]と記述して、この[""](ダブルクォーテーション)の中に例えば次のように記述します。
|
style="color:blue ; font-size:9pt ; background-color:orange" |
この場合、文字の色[color]は青[blue]、フォントサイズ[font-size]は9ポイント[9pt]、背景色[background-color]はオレンジ[orange]を設定するという意味になります。
◆サンプル(table開始タグにstyle=""属性を設定)
<table style="color:blue ; font-size:9pt ; background-color:orange ">
CSS指定する際には、<font></font>タグ(W3C非推奨)とは異なりますので注意しましょう。
◆色は『color : 』サイズは『font-size : 』
◆『：(半角コロン)』をはさんで右側に設定値を記述する
◆『：』の後の設定値は引用符で括らない([ '' ][ "" ]不要)
◆プロパティがいくつか続く場合、設定と設定の間に『；(半角セミコロン)』を指定
◆プロパティがいくつか続く場合、最後のプロパティ設定の最後尾には『；(半角セミコロン)』は不要
ただ、あってもブラウザが無視する為エラーにはなりませんから後でプロパティを追加する可能性を考えれば付加しておいた方が無難でしょう。
※ちなみにCSSのコメントは、[/*]で始まり[*/]で終わり、この内側に記述します。
SGML/HTMLの[ <!-- --> ]とは異なりますのでご注意ください。
次は<head></head>タグ内でのファイル全体への設定にチャレンジ。
CSSスタイルシートをHTMLファイル内で設定したい！『CSSファイル内部設定編』
CSS/スタイルシート情報
- CSSインライン設定
- CSSファイル内部設定
- CSS外部ファイル設定
