気の向くままに辿る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(英文)

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

【CSS1基本コンセプト】

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

htmlの一部としてのCSS

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

<style type="text/css"></style>

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

<div style=""></div>

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

<style type="text/css">
<!--
p {margin: left;}
-->
</style>

グループ化

 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設定が反映される

<div class="fsize"></div>

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

 尚、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設定が反映される

<div id="fcol"></div>

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

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

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

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

コメント

/* CSSのコメント */

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

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

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

アンカー疑似クラス

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

印刷印字における疑似要素の利用
[:first-line]疑似要素

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

[:first-letter]疑似要素

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

セレクタ内の疑似要素

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

複数疑似要素の結合

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

【多重表示】

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

[!important]指定

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

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

多重表示命令

 CSS設定の優先順位

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

【書式型】

 CSSにおいてはボックス型とインライン型という概念において書式設定を行う

 ボックス型は、その指定の後に来る型が既定で改行されて始まる(≒終端に改行を伴う型)、インライン型は終端改行を伴わない型とも言える

 ボックス型は、その概念として外側から内側に向かってmargin/border/padding/(そのもの自体である)contentといった1つ以上の矩形領域から成る

ブロックレベル要素

 ボックス型の例としては、ul/li、ol/li要素から成るリストやtable要素やp、div要素などがあり、これらの要素をブロックレベル要素と呼ぶ

 ul/li、ol/li要素から成るリストの場合、各要素ごとにmargin/border/paddingが、それ以外のブロックレベル要素は、上下左右(top/bottom/left/right)にそれぞれmargin/border/paddingといった矩形領域を1つ以上持つものとする

縦方向における書式

 各構成要素のmargin/paddingやmargin-top/padding-top/margin-bottom/padding-bottomなど

横方向における書式

margin-left/border-left/padding-left
width
padding-right/border-right/margin-right

 これら7つの合計は、常に親要素のwidthと等しくなる

リストアイテム要素

 list-item値から成るdisplayプロパティを持つ要素は、ブロックレベル要素として書式化されたが、list-item markerが優先する

 マーカーのタイプは、list-styleプロパティによって決まり、list-styleプロパティで設定される値によって配置される

流動的な要素/浮動要素

 floatプロパティを利用し、ブロックレベル要素を横に並べることができる

 img要素による画像とp要素による文章構成などでは画像に文章を回り込ませることができる

 clearプロパティでfloat効果を解除することができる

インライン要素

 インライン要素の例としては、spanやb/strong/em等々改行を伴わない要素

代替要素

 imgタグのsrc属性や幅や高さ指定時の[auto]など他の要件によって性質が変わることがある要素

行の高さ指定

line-height:120%

 行の高さはline-heightプロパティに数値と単位(pt/em/px/%...etc.)を指定する

キャンバス

 CSS1におけるキャンバスは、ブラウザの可視部分に当たるbodyのこと

BR要素

 CSS1ではHTMLのbr要素の代替になるような機能を持つCSSプロパティはないが、将来的に策定されるかもしれない

CSS/スタイルシート情報

ホーム前へ次へ