気の向くままに辿るIT/ICT/IoT

CSS / Cascading Style Sheets / スタイルシート

CSS1/CSS 1.0/Cascading Style Sheet level 1

CSS1とは？

CSS1 / CSS 1.0 / Cascading Style Sheet level 1

CSS1とは

　CSS1は、『Cascading Style Sheet level 1』の略でCSSの最初のCSSバージョンであり、1996年12月17日W3Cで勧告となりました(1999年1月11日に加筆あり)。

略称表記としては、CSS 1.0やCSS 1ではなく、CSS1 に統一されているようです。

　Cascading Style Sheet/CSSは構造化とマークアップに徹しスタイルとは本来無縁であるはずの構造化マークアップ言語であるHTMLを視覚的に装飾する事を目的に策定されました。

CSS1プロパティ一覧

　以下は1996年12月17日勧告1997年加筆時点のCSS1仕様の概要ですが、後の

1999/01/11加筆版Cascading Style Sheets, level 1(英文)

2008/04/11改訂版Cascading Style Sheets, level 1(英文)

と異なる点については考慮していません。

【CSS１基本コンセプト】

　CSS1の基本コンセプトは以下の通りです。

htmlの一部としてのCSS

　HTMLファイル内のhead内に下記の指定をすれば【ファイル全体】に以下の開始タグと終了タグの間有効となる(body内のどこに書いても同様の効果がある場合もあるがイレギュラー)

　同様にHTMLファイル内の各要素(pとかdiv等々)の開始タグ内にstyle属性を指定してイコールの右辺にCSS指定をすれば【当該要素内】で有効となる

　尚、伝統的には不明なプロパティやプロパティ値は無視されるはずだが、各種ブラウザ対応移行期において万が一にもstyle要素内での設定がHTMLの一部として解釈されないようにとの配慮からHTML用コメントアウト記号が記述されることもある

グループ化

　CSS設定は

H1 { font-family: helvetica }

のようにするが、

H1, H2, H3 { font-family: helvetica }

のようにカンマ区切りで対象要素やセレクタを複数指定したり、

H1, H2, H3 { font-weight: bold; font-size: 12pt; }

のように設定をセミコロンで区切って複数指定することもできる

継承

　例えばbody要素で背景色やアンカーの色を指定するとページの可視部分全体に反映され、ある要素がある要素の内側に入れ子となって(ネストして)いれば外側の要素に対する設定を継承しつつ内側の要素に設定を加えることができたりする

　また、フォントサイズや高さなどは%などで相対値を指定すれば親要素などから継承した値に対する比率として計算される

CLASSセレクタ

.fsize { font-size: 12pt }

div.fsize { font-size: 12pt }

　head内やbody内で<style type="text/css"></style>を利用してCSSを設定する場合、不特定多数の要素対象であれば先頭に、特定要素対象であれば当該要素名直後に[ . ]ドット／ピリオド1つを付加したセレクタは、HTML要素の開始タグにおいてclass=""を使って以下のように設定すれば当該要素内にCSS設定が反映される

　この時、イコールの右辺にはセレクタ(名)を記述するが先頭のドット／ピリオドは不要

　尚、classセレクタは複数個所、複数のタグに設定可能であり、同じ名前のclassセレクタが同一HTML文書内に複数あっても可

IDセレクタ

#fcol { font-color: #000000 }

div#fcol { font-color: #000000 }

　head内やbody内で<style type="text/css"></style>を利用してCSSを設定する場合、不特定多数の要素対象であれば先頭に、特定要素対象であれば当該要素名直後に[ # ]シャープ1つを付けたセレクタは、HTML要素の開始タグにおいてid=""を使って以下のように設定すれば当該要素内にCSS設定が反映される

　この時、イコールの右辺にはセレクタ(名)を記述するが先頭のシャープは不要

　尚、idセレクタは同一HTML文書内に複数あってもよいが、個々のidセレクタは同一HTML文書内で一意(1つ)である必要がある

文脈上の(混合)セレクタ

　要素が入れ子となる(ネストする)場合、外側の要素のCSS設定を継承するが、継承を打ち消すような完全に干渉した設定でない限りは要素個々に設定されたCSS設定も併せて有効となる

/* CSSのコメント */

　CSSのコメントは単一行、複数行何れの場合もスラッシュ+アスタリスクとアスタリスク+スラッシュ内に記述。

【疑似クラスと疑似要素】

　CSS1には「疑似クラス」と「疑似要素」があります。

アンカー疑似クラス

　:link(既定アンカー)、:visited(訪問済みアンカー)等

印刷印字における疑似要素の利用

[:first-line]疑似要素

　ラテン語などにおいて先頭行を全て大文字とする指定

[:first-letter]疑似要素

　ラテン語などにおいて段落の先頭１文字を大文字とする指定

セレクタ内の疑似要素

　id/classセレクタとして指定したセレクタ名に[:first-line]等を付加するケース。

複数疑似要素の結合

　セレクタに指定した擬似要素が入れ子となる(ネストする)ケース。

【多重表示】

　「Cascading」が「重ねて表示する」、「Style Sheet」が「装飾設定」を意味する「Cascading Style Sheet」では、同一対象のある状態に影響を与えるCSSプロパティが上書きまたは継承追加されるが、その際のルール概要は下記の通り。

[!important]指定

div { font-weight: bold ! important; font-size: 12pt; }

　重要な設定に対し、プロパティ値の後にエクスクラメーションマーク(感嘆符・びっくりマーク)とimportantを付与することができる

多重表示命令

　CSS設定の優先順位

　style要素と各要素に設定されたstyle属性、要素の入れ子による設定など重複しない部分は継承され、重複がなく継承される値もない場合には、初期値が設定される
　明示的に!importantによって重みづけされた設定を優先
　作者のCSS設定は、ユーザーエージェント(ブラウザ)の既定値を上書きする読者のCSS設定を上書きする
　セレクタが設定されている場合、より多く設定されているセレクタ設定を優先(id/classの数と設定値の数をカウントして多いもの)
　同じ重みのCSS設定は、後で設定された値を優先(後で設定された値が有効)