5. CSS properties for visual media in detail

本章の目次

5章では,CSSが規定する個々のプロパティ(property)に関する解説を行います。5章を暗記する必要はありません。5章は「辞書」としてお使いください。なお,プロパティの総合的な使い方は6章に譲ります。

5.1. リファレンスの読み方

CSS2では,以下の特徴に着目して再生メディアを分類します。

着眼点区分
大区分画像(visual),音声(aural),接触(tactile:点字など)
ページ区切りない(continuous),ある(paged)
画素グリッド(grid:文字端末など),ビットマップ(bitmap:普通のWindowsやMacなど)
対話性ある(interactive),ない(static:印刷物など)

多くのプロパティは複数のメディアで共通ですが,中には「音声再生専用のプロパティ」なども存在します。なお,CSS1が用意したのは,「visualでcontinuousのみ,あるいはpagedと共通」のプロパティです。CSS2で追加されたのは「aural」「visualでpaged専用」のプロパティです。そして,読者の興味の大部分はCSS1相当の区分に集中しているものと思われますし,実装が進んでいるのものこの区分です。そのような都合から,本章で詳細に取り扱うのは「visual(主にCSS1相当)」とし,その他のCSS2追加プロパティについては7章「new feature in CSS2」にまわします。

なお,各プロパティの定義の記述はW3Cの仕様書をもとにしていますが,理解しやすさのために,一部にカッコを追加するなどの改変を行っています。あらかじめご了承ください。

5.1.1. 値定義の読み方

この章では,次の形式で各プロパティを紹介していきます。

margin-left 左マージン
<一般サイズ> | <パーセント> | auto
/* auto…自動処理 */
初期値
0
適用対象
全要素
継承される?
no
パーセントの意味
親要素のwidthに対する割合
マイナス値

値の定義では,次の特殊な記号を使用します。

原則

選択回数の明示

font-style 斜体
normal | italic | oblique
正しい解釈:
font-style: normal;
font-style: italic;
間違った解釈:
font-style: normal italic; /* 二つは書けない */
font-style: "normal"; /* キーワードには" "を付けない */
text-decoration 下線など
none | [ underline || overline || line-through || blink ]
正しい解釈:
text-decoration: none;
text-decoration: blink underline;
間違った解釈:
text-decoration: none underline; /* noneは||のグループではない */
text-decoration: underline overline underline; /* 2度は書かない */

値の説明の明示

color 前景色(文字色)
<色>
正しい解釈:
color: #fff;
color: rgb(0, 0, 255);
color: red;
間違った解釈:
color: <red>; /* <>はいらない */

記述回数の明示

font フォント関連の一括指定
[ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ /<line-height> ]? <font-family>
/* line-heightの直前のスラッシュは,そのままスラッシュとして記述 */
/* font-sizeとfont-familyだけは必須 */
正しい解釈:
font: 700 15pt serif;
font: italic 10pt/1.5 sans-serif;
間違った解釈:
font: normal serif; /* font-sizeは省略できない */
font: 10pt 1.3 serif; /* line-heightの直前には「/」が必須 */

5.1.2. 「適用対象」の考え方

全ての要素に全てのプロパティを指定可能ですが,全てが適用されるとは限りません。例えば,text-align(水平位置そろえ)はインライン系要素(STRONG要素など)には適用されません。なぜなら,適用しようが無いからです。このように,CSSでは,対象要素がブロック系要素であるかインライン系要素であるかによって,プロパティを適用するかどうか判断します。

なお,その所属の初期設定はHTMLの仕様で定められているとおりですが,スタイルシートのdisplayプロパティ(5.8節)によって(表示形式だけ)変更可能です。したがって,厳密には,各プロパティが適用されるか否かはdisplayプロパティの値で判断されます。

CSS1では,特殊なインライン系要素として「置換要素」を想定しています。置換要素とは,IMG要素など,ソース中の文字列が画像などに置きかえられた後に表示されるものです。プロパティによっては,「置換要素」の場合には意味合いが変化します(たとえばwidthプロパティ:5.7節)。

5.1.3. CSS1とCSS2の違いについて

CSS2は,CSS1の上位互換の仕様として作成されました。すなわち,CSS1のプロパティは全てCSS2でも採用されています。したがって,特に何も明示しない限り,この章で紹介するプロパティは共用です。

しかし,実際には一部のプロパティについて改変が行われました。その場合は,必ずその旨を本文中に明示しています。

また,CSS2では,全てのプロパティの値に「inherit」を導入しました(4.2を参照)。これはCSS1には存在しないキーワードであるため,本書ではあえてinheritを値リストに表示しませんでした。これについてはご注意ください。

5.2. 「一般サイズ」単位の解説

いくつかのプロパティに共通して使われるサイズの単位に関して,あらかじめここで説明しておきます。

5.2.1. 絶対単位

絶対単位とは,サイズを絶対尺度で指定する単位です(表5-1)。

表5-1 CSSにおける絶対単位(Lie and Bos(1)より)
単位意味備考
mmミリメートル
cmセンチメートル1cm = 10mm
inインチ1in = 25.4mm
ptポイント72pt = 1in
pcパイカ組版用語,1pc = 12pt

5.2.2. 相対単位

「現在の文字サイズ」を意味するem(エム)・ex(エックス)と,「画面の解像度に依存する」px(ピクセル)は,状況によって指示するサイズの変動する単位,すなわち相対単位です。

emはもともとは組版用語で,アルファベットMのサイズ,転じて「文字を描画するのに必要な“高さ”」を意味しています。CSSでは“その要素における”フォントサイズそのものとして扱われます。例えば,「line-height: 1.5em」は,フォントサイズが14ptならば21ptに,10ptならば15ptに設定されます。

exはその要素のフォントサイズにおける「x-height」の大きさです(図5-1)。フォントファミリーが異なれば,同じフォントサイズでもex値は変ります。「x-height」の値は,フォントデータそのものに含まれています(「x-height」という概念はラテンアルファベット圏のものであり,日本語文字では利用されません)。

図5-1 x-height
【図5-1】――x-heightとは小文字のxの高さのことです。同じフォントサイズでも,フォントファミリーが異なれば,x-heightの値は異なります。

pxはピクセル,即ち画面に表示できる最小の画素のサイズです。同じサイズのディスプレイでも,解像度設定(640x480とか,800x600とか)によってピクセルのサイズは変化します。

5.2.3. パーセント

単位「%」は,サイズをパーセントで指定します。ただし,「何に対するパーセントなのか」はプロパティによって異なります。例えば,widthプロパティでは表示領域の横幅に対するパーセントを,font-sizeプロパティではその親要素の文字サイズに対するパーセントとなります。詳しくは各プロパティの単元で説明します。

5.2.4. 比率指定の継承に関する注意

emユニットと%による指定が継承される場合は,相当する絶対値に変換された後に継承されます。次の例の場合,P.STARTのfont-sizeは12pt*1.2=14.4ptであり,その子要素は14.4ptを継承します。

もし,相対値として継承されるとすると,次の例ではP,CITE,STRONGの順に文字が大きくなってしまいます。

<STYLE TYPE="text/css">
BODY{font-size: 12pt}
P.START {font-size: 1.2em}
</STYLE>
<BODY>
<P CLASS="START">最近読んだ書籍
<CITE>「ミュージックマガジン<STRONG>10月号</STRONG>」</CITE>では,
興味深い特集が組まれていた。</P>
</BODY>

この文脈では,CITEはPから指定を継承し,STRONGはCITEから継承します。

正しい例――継承が「計算結果」の場合の継承結果:
CITE{font-size: 14.4pt}
STRONG{font-size: 14.4pt}
誤った継承の例――継承が「相対性」の場合の継承結果:
CITE{font-size: 17.28pt  /* 14.4*1.2=17.28pt */}
STRONG{font-size: 20.736pt  /* 17.28*1.2=20.736pt */}

5.3. フォント系

単体指定
font-family フォントファミリー
font-size サイズ
font-weight 太さ
font-style 斜体
font-variant スモールキャピタル
line-height 行幅
一括指定
font
CSS2追加分
font-stretch 横方向の引き延ばし
font-size-adjust サイズ修正
BODY{
    font: 12pt/1.5 "Times Roman", "Times", serif;
}
STRONG{
    font-style: italic;
    font-size: 1.2em;
}
H1{
    line-height: 1;
}

5.3.1. 単体指定

font-family フォントファミリー
[[<ファミリー名> | <系統名>],]* [<ファミリー名> | <系統名> ]
初期値
実装依存
適用対象
全要素
継承される?
yes

専門用語の厳密な解説はしませんが,「フォントファミリー名」とは"Times New Roman"や"Century"のような名前です(ファミリー名は定義済みのキーワードではありませんので,クォーテーション(" "あるいは' ')で囲みます)。

このプロパティには複数の値を指定できます。複数の指定がある場合,WWWブラウザは前者から順に所有するファミリーを探し,最初に見つけ出したものを採用します。

font-family: "Times Roman", "Times", serif;
/* まず"Times Roman"を探し,無ければ"Times"を,それも無い場合はserifを */

また,“ファミリー名”ではなく,ファミリーの一般的な性質を示唆する“系統名”でもファミリーを指定できます(表5-2)。系統名で指定した場合,WWWブラウザが存在するファミリーの中から適切なものを選択します。一般に,文書の読み手がどんなファミリーをもっているのか推測することは不可能なため,系統名を利用する方が望ましいでしょう(系統名は定義済みのキーワードであるため,クォーテーションでは囲みません。囲ってしまった場合は,"serif"などという特定の名前のファミリーを指定したことになります)。

表5-2 系統名とその説明
系統名「serif」は,「ひげ付き」という意味で,Times Romanや明朝体などがこの仲間です。系統名「sans-serif」は,「ひげ無し」という意味で,Arialやゴシック体などがこの仲間です。系統名「monospace」は,「等幅」という意味で,Courieなどがこの仲間です。系統名「cursive」は,「手書き風」という意味で,Luciaや楷書体などがこの仲間です。系統名「fantasy」は,「装飾付き」という意味で,ALGERIANやPOP体などがこれの仲間です。
font-size サイズ
xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller | <一般サイズ> | <パーセント>
初期値
medium
適用対象
全要素
継承される?
yes
パーセントの意味
親要素のfont-sizeに対する割合
マイナス値
不可

「xx-small〜xx-large」は固定サイズ指定で,この順に大きくなります。同じ指定の要素は同じサイズで表示されますが,具体的なサイズはWWWブラウザの設定に一任されます。CSS2では,それぞれの関係は,小さいほうから大きいほうへ「1.2倍程度」だとされています。

「larger」「smaller」は相対指定で,親要素のサイズよりも一段階大きく(小さく)なります。この「一段」がどの程度かはWWWブラウザに一任されますが,基本的には「medium」が「large」に(「small」に)なるのと同程度の変化だと思われます。なお,継承されるときは相当する絶対値として継承されます。

コラム:相対指定のススメ(1)

font-sizeプロパティの場合のみ,emユニットが「親要素のfont-size」を意味しています。この性質は,インライン系要素にとっては特に重要です。たとえば,STRONG要素に対し

STRONG{font-size:1.2em}

と指定しておけば,フォントサイズが15ptのH1要素中に現われた場合でも,10ptのP要素中に現われた場合でも,常に「親要素のフォントサイズの1.2倍」という関係を自動的にキープできます(同じような効果は,borlder・smaller指定でも得られます)。

font-weight 太さ
normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | bolder | lighter
/* 100が最も細く,900が最も太い。 */
/* normal = 400,bold = 700 */
/* 250などは指定できません。 */
初期値
normal
適用対象
全要素
継承される?
yes

「100〜900」は太さの絶対サイズで,これ以外の値(例えば250)は指定できません。ただし,実際の表示として9段階の太さが区別できるかどうかはWWWブラウザおよびフォントに一任されます。

「bolder」「lighter」は相対指定で,親要素の指定よりも一段階太く(細く)なります。この「一段」はWWWブラウザに任されますが,「400」が「500」に(「300」に)なるのと同程度の変動が期待できます(上限は900,下限は100です)。なお,継承されるときは相当する絶対値として継承されます。

コラム:相対指定のススメ(2)

相対指定はインライン系要素にとって特に重要です。たとえば,STRONG要素に対し

STRONG{font-weight: bolder}

と指定しておけば,太さ700のH1要素中に現われた場合でも,400のP要素中に現われた場合でも,常に「親要素よりも太い」という関係がキープできます。

font-style 斜体
normal | italic | oblique
初期値
normal
適用対象
全要素
継承される?
yes

italicもobliqueも日本語では同じ「斜体」と受け取られがちですが,ラテンアルファベットのファミリーによっては,この2者が区別されます(表5-3)。

表5-3 italicとobliqueの意味
obliqueが文字を傾けただけ(単純斜体)なのに対して,italicは文字の形状が異なります(専用斜体)。
font-variant スモールキャピタル
normal | small-caps
初期値
normal
適用対象
全要素
継承される?
yes

small-capsを指定すると,“小文字”で書かれたテキストがスモールキャピタル文字に調整されます(図5-2)。なお,この概念は日本語文字には存在しません。

図5-2 スモールキャピタルの例
SPAN.FAMILYNAME{ font-variant: small-caps}
<P><SPAN CLASS="FAMILYNAME">Zappa</SPAN>, Frank
【図5-2】――Zappaの"appa"の部分は,「小さな大文字」で表現されています。
line-height 行幅
normal | <掛ける値> | <一般サイズ> | <パーセント>
/* パーセントと掛ける値の継承の違いに注意 */
初期値
normal
適用対象
全要素
継承される?
yes
パーセントの意味
その要素自身のフォントサイズに対する割合
マイナス値
不可

行幅は,上下に均等に割り振られます。文字そのものの幅も含んだ値を指定してください(図5-3)。

図5-3 line-height
{line-height:1.4em}の場合,文字自身に1em,上下の余白に0.2emずつが充てられます。

「掛ける値」は,「その要素のフォントサイズの何倍を行幅にするか」を無単位の実数で記述します。

line-height: 1.4;

「掛ける値」の効果は,emユニットとまったく同じです。ただし,継承のされかたが異なります。

5.2節で説明したとおり,emおよびパーセントは相当する絶対値に変換された後に継承されます。しかし,line-heightの「掛ける値」はつねに相対値として継承されます。このふたつは,望む効果に応じて使い分けなければなりません(図5-4)。

図5-4 行幅の継承の違い:em,掛ける値
【図5-4】――emでの指定では行幅が一定ですが,掛ける値での設定では子要素のフォントサイズに応じて行幅も変化します。

5.3.2. 一括指定

一括指定プロパティ(ショートハンド・プロパティ)は,関連するプロパティを一括して指定するためのプロパティです。

font
[ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ /<line-height> ]? <font-family>
/* line-heightの直前のスラッシュは,そのままスラッシュとして記述 */
/* font-sizeとfont-familyだけは必須 */
初期値
個々のプロパティの初期値
適用対象
全要素
継承される?
yes
パーセントの意味
個々のプロパティのとおり

一括指定プロパティの場合,値指定を省略した個々の部分は,「初期値を明示した」と解釈されますのでご注意ください。

{
    line-height: 1.5;
    font: 12pt sans-serif;
}

上のような記述は,結局下のように解釈されます。

{
    line-height: 1.5;
    font: normal normal normal 12pt/normal sans-serif;
}

すなわち,fontプロパティ以前に指定していたline-heightの指定は無効になります。

5.3.3. CSS2追加分

font-stretch 横方向の引き延ばし
normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | inherit
初期値
normal
適用対象
全要素
継承される?
yes
マイナス値
不可

font-sizeはフォントの高さに関する指定で,こちらはfont-sizeに対する横の割合の指定をするものです(図5-5)。通常がnormal,ultra-condensedがもっとも狭く,ultra-expandedがもっとも広くなります。なお,具体的な比率は規定されていません。

widerとnarrowerは,親要素に対する相対指定です。

図5-5 font-stretchの適用例
【図5-5】――condensedでは横幅が標準より狭く,expandedでは横幅が標準より広くなります。
font-size-adjust サイズ修正
<number> | none | inherit
/* none=修正しない */
初期値
none
適用対象
全要素
継承される?
yes
マイナス値
不可

同じfont-sizeであっても,font-familyが異なればサイズが違うように感じることがあります。その原因は,x-heightの違いにあります。そこで,font-sizeをx-heightの違いにあわせて修正するために,font-size-adjustプロパティを用います。

font-size-adjustは,font-familyを複数指定した場合にのみ利用します。font-size-adjustの値には,font-familyで指定したファミリーのz値(すなわち,font-size÷x-height)を設定します。WWWブラウザは,実際に選択されたファミリーのz値を用いて,以下のようにfont-sizeを修正します(図5-6)。

図5-6 フォントサイズ修正結果例
【図5-6】――Verdanaというフォントファミリーのフォントサイズを1としたときに,Flemish Scriptというフォントファミリーのフォントサイズを2.07とすると,見た目上同じサイズに見える。
CSS2仕様書15.2.4より転載。図中の数字は,フォントサイズを何倍したかを現している。それぞれでフォントサイズは異なっているが,見た目の印象は同じサイズになっている。
コラム:筆者の感想

このプロパティは,フォントデータにz値が含まれていること,WWWブラウザがその値を判別できることを前提にしています。今のところ,一般向けのWWWブラウザではこのような芸当はできませんし,そもそもユーザは自分が利用しているフォントファミリーのz値を知らないと思われます。

また,日本語フォントの場合はどのように処理するのでしょう? というわけで,我々にはあまり関係の無いプロパティだと言ってよいでしょう。

font 一括指定
[ [ <'font-style'> || <'font-variant'> || <'font-weight'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar | inherit
初期値
個々のプロパティの初期値
適用対象
全要素
継承される?
yes
パーセントの意味
個々のプロパティのとおり

CSS2ではfontプロパティの指定方法として,「システムフォントを指定する」方法が追加されました。

カッコ[ ]の位置に注目してくだされば分かるのですが,指定方法は「CSS1と同じように指定する」と「システムフォント名のみを記述する」のどちらか一方からしか選べません。システムフォントを指定した場合は,フォントサイズなどを細かく指定できないことになります。もし調整を行いたいならば,fontプロパティより後でfont-sizeプロパティなどを活用してください(一括指定は,それまで行われた指定をすべて上書きしてしまいます。したがって,「後に」宣言しなければなりません)。

font: caption;
font-size: 1em;

5.4. 色と背景効果系

単体指定
color 前景色(文字色)
background-color 背景色
background-image 背景画像
background-repeat 背景画像の繰り返し制御
background-position 背景表示位置
background-attachment 背景スクロール
一括指定
background
CSS2追加分
システムカラーという概念
BODY{
    color: #fff;  /* white */
    background: #000 url(back1.gif);  /* black,image */
}
STRONG{
    color: red;  /* #f00, rgb(255, 0, 0) */
}
H1{
    background: #faa url(heading.gif);
    /* 要素ごとに背景を変えられる */
}

5.4.1. 単体指定

color 前景色(文字色)
<色> /* 表5-4を参照 */
初期値
実装依存
適用対象
全要素
継承される?
yes
表5-4 色の指定方法
記述意味
#RGB16進1桁ずつ……#820は#882200に相当
#RRGGBB16進2桁ずつ
rgb(0-255, 0-255, 0-255)0-255で
rgb(100%, 100%, 100%)0-100%で
whiteなど定義済みの名前(表5-5を参照)
【注】

16進数とは,一桁で0〜15を表わす数字の記述法です。0〜9,A〜Fを用います。

16進10進
A10
F15
1016
1A26 (=16+10)
コラム:色指定に関して

数値と色の詳細な関係は,ソフトウェアなどで確認するべきでしょう。例えば,Windows95のシステムカラー・パレットでも確認できます。

ただし,全てのWWW利用者がフルカラー表示のモニタを利用しているとは限りません。画像で利用している色も含んで256色以上を指定する場合は,特にカラーバランスにご注意ください。

表5-5 定義済みカラーテーブル
定義済みの名前近似値表示例備考
red#ff0000#f00Rが最大,GとBは0,したがって赤。
lime#00ff00#0f0ライム……明るい緑
blue#0000ff#00f
black#000000#000
gray#808080#888灰色=(黒+白)÷2
silver#c0c0c0#ccc薄い灰色
white#ffffff#fff
maroon#800000#800栗色
green#008000#080通常の緑
navy#000080#008
purple#800080#808紫=(赤+青)÷2
olive#808000#880オリーブ
teal#008080#088青緑
yellow#ffff00#ff0
fuchsia#ff00ff#f0f濃い紫
aqua#00ffff#0ff水色
background-color 背景色
<色> | transparent
初期値
transparent
適用対象
全要素
継承される?
no

4章で説明したとおり,通常は「transparent(透明)」で,親要素の背景がそのまま使われます。

background-image 背景画像
<url> | none
初期値
none
適用対象
全要素
継承される?
no

URLは「url(」と「)」で囲って示します。絶対URLでも相対URLでも構いません。相対URLは,HTML文書からではなく“スタイルシートファイルからの”相対URLとして記述します。

一般形式:
url(ここにURLを書く)
例:
background-image: url(http://www.foo.com/bar/img/dog.gif);
background-image: url(cat.gif);
コラム:「スタイルシートを使おう!」

スタイルシートを用いない場合,文字色・背景色・背景画像はBODY要素の属性で指定します(HTML3.2,4.0-Transitional)。しかし,この方法では本文全体への一括指定しかできません。

ところが,スタイルシートを用いれば,任意の要素に対して文字色・背景色・背景画像を指定できます。すなわち,H1要素だけの背景画像,H2要素だけの背景画像などを別々に指定できるのです。

このことは大変単純な事柄ですが,「見栄え指定の進歩」という意味では驚異的だと思いませんか?

HTMLだけで無理にスタイルを指定しようとしている人は,いつまでたってもこの利点を享受できません。このことを友人みんなにふれてまわってください。

「スタイルシートを使おう! だって,こんなにすごいんだぜ」

background-repeat 背景画像の繰り返し制御
repeat | repeat-x | repeat-y | no-repeat
/* 水平垂直|水平のみ|垂直のみ|繰り返さない */
初期値
repeat
適用対象
全要素
継承される?
no
background-position 背景表示位置
[ [<パーセント> | <一般サイズ>] [<パーセント> | <一般サイズ>]? ] | [ [top | center | bottom] || [left |center | right] ]
/* 垂直位置 水平位置 */
/* 水平垂直を同じにする場合は,一方だけ指定すればよい */
初期値
0% 0%
/* top left */
適用対象
ブロック系要素と置換要素
継承される?
no
パーセントの意味
要素自体の表示サイズ(widthやheight)に対する割合

背景画像の表示開始位置を設定します。もしrepeat-yかつbackground-positionがrightであれば,その要素の右端に表示され,垂直方向に繰り返されます(図5-7)。

図5-7 background: repeat-y right
【図5-7】――画面右側の背景が,画像が縦方向へ繰り返し敷き詰められることによって表示されています。
background-attachment 背景スクロール
scroll | fixed
初期値
scroll
適用対象
全要素
継承される?
no

指定がfixedの場合は,前景文字などをスクロールさせても,背景画像はスクロールしません(図5-8)。

図5-8 背景固定
【図5-8】――文字をスクロールさせても,背景画像は同じ位置にとどまります。

5.4.2. 一括指定

background
<background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>
初期値
個々のプロパティの初期値
適用対象
全要素
継承される?
no
パーセントの意味
個々のプロパティのとおり

5.4.3. システムカラーという概念

CSS2では,<色>の値として「システムカラー」が導入されました。

近代的なGUIを備えたシステムでは,メニューやボタンやウィンドウ枠の色などを個々のアプリケーションが管理するのではなく,システムが一括管理するようにしています。この「OSが管理する色」を「システムカラー」といいます。ユーザは「システムカラー」の設定を変更するだけで,すべてのアプリケーションの表示色を変更できるわけです。システムカラーの概念は,WindowsやMac,はてはJava仮想マシンにも存在します。(例えば,Windows95では「コントロール」の「画面」の「デザイン」の各項目を変更してみてください。)

スタイルシートからシステムカラーを指定できれば,「読者が普段慣れ親しんでいる色」を指定できることになります。その一方で,シート記述時には表示色が想像できないわけですから,扱いは難しいかもしれません。

BODY{
    color: WindowText;
    background: Window;
}

CSS2は,表5-6のキーワードを「システムカラー」用に用意しました。大文字小文字は区別されませんが,原文と同じように記述するほうが分かりやすいでしょう。

表5-6 CSS2におけるシステムカラー
名前対応する部分
ActiveBorderアクティブなウィンドウ枠の色
ActiveCaptionアクティブなウィンドウ(のタイトルバー)の色
AppWorkspaceMS-WORDのような「子ウィンドウ」を持つウィンドウ(MDI)の背景色
Backgroundデスクトップの背景色
ButtonFace立体的なボタンなどの地の色
ButtonHighlight選択(反転,ハイライト表示)された立体的なボタンなどの色
ButtonShadow立体的なボタンなどの影の色
ButtonTextボタンの文字色
CaptionTextラベルやタイトルバーなどの文字色
GrayText「使用不可(グレイアウト)」になっている文字色
Highlight選択リストなどの選択されている部分の色
HighlightText選択リストなどの選択されている部分の文字色
InactiveBorderアクティブでないウィンドウの枠の色
InactiveCaptionアクティブでないウィンドウ(のタイトルバー)の色
InactiveCaptionTextアクティブでないウィンドウ(のタイトルバー)の文字色
InfoBackgroundツールチップ(バルーンヘルプ)の背景色
InfoTextツールチップ(バルーンヘルプ)の文字色
Menuメニューの背景色
MenuTextメニューの文字色
Scrollbarスクロールバーのバーの色
ThreeDDarkShadow立体表示要素の暗い影の色(筆者注:ボタンとの違いが不明。また,この3つの影の違いが不明……ボタンの縁のようなものの明るい部分と暗い部分?)
ThreeDShadow立体表示要素の影の色
ThreeDLightShadow立体表示要素の明るい影の色
ThreeDFace立体表示要素の地の色
ThreeDHighlight選択された立体表示要素の色
Windowウィンドウの背景色
WindowFrameダイアログボックスなど(筆者注:borderとframeの違いが不明)
WindowTextウィンドウの文字の色

5.5. テキスト属性系

単体指定
word-spacing 単語間隔
letter-spacing 文字間隔
text-decoration 下線など
vertical-align 垂直位置(上付き下付き)
text-align 水平位置そろえ(右そろえ,左そろえ)
text-transform 大文字小文字
text-indent 行頭インデント
一括指定
なし
CSS2追加分
text-shadow 影文字
BODY{ text-align: left;}
P{ text-indent: 1em;}
STRONG{
    word-spacing: 1.5em;
    text-decoration: underline overline;
}

5.5.1. 単体指定

word-spacing,letter-spacing 単語間隔,文字間隔
normal | <一般サイズ>
/* normal = 0 */
初期値
normal
適用対象
全要素
継承される?
yes
マイナス値

word-spacingは「単語間隔」,letter-spacsingは「文字間隔」です。単語間隔はラテンアルファベット圏の概念で,単語を区切る空白などの幅になります。

指定値は「標準に対する追加の幅」であり,マイナス値を指定すれば文字は重なり合います。

これらのプロパティは,一般には文字の読みやすさの調整に使いますが,語句を目立たせるために極端な指定をしてもかまいません(STRONG要素など)(図5-9)。

図5-9 単語間隔と文字間隔
【図5-9】――word-spacingが例えばwordとspacingとの間隔を決定するのに対し,letter-spacingは例えばl,e,t,t,e,rのそれぞれの間隔を決定します。
text-decoration 下線など
none | [ underline || overline || line-through || blink ]
/* 下線 || 上線 || 取り消し線 || 点滅 */
初期値
none
適用対象
全要素
継承される?
no, しかし「透明」処理される

「無し」と指定するか,各種の指定を組み合わせた指定(「text-decoration: underline blink」など)が可能です。指定は継承されませんが,「透明」処理されるために一見継承されたように見えます。「継承されない」の意味は,「下線に更に下線が付くことはない」という意味だと考えても良いでしょう。

vertical-align 垂直位置(上付き下付き)
baseline | sub | super | text-top | middle | text-bottom | <パーセント> | top | bottom
初期値
baseline
適用対象
インライン系要素
継承される?
no
パーセントの意味
要素自身の'line-height'に対する割合で,プラスは上,マイナスは下
マイナス値

親要素に対する垂直位置関係を指定します。しかし,インライン系要素にしか適用されないため,一般には「直前の語句(単語)」に対する垂直位置関係になるでしょう(直前の語句の垂直位置が変更されていない限り)。単純に言えば「上付き下付き」ですが,かなり複雑な指定が可能です(図5-10)。なお,いわいる乗数x2のような効果を得たい場合は,super指定に加えてフォントサイズを小さくする必要があります。

図5-10 垂直位置そろえ
【図5-10】――subは「下付き」,superは「上付き」。baselineはx-heightの下側の線をそろえる。text-topは文字の一番上の線をそろえる。middleは文字の中央にあたる線をそろえる。text-bottomは文字の一番下の線をそろえる。50%はline-heightの半分だけ上にずらす。-50%はline-heightの半分だけ下にずらす。topはその行で最も高く飛び出ている要素に上側の線をそろえる。bottomはその行で最も低く突き出している要素に下側の線をそろえる。
text-align 水平位置そろえ(右そろえ,左そろえ)
left | right | center | justify
/* 左端|右端|中央寄せ|両端そろえ(図5-8) */
初期値
実装依存
適用対象
ブロック系要素
継承される?
yes
図5-11 text-align
【図5-11】――leftは左寄せ,rightは右寄せ,centerは中央寄せ,justifyは文字間隔や単語間隔を調整して両端をそろえる。

水平位置そろえは,ブロック系要素にしか指定できません。

コラム:CSS2でのtext-alignの拡張

CSS2では,TABLE用のtext-alignとして,属性値に任意の文字列を指示できるようになりました。具体的には,「text-align: "."」として小数点そろえを実現するために活用されます。

text-transform 大文字小文字
capitalize | uppercase | lowercase | none
/* 単語の頭だけ大文字|大文字|小文字|変化無し */
/* Capitalize | UPPERCASE | lowercase | none */
初期値
none
適用対象
全要素
継承される?
yes

ソース中の大文字小文字記述を,表示時に変更するための指定です。

text-indent 行頭インデント
<一般サイズ> | <パーセント>
初期値
0
適用対象
ブロック系要素
継承される?
yes
パーセントの意味
親要素のwidthに対する割合
マイナス値

text-indentは,ブロックの始めの一行にのみ適用されるインデントです。マイナスのインデントも可能です(図5-12)。

図5-12 インデント無し,プラス,マイナス
【図5-12】――プラスのインデントの時には,最初の一行が字下げされます。マイナスのインデントの時には,最初の一行だけが他の行よりも飛び出て表示されます。

5.5.2. CSS2追加分

text-shadow 影文字
none | [<color> || <length> <length> <length>? ,]* [<color> || <length> <length> <length>?] | inherit
/* 色 水平オフセット値 垂直オフセット値 ぼかし範囲 */
初期値
none
適用対象
全要素
適用対象
ブロック系要素
継承される?
no
/* 処理的にはtransparentと受け取るべきか? */
マイナス値
可(横は右,縦は下が「正」)

この「影文字」とは,同じ文字をすこしずらして表示する効果のことです(図5-13)。任意の数の「ずらした文字」を表示できます。「水平・垂直のオフセット値」とは,元の文字に対する影になる文字の移動量です。オプション指定として,影文字に「ぼかし効果」を与える指標「ぼかし範囲」を指定できます。「ぼかし範囲」を「3pt」とした場合,元々の文字の回りに3ポイント程度の「ぼかし」が表示されます。

図5-13 影文字の例
文字の後ろに,位置を少しずらして同じ文字を表示すると,影がついたような効果を得られます。

CSS2の仕様書には,オフセット値を0にしてぼかし範囲を大きく取ることで面白い効果を得る例が紹介されています(図5-14)。しかし,一方で「このプロパティは,:first-letter疑似要素など特殊な部分でのみ使用して欲しい」と明記されています。

図5-14 凝った影文字
{
    background: white;
    color: white;
    text-shadow: black 0px 0px 5px;
} /* CSS2仕様書16.3.2より転載 */
【図5-14】――影の位置をあえてずらさないことで,文字が光っているような特殊な効果を得られます。
コラム:仕様と現実の違い

このtext-shadowプロパティの「ぼかし」効果は,もし実現すれば強力ですが,これまでのWWWブラウザの機能拡張の方向を見る限り,しばらくの間サポートされないのでは無いかと思われます(私見です)。

他のプロパティに関しても同様ですが,W3Cの仕様書に書かれていることが常にサポートされるとは限りません。事実として,既にCSS1仕様公開から1年以上が経ちますが,いまだにCSS1を「完全に」サポートしたWWWブラウザは存在しません。Microsoft社もNetscape Communications社も「当社はCSSをサポートする」と宣言しているにもかかわらず,これが現実です。仕様と現実は別のものであることには,十分注意してください。

5.6. ボックス系

単体指定
margin-top,margin-right,margin-bottom,margin-left
padding-top,padding-right,padding-bottom,padding-left
border-top-width,border-right-width,border-bottom-width,border-left-width
一括指定
margin マージン
padding パディング
border-width ボーダー幅
border-color ボーダーの色
border-style ボーダーの形
border,border-top,border-right,border-bottom,border-left
CSS2追加分
border-top-style,border-right-style,border-bottom-style,border-left-style
border-top-color,border-right-color,border-bottom-color,border-left-color
BLOCKQUOTE{
    margin: 1em 3em;  /* 上下,左右 */
    border-width: thin 0em;
    border-style: dashed none;
}
H1{
    border-bottom: thin solid #800;
}

5.6.1. マージン・パディングとは

マージン・パディングなどの用語を簡単に説明します(図5-15)。

図5-15 マージン・パディング・テキストインデントの関係
【図5-15】――マージンは,そのブロックのボーダーラインより外側の余白です。パディングは,そのブロックのボーダーラインより内側の余白です。テキストインデントは,パディングよりも内側つまりそのブロックの中身の,最初の行の字下げ幅です。
マージン
その要素のボーダーライン(枠線)までの余白,マイナス可
パディング
ボーダーライン(枠線)から文字開始までの余白
テキストインデント
パディング内の行頭のインデント,マイナス可

5.6.2. 一括指定

margin マージン
[<一般サイズ> | <パーセント> | auto]{1,4}
/* auto(自動処理)…… 左右マージン:要素のwidthと左右paddingをひいた残り; 上下マージン:不明 */
初期値
0
適用対象
全要素
継承される?
no
/* 子要素は,自分のマージンを親要素のマージンに追加する */
パーセントの意味
もっとも近いブロック表示の親要素のwidthに対する割合
/* 上下マージンでもwidthに対するパーセント */
マイナス値

要素に対する余白で,その要素のボーダーライン(枠線)の外側に設定されます。マイナス値も指定可能です。

指定の{1,4}は,[ ]の中身を1つ,2つ,3つ,4つ書いた場合それぞれの意味が異なることを表わしています。これは,padding,border-widthなどでも同様です。

1回
上下左右を同時に指定
2回
上下,左右の順で指定
3回
上,左右,下の順で指定
4回
上,右,下,左の順で指定
margin: 1em; /* 上下左右ともに1em */
margin: 1em 0em;  /* 上下は1em,左右は0em */
margin: 1em auto 2em;  /* 上は1em,左右はauto,下は2em */
margin: 1em 1em 0em 30%;  /* 上,右,下,左 */

マージン指定は継承されませんが,子要素のマージンは親要素のマージンに自分のマージンを追加したものになります。すなわち,子要素にマージンを指定しなければ親要素と同じマージンになります。

コラム:マージン指定のとらえかた
UL{ margin: 0em 0em 0em 2em;  /* 左2em */}

となっていれば,ULがBODY中に現われようが,BLOCKQUOTE中に現われようが,BODY中のUL中のULとして現われようが,常に直接の親要素のマージンに2emを追加して表示されます。

<BODY>
<P>ここがBODYのマージンだとする。</P>
    <UL>
    <LI>「BODY」に対して2em
        <UL>
        <LI>「BODY UL」に対して2em
        </UL>
    <LI>「BODY」に対して2em
    </UL>
</BODY>

すなわち,マージンははじめから相対的な位置関係を指定すると考えてください。そのため,指定は継承されないのです。

padding パディング
[<一般サイズ> | <パーセント>]{1,4}
初期値
0
適用対象
全要素
継承される?
no
パーセントの意味
もっとも近いブロック表示の親要素のwidthに対する割合
マイナス値
不可

要素に対する余白で,その要素のボーダーライン(枠線)の内側に設定されます。マイナス値は許されません。

border-width ボーダー幅
[thin | medium | thick | <一般サイズ>]{1,4}
/* 細い,普通,太い…具体的なサイズはWWWブラウザに一任 */
初期値
medium
適用対象
全要素
継承される?
no
マイナス値
不可

上下左右のボーダー幅を変えることで,多彩な表現が可能です(図5-16)。また,インライン系要素にもボーダーを指定できます(図5-17)。

図5-16 ボーダー指定のバリエーション
{border-width: thin thick thick thin; border-style: solid;}/* 上,右,下,左 */
{border-width: thin 0em; border-style: dashed none;}/* 上下,左右 */
{border-width: 0em 1em; border-style: none solid;}
【図5-16】――最初の例では上と左に細い線,下と右に太い線を引いています。二つ目の例では上下だけに破線を引いています。最後の例では左右だけに太い線を引いています。
Lie and Bos(1)p128を参考にしました)
図5-17 ボーダー付きインライン系要素
ボーダーの付いたインライン要素が途中で折り返されて次の行に送られる際,折り返し部分には左右のボーダーは付きません。
border-color ボーダーの色
<色>{1,4}
初期値
要素の前景色(colorプロパティ)の値
適用対象
全要素
継承される?
no
コラム:border-color: url(*.gif)は?

CSS2までの仕様では,borderに画像を割り当てるためのプロパティが用意されていません。実装されるかどうかはともかく,仕様としてはあってしかるべきだと(筆者は)思うのですが……

これも,(W3Cの)外部者だから言えることなのでしょうか。

border-style ボーダーの形
[none | dotted | dashed | solid | double | groove | ridge | inset | outset]{1,4}
初期値
none
適用対象
全要素
継承される?
no

ボーダーの形状は,平面的なものから立体的なものまで複数が用意されています(図5-18)。これらも上下左右別々に指定できます(CSS1仕様書では{1,4}とはされていませんが,単なるミスでしょう。実際,CSS1仕様書内の記述例でも{1,4}として扱われています)。

図5-18 border-style
【図5-18】――solidは実線,doubleは二重線,dashedは破線,dottedは点線,outsetは内側が盛り上がったような影つき線,insetは内側が凹んだような影つき線,ridgeはボーダー自体が盛り上がったような影つき線,grooveはボーダー自体が凹んだような影つき線。

なお,ボーダースタイルの初期値は「none」のため,スタイルを明示しなければボーダーは表示されません。

border,border-top,border-right,border-bottom,border-left
<border-width> || <border-style> || <border-color>
初期値
個々のプロパティの初期値
適用対象
全要素
継承される?
no

ボーダーの幅,スタイル,色を一括指定するためのプロパティです。borderプロパティは上下左右を一括に,その他は名前が示す部位を担当します。

5.6.3. 単体指定

それぞれ,名前が示す通りの部位を担当します。

margin-top,margin-right,margin-bottom,margin-left
<一般サイズ> | <パーセント> | auto
初期値
0
適用対象
全要素
継承される?
no
パーセントの意味
もっとも近いブロック表示の親要素のwidthに対する割合
マイナス値
padding-top,padding-right,padding-bottom,padding-left
<一般サイズ> | <パーセント>
初期値
0
適用対象
全要素
継承される?
no
パーセントの意味
もっとも近いブロック表示の親要素のwidthに対する割合
マイナス値
不可
border-top-width,border-right-width,border-bottom-width,border-left-width
thin | medium | thick | <一般サイズ>
初期値
medium
適用対象
全要素
継承される?
no
マイナス値
不可

5.6.4. CSS2追加分

border-top-color,border-right-color,border-bottom-color,border-left-color
<色> | transparent
初期値
要素の前景色(colorプロパティ)の値
適用対象
全要素
継承される?
no
border-top-style,border-right-style,border-bottom-style,border-left-style
[none | dotted | dashed | solid | double | groove | ridge | inset | outset | hidden]
初期値
none
適用対象
全要素
継承される?
no

5.7. 表示位置調整

単体指定
width,height 表示の横幅,縦幅
float フロートと回り込み
clear 回り込みの解除
一括指定
なし
CSS2追加分
min-width,min-height 横幅・縦幅の最小
max-width,max-height 横幅・縦幅の最大

これら以外に関しては7章で解説します。

H1 IMG{
    width: 1.5em;
}
H1, H2, H3, H4, H5, H6{
    clear: both;
}

5.7.1. 単体指定

width,height 表示の横幅,縦幅
<一般サイズ> | <パーセント> | auto
/* auto(自動処理)…… ブロック系要素の場合:widthは左右のマージン・パディングをひいた残り,heightは表示に必要な幅; 置換要素の場合:表示に必要な幅 */
初期値
auto
適用対象
ブロック系要素と置換要素
継承される?
no
パーセントの意味
もっとも近いブロック表示の親要素のwidth/heightに対する割合
マイナス値
不可

表示の横幅・縦幅を指定するプロパティですが,ブロック系要素の場合,特別な効果を狙わない限りはautoとします。

置換要素(画像など)では,指定したサイズに画像が拡大・縮小されます。widthかheightの一方だけを明示し他方をautoとすれば,比率を保ったまま処理されます(図5-19)。

図5-19 縦幅・横幅の比率を保った引き延ばし
{ width:4cm; } /* height:auto; */
【図5-19】――横幅だけを指定すれば,縦幅は元の画像の縦横比から自動的に決定されます。

なお,パーセント指定は「最も近いブロック表示の親要素(the generated box's containing block)」のサイズに対する割合です。自分自身の本来のサイズに対する割合では無いので,ご注意ください(CSS1のheightプロパティには,パーセント指定は許されていません。CSS2では変更されました)。

float フロートと回り込み
left | right | none
初期値
none
適用対象
全要素
継承される?
no

フロートがleft(right)に指定された要素は,displayプロパティの値に関わらずブロック表示に変更され,その親要素のwidthの左端(右端)に移動すると同時に,その“反対側への”後続テキストの回り込みを許可します。したがって,「float:left」とすると,右(right)側への回り込みが許可されます。

CSS1では,画像だけでなく文字もフロート化できます。テキストで作った図表や引用ブロックをフロート化させても面白いでしょう(図5-20)。

図5-20 引用ブロックのフロート指定
BLOCKQUOTE{
    font-size: 0.7em;
    width: 40%; /* フロート化させるために幅を固定する */
    margin: 0.5em; /* 回り込んだ文字との間隔を取る */
    padding: 0.5em;
    border: dotted thin #faa;
    float: left;
}
【図5-20】――引用された部分が左側に囲み記事のようにフロートされ,右側には地の文が回り込んで表示されます。
clear 回り込みの解除
none | left | right | both
初期値
none
適用対象
全要素(注:CSS2では「ブロック系要素」のみ)
継承される?
no

clearプロパティがleft(right)に指定されていると,その要素が現われた所で,float:left(right)によって生まれた回り込みが解除されます。

clearプロパティを用いれば,「新しい見出しが始まったら,回り込みは解除する」などの指定が可能です(図5-21)。

図5-21 見出しでフロートを解除
H1, H2, H3, H4, H5, H6{
    clear:both;
}
【図5-21】――見出しはフロートされた要素の逆側に回り込むことなく,フロート部分の終わったところに表示されます。

5.7.2. CSS2追加分

min-width,min-height 横幅・縦幅・の最小値
<一般サイズ> | <パーセント>
初期値
0
適用対象
ブロック系要素と置換要素
継承される?
no
パーセントの意味
もっとも近いブロック表示の親要素のwidth/heightに対する割合
マイナス値
不可
max-width,max-height 縦幅・縦幅の最大値
<一般サイズ> | <パーセント> | none
初期値
none
適用対象
ブロック系要素と置換要素
継承される?
no
パーセントの意味
もっとも近いブロック表示の親要素のwidth/heightに対する割合
マイナス値
不可

これらのプロパティが指定されていると,widthやheightの指定値(あるいはautoによる計算結果)がこの範囲の外である場合,こちらの値が採用されます。

5.8. その他の表示調整系

単体指定
display 表示形式
white-space 空白の取り扱い
list-style-type リストマークの種類
list-style-image リストマークの画像指定
list-style-position リストマークの内側表示・外側表示
一括指定
list-style
CSS2追加分
marker-offset マーカー(リストの行頭)の位置調整
UL{list-style: circle url(green-mark.gif) }
UL UL{list-style: disc url(red-mark.gif) }
UL UL UL{list-style: square url(yellow-mark.gif) }

5.8.1. 単体指定

display 表示形式
inline | block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none
初期値
inline(注:CSS1ではblock)
/* WWWブラウザ標準スタイルシートによって,HTML文書のブロック系要素はblock,インライン系要素はinlineとされていると思われる */
適用対象
全要素
継承される?
no

displayプロパティは,各要素の表示のされかたを指定します(表5-6)。また,displayプロパティの指定を元に,各種プロパティが適用されるか否かが判断されます(5.1節を参照)(変わるのは表示上の解釈だけで,マークアップにおける性質は変わりません)。

表5-6 displayプロパティの意味
指定結果
blockブロック(その要素の開始・終了で改行する)
inlineインライン(その要素の開始・終了では改行しない)
list-item要素の行頭に「マーカー」が付けられる特別なblock
run-in後述する特殊なblock
compact後述する特殊なlist-item
marker後述する特殊な区分で,blockでもinlineでも無い
table系テーブルに相当する特殊な区分(7章を参照)
none表示しない

通常は,HTMLの本来の位置づけとは異なる効果を得たい場合にのみ指定します。例えば,UL要素のリスト項目を横に並べたい場合は,その内部のLI要素をinlineとして指定します(図5-22)。

図5-22 インライン指定のLI要素
<STYLE TYPE="text/css">
    UL LI{ display: inline}
</STYLE>
<UL>
    <LI>1st,
    <LI>2nd.
</UL>
1st, 2nd.
コラム:compactとrun-in

CSS2で新たに採用されたcompactは,実はHTML2.0のころから存在するリスト(UL,OL,DL)のCOMPACT属性を再現するものです(COMPACT属性は,HTML4.0Strictでは削除されました)。

「display: compact」と指定された要素は,その直後のブロックを自分の横にならべても表示幅からはみ出さない場合に,ブロックを横にならべるように機能します(図5-23 compact指定)。すなわち,表示幅からはみ出さない場合は,自分と直後のブロックをつなげてひとつのblockであるかのように振る舞うことになります。

図5-23 compactの適用例
UL.NAME{display: compact}
<UL CLASS="NAME BEATLES MEMBER">
    <LI>John
    <LI>Paul
    <LI>Ringo
    <LI>George
</UL>
|−−−−−−−−−−−−−−|表示幅
  ・John ・Paul ・Ringo
  ・George

run-inは,おもに見出しに使われる区分で,常にその直後のブロックと自分自身をひとつのブロックであるかのように振る舞わせます。

compactでもrun-inでも同じですが,要素の表示がつながってしまうため,:after疑似要素とcontentプロパティを有効に利用するべきでしょう(図5-24)。

図5-24 run-inと:after疑似要素の適用例
H3{display: run-in;}
H3:after{content:":"}

<H1>日記</H1>
<H2>1998年5月21日</H2>
<H3>天気</H3>
<P>晴れ。湿気が無いからまだいいけど,かなり暑い。</P>
<H3>覚え書き</H3>
<P>あいつに3回も電話したのに,一度もつながらなかった。</P>
|−−−−−−−−−−−−−−−−−−−−−−−−−|表示幅
日記
1998年5月21日
天気:晴れ。湿気が無いからまだいいけど,かなり暑い。
覚え書き:あいつに3回も電話したのに,一度もつながらな
かった。

なお,仕様書によると,直後のブロックがfloat指定あるいは絶対位置指定(7章を参照)されている場合は,compactやrun-inは機能しません。

white-space 空白の取り扱い
normal | pre | nowrap
/* 標準|プレ整形|自動折り返しを拒否 */
初期値
normal
/* WWWブラウザ標準のスタイルシートによって,PRE要素はpre指定されていると思われる。*/
適用対象
ブロック系要素
継承される?
yes

ソース中の空白・タブ・改行をどのように表示するかを指定します(表5-7)。

表5-7 white-spaceプロパティの意味
指定連続した空白・タブ・改行の扱い表示幅に合わせた自動折り返し
normal一つの空白として表示する
preソースのまま表示しない(ソース中の“改行”で改行)
nowrap一つの空白として表示しない(BR要素でのみ改行)
list-style-type リストマークの種類
disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
/* ●|○|■|1,2,3…|i,ii,iii…|I,II,III…|a,b,c…|A,B,C…|無し */
/* これはCSS1の仕様である */
初期値
disc
適用対象
list-item要素
継承される?
yes

list-item要素の行頭マーカーの種類を指定します。ただし,list-style-imageプロパティが有効の場合は,そちらが優先されます。

CSS2では,list-style-typeの属性値が大幅に追加されました(表5-8)。

表5-8 CSS2のlist-style-type
説明
decimal-leading-zero頭にゼロを付けた数字(01,02,…)
lower-latin,upper-latinalphaと同じ(a,b,c…)
lower-greekギリシャ文字(α,β,…)(alpha,beta,…)
hebrewヘブライ文字
georgianグルジア文字(an,ban,gan…,he,tan,in,in-an…)
armenianアルメニア文字
cjk-ideographic漢数字
hiraganaあ,い,う…(a,i,u…)
katakanaア,イ,ウ…(A,I,U…)
hiragana-irohaい,ろ,は…(I,ro,ha…)
katakana-irohaイ,ロ,ハ…(I,RO,HA…)

georgianの例は,CSS2仕様書に書かれていたものです。筆者の不明で,hebrew,georgian,armenianの詳細は調べられませんでした。

コラム:入れ子リストにおけるマーカー指定での注意

指定は継承されるため,リストの入れ子レベルごとにマーカーを変更したい場合は,全ての入れ子レベルについて明示的に指定する必要があります(図5-25)。

図5-25 入れ子指定を怠ると
UL{list-style-type: disc}
UL UL{list-style-type: circle}
●入れ子1
    ○入れ子2
    ○入れ子2
        ○入れ子3(入れ子2の指定を継承)
        ○入れ子3
●入れ子1

WWWブラウザ標準スタイルシートの記述に期待するという手もあるのですが,IE4.0もNetscape Navigator4.0も,「子孫(下降)セレクタ」を優先するようです。なお,CSS2であれば,「子セレクタ」を上手く利用することでこの不具合を避けられます。

コラム:数え上げリストの数値指定

HTML3.2およびHTML4.0Transitionalでは,OL要素のSTART属性で数え上げリストの数字をコントロールできました。しかし,HTML4.0Strictではこの属性は削除されました。さて,その代わりに用意されたCSSのプロパティは何でしょう?

実は,CSS1では相当するプロパティは用意されませんでした。しかし,CSS2ではカウンタという仕組みが導入され,「カウントを開始する数字」「一度にカウントアップする量」などを自在に指定できます。そのかわり,数字を制御するには,複数のプロパティを組み合わさなければいけません。

詳しくは7章を参照してください。

list-style-image リストマークの画像指定
<url> | none
初期値
none
適用対象
list-item要素
継承される?
yes

リスト行頭のマークを任意の画像で指定します(図5-26)。画像を表示できない場合は,list-style-typeプロパティの指定が有効になります。

図5-26 リストマークを画像に
UL{ list-style-image: url(star.gif) }
☆………………………
☆………………………
☆………………………
list-style-position リストマークの内側表示・外側表示
inside | outside
初期値
outside
適用対象
list-item要素
継承される?
yes

マークが要素ブロックの内部に表示されるのか外部に表示されるのかを指定します。この違いは文章が折り返し表示されたときに明確になります(図5-27)。

図5-27 list-style-positionプロパティの意味
inside:
○………………………
…………………………
…………
outside:
○………………………
 ………………………
 …………

5.8.2. 一括指定

list-style
<list-style-type> || <list-style-position> || <list-style-image>
初期値
個々のプロパティの初期値
適用対象
list-item要素
継承される?
yes

5.8.3. CSS2追加分

マーカーとは

リストの行頭マーカーはそれ自身が一種のboxで,その振る舞いは「フロート指定したもの」に似ていますが,必ずしも同一ではありません。そこで,CSS2では新たに「マーカー」という概念を定義しました。

CSS2では,「マーカー」の実体を,「display: marker」と指定された特殊な「:before」擬似要素として処理します。list-style系のプロパティを指定するのは「list-item」系要素ですが,実際に調整されるのはリスト項目行頭の「マーカー」(擬似)要素なのです。

マーカーは元の要素とは独立した要素だと考えますので,例えば,LI要素に背景画像を指定しても,マーカーには適用されません。マーカーのサイズや色,背景などの調整は,端的にはLI:before擬似要素に指定することになります。

なお,任意の要素の:before(あるいは:after)擬似要素に「display: marker」を指定することによって,その要素の前後にマーカーを表示させられます。

marker-offset マーカーの位置調整
<一般サイズ> | auto
初期値
auto
適用対象
marker
継承される?
no
マイナス値
可 /* 正であれば,マーカーがより離れる */

マーカーにはpaddingとborderは指定できますが,marginは指定できないことになりました。そのかわりに,marker-offsetプロパティを利用します。

marker-offsetは,マーカーと元要素との間隔を調整するためのプロパティです。マーカーの性質上,水平方向の調整のみが可能です。

引用文献

(1)Håkon Wium Lie and Bert Bos(1997)Cascading Style Sheets: addison wesley, 279pp
W3CのCSS仕様調整担当者であるHåkon Wium LieとBert Bosが記述したCSS1の仕様解説書です。ただし,HTML4.0草案検討中の段階で出版されたために,HTML文書との連携の仕様が最終的に採用されたものと異なります。