5章では,CSSが規定する個々のプロパティ(property)に関する解説を行います。5章を暗記する必要はありません。5章は「辞書」としてお使いください。なお,プロパティの総合的な使い方は6章に譲ります。
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の仕様書をもとにしていますが,理解しやすさのために,一部にカッコを追加するなどの改変を行っています。あらかじめご了承ください。
この章では,次の形式で各プロパティを紹介していきます。
値の定義では,次の特殊な記号を使用します。
全ての要素に全てのプロパティを指定可能ですが,全てが適用されるとは限りません。例えば,text-align(水平位置そろえ)はインライン系要素(STRONG要素など)には適用されません。なぜなら,適用しようが無いからです。このように,CSSでは,対象要素がブロック系要素であるかインライン系要素であるかによって,プロパティを適用するかどうか判断します。
なお,その所属の初期設定はHTMLの仕様で定められているとおりですが,スタイルシートのdisplayプロパティ(5.8節)によって(表示形式だけ)変更可能です。したがって,厳密には,各プロパティが適用されるか否かはdisplayプロパティの値で判断されます。
CSS1では,特殊なインライン系要素として「置換要素」を想定しています。置換要素とは,IMG要素など,ソース中の文字列が画像などに置きかえられた後に表示されるものです。プロパティによっては,「置換要素」の場合には意味合いが変化します(たとえばwidthプロパティ:5.7節)。
CSS2は,CSS1の上位互換の仕様として作成されました。すなわち,CSS1のプロパティは全てCSS2でも採用されています。したがって,特に何も明示しない限り,この章で紹介するプロパティは共用です。
しかし,実際には一部のプロパティについて改変が行われました。その場合は,必ずその旨を本文中に明示しています。
また,CSS2では,全てのプロパティの値に「inherit」を導入しました(4.2を参照)。これはCSS1には存在しないキーワードであるため,本書ではあえてinheritを値リストに表示しませんでした。これについてはご注意ください。
いくつかのプロパティに共通して使われるサイズの単位に関して,あらかじめここで説明しておきます。
絶対単位とは,サイズを絶対尺度で指定する単位です(表5-1)。
単位 | 意味 | 備考 |
---|---|---|
mm | ミリメートル | |
cm | センチメートル | 1cm = 10mm |
in | インチ | 1in = 25.4mm |
pt | ポイント | 72pt = 1in |
pc | パイカ | 組版用語,1pc = 12pt |
「現在の文字サイズ」を意味するem(エム)・ex(エックス)と,「画面の解像度に依存する」px(ピクセル)は,状況によって指示するサイズの変動する単位,すなわち相対単位です。
emはもともとは組版用語で,アルファベットMのサイズ,転じて「文字を描画するのに必要な“高さ”」を意味しています。CSSでは“その要素における”フォントサイズそのものとして扱われます。例えば,「line-height: 1.5em」は,フォントサイズが14ptならば21ptに,10ptならば15ptに設定されます。
exはその要素のフォントサイズにおける「x-height」の大きさです(図5-1)。フォントファミリーが異なれば,同じフォントサイズでもex値は変ります。「x-height」の値は,フォントデータそのものに含まれています(「x-height」という概念はラテンアルファベット圏のものであり,日本語文字では利用されません)。
pxはピクセル,即ち画面に表示できる最小の画素のサイズです。同じサイズのディスプレイでも,解像度設定(640x480とか,800x600とか)によってピクセルのサイズは変化します。
単位「%」は,サイズをパーセントで指定します。ただし,「何に対するパーセントなのか」はプロパティによって異なります。例えば,widthプロパティでは表示領域の横幅に対するパーセントを,font-sizeプロパティではその親要素の文字サイズに対するパーセントとなります。詳しくは各プロパティの単元で説明します。
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 */}
BODY{ font: 12pt/1.5 "Times Roman", "Times", serif; } STRONG{ font-style: italic; font-size: 1.2em; } H1{ line-height: 1; }
専門用語の厳密な解説はしませんが,「フォントファミリー名」とは"Times New Roman"や"Century"のような名前です(ファミリー名は定義済みのキーワードではありませんので,クォーテーション(" "あるいは' ')で囲みます)。
このプロパティには複数の値を指定できます。複数の指定がある場合,WWWブラウザは前者から順に所有するファミリーを探し,最初に見つけ出したものを採用します。
font-family: "Times Roman", "Times", serif; /* まず"Times Roman"を探し,無ければ"Times"を,それも無い場合はserifを */
また,“ファミリー名”ではなく,ファミリーの一般的な性質を示唆する“系統名”でもファミリーを指定できます(表5-2)。系統名で指定した場合,WWWブラウザが存在するファミリーの中から適切なものを選択します。一般に,文書の読み手がどんなファミリーをもっているのか推測することは不可能なため,系統名を利用する方が望ましいでしょう(系統名は定義済みのキーワードであるため,クォーテーションでは囲みません。囲ってしまった場合は,"serif"などという特定の名前のファミリーを指定したことになります)。
「xx-small〜xx-large」は固定サイズ指定で,この順に大きくなります。同じ指定の要素は同じサイズで表示されますが,具体的なサイズはWWWブラウザの設定に一任されます。CSS2では,それぞれの関係は,小さいほうから大きいほうへ「1.2倍程度」だとされています。
「larger」「smaller」は相対指定で,親要素のサイズよりも一段階大きく(小さく)なります。この「一段」がどの程度かはWWWブラウザに一任されますが,基本的には「medium」が「large」に(「small」に)なるのと同程度の変化だと思われます。なお,継承されるときは相当する絶対値として継承されます。
font-sizeプロパティの場合のみ,emユニットが「親要素のfont-size」を意味しています。この性質は,インライン系要素にとっては特に重要です。たとえば,STRONG要素に対し
STRONG{font-size:1.2em}
と指定しておけば,フォントサイズが15ptのH1要素中に現われた場合でも,10ptのP要素中に現われた場合でも,常に「親要素のフォントサイズの1.2倍」という関係を自動的にキープできます(同じような効果は,borlder・smaller指定でも得られます)。
「100〜900」は太さの絶対サイズで,これ以外の値(例えば250)は指定できません。ただし,実際の表示として9段階の太さが区別できるかどうかはWWWブラウザおよびフォントに一任されます。
「bolder」「lighter」は相対指定で,親要素の指定よりも一段階太く(細く)なります。この「一段」はWWWブラウザに任されますが,「400」が「500」に(「300」に)なるのと同程度の変動が期待できます(上限は900,下限は100です)。なお,継承されるときは相当する絶対値として継承されます。
相対指定はインライン系要素にとって特に重要です。たとえば,STRONG要素に対し
STRONG{font-weight: bolder}
と指定しておけば,太さ700のH1要素中に現われた場合でも,400のP要素中に現われた場合でも,常に「親要素よりも太い」という関係がキープできます。
italicもobliqueも日本語では同じ「斜体」と受け取られがちですが,ラテンアルファベットのファミリーによっては,この2者が区別されます(表5-3)。
small-capsを指定すると,“小文字”で書かれたテキストがスモールキャピタル文字に調整されます(図5-2)。なお,この概念は日本語文字には存在しません。
SPAN.FAMILYNAME{ font-variant: small-caps}
<P><SPAN CLASS="FAMILYNAME">Zappa</SPAN>, Frank
行幅は,上下に均等に割り振られます。文字そのものの幅も含んだ値を指定してください(図5-3)。
「掛ける値」は,「その要素のフォントサイズの何倍を行幅にするか」を無単位の実数で記述します。
line-height: 1.4;
「掛ける値」の効果は,emユニットとまったく同じです。ただし,継承のされかたが異なります。
5.2節で説明したとおり,emおよびパーセントは相当する絶対値に変換された後に継承されます。しかし,line-heightの「掛ける値」はつねに相対値として継承されます。このふたつは,望む効果に応じて使い分けなければなりません(図5-4)。
一括指定プロパティ(ショートハンド・プロパティ)は,関連するプロパティを一括して指定するためのプロパティです。
一括指定プロパティの場合,値指定を省略した個々の部分は,「初期値を明示した」と解釈されますのでご注意ください。
{ line-height: 1.5; font: 12pt sans-serif; }
上のような記述は,結局下のように解釈されます。
{ line-height: 1.5; font: normal normal normal 12pt/normal sans-serif; }
すなわち,fontプロパティ以前に指定していたline-heightの指定は無効になります。
font-sizeはフォントの高さに関する指定で,こちらはfont-sizeに対する横の割合の指定をするものです(図5-5)。通常がnormal,ultra-condensedがもっとも狭く,ultra-expandedがもっとも広くなります。なお,具体的な比率は規定されていません。
widerとnarrowerは,親要素に対する相対指定です。
同じ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)。
このプロパティは,フォントデータにz値が含まれていること,WWWブラウザがその値を判別できることを前提にしています。今のところ,一般向けのWWWブラウザではこのような芸当はできませんし,そもそもユーザは自分が利用しているフォントファミリーのz値を知らないと思われます。
また,日本語フォントの場合はどのように処理するのでしょう? というわけで,我々にはあまり関係の無いプロパティだと言ってよいでしょう。
CSS2ではfontプロパティの指定方法として,「システムフォントを指定する」方法が追加されました。
カッコ[ ]の位置に注目してくだされば分かるのですが,指定方法は「CSS1と同じように指定する」と「システムフォント名のみを記述する」のどちらか一方からしか選べません。システムフォントを指定した場合は,フォントサイズなどを細かく指定できないことになります。もし調整を行いたいならば,fontプロパティより後でfont-sizeプロパティなどを活用してください(一括指定は,それまで行われた指定をすべて上書きしてしまいます。したがって,「後に」宣言しなければなりません)。
font: caption; font-size: 1em;
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); /* 要素ごとに背景を変えられる */ }
記述 | 意味 |
---|---|
#RGB | 16進1桁ずつ……#820は#882200に相当 |
#RRGGBB | 16進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進 |
---|---|
A | 10 |
F | 15 |
10 | 16 |
1A | 26 (=16+10) |
数値と色の詳細な関係は,ソフトウェアなどで確認するべきでしょう。例えば,Windows95のシステムカラー・パレットでも確認できます。
ただし,全てのWWW利用者がフルカラー表示のモニタを利用しているとは限りません。画像で利用している色も含んで256色以上を指定する場合は,特にカラーバランスにご注意ください。
定義済みの名前 | 値 | 近似値 | 表示例 | 備考 |
---|---|---|---|---|
red | #ff0000 | #f00 | ■ | Rが最大,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 | ■ | 水色 |
4章で説明したとおり,通常は「transparent(透明)」で,親要素の背景がそのまま使われます。
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だけで無理にスタイルを指定しようとしている人は,いつまでたってもこの利点を享受できません。このことを友人みんなにふれてまわってください。
「スタイルシートを使おう! だって,こんなにすごいんだぜ」
背景画像の表示開始位置を設定します。もしrepeat-yかつbackground-positionがrightであれば,その要素の右端に表示され,垂直方向に繰り返されます(図5-7)。
指定がfixedの場合は,前景文字などをスクロールさせても,背景画像はスクロールしません(図5-8)。
CSS2では,<色>の値として「システムカラー」が導入されました。
近代的なGUIを備えたシステムでは,メニューやボタンやウィンドウ枠の色などを個々のアプリケーションが管理するのではなく,システムが一括管理するようにしています。この「OSが管理する色」を「システムカラー」といいます。ユーザは「システムカラー」の設定を変更するだけで,すべてのアプリケーションの表示色を変更できるわけです。システムカラーの概念は,WindowsやMac,はてはJava仮想マシンにも存在します。(例えば,Windows95では「コントロール」の「画面」の「デザイン」の各項目を変更してみてください。)
スタイルシートからシステムカラーを指定できれば,「読者が普段慣れ親しんでいる色」を指定できることになります。その一方で,シート記述時には表示色が想像できないわけですから,扱いは難しいかもしれません。
BODY{ color: WindowText; background: Window; }
CSS2は,表5-6のキーワードを「システムカラー」用に用意しました。大文字小文字は区別されませんが,原文と同じように記述するほうが分かりやすいでしょう。
名前 | 対応する部分 |
---|---|
ActiveBorder | アクティブなウィンドウ枠の色 |
ActiveCaption | アクティブなウィンドウ(のタイトルバー)の色 |
AppWorkspace | MS-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 | ウィンドウの文字の色 |
BODY{ text-align: left;} P{ text-indent: 1em;} STRONG{ word-spacing: 1.5em; text-decoration: underline overline; }
word-spacingは「単語間隔」,letter-spacsingは「文字間隔」です。単語間隔はラテンアルファベット圏の概念で,単語を区切る空白などの幅になります。
指定値は「標準に対する追加の幅」であり,マイナス値を指定すれば文字は重なり合います。
これらのプロパティは,一般には文字の読みやすさの調整に使いますが,語句を目立たせるために極端な指定をしてもかまいません(STRONG要素など)(図5-9)。
「無し」と指定するか,各種の指定を組み合わせた指定(「text-decoration: underline blink」など)が可能です。指定は継承されませんが,「透明」処理されるために一見継承されたように見えます。「継承されない」の意味は,「下線に更に下線が付くことはない」という意味だと考えても良いでしょう。
親要素に対する垂直位置関係を指定します。しかし,インライン系要素にしか適用されないため,一般には「直前の語句(単語)」に対する垂直位置関係になるでしょう(直前の語句の垂直位置が変更されていない限り)。単純に言えば「上付き下付き」ですが,かなり複雑な指定が可能です(図5-10)。なお,いわいる乗数x2のような効果を得たい場合は,super指定に加えてフォントサイズを小さくする必要があります。
水平位置そろえは,ブロック系要素にしか指定できません。
CSS2では,TABLE用のtext-alignとして,属性値に任意の文字列を指示できるようになりました。具体的には,「text-align: "."」として小数点そろえを実現するために活用されます。
ソース中の大文字小文字記述を,表示時に変更するための指定です。
text-indentは,ブロックの始めの一行にのみ適用されるインデントです。マイナスのインデントも可能です(図5-12)。
この「影文字」とは,同じ文字をすこしずらして表示する効果のことです(図5-13)。任意の数の「ずらした文字」を表示できます。「水平・垂直のオフセット値」とは,元の文字に対する影になる文字の移動量です。オプション指定として,影文字に「ぼかし効果」を与える指標「ぼかし範囲」を指定できます。「ぼかし範囲」を「3pt」とした場合,元々の文字の回りに3ポイント程度の「ぼかし」が表示されます。
CSS2の仕様書には,オフセット値を0にしてぼかし範囲を大きく取ることで面白い効果を得る例が紹介されています(図5-14)。しかし,一方で「このプロパティは,:first-letter疑似要素など特殊な部分でのみ使用して欲しい」と明記されています。
{ background: white; color: white; text-shadow: black 0px 0px 5px; } /* CSS2仕様書16.3.2より転載 */
このtext-shadowプロパティの「ぼかし」効果は,もし実現すれば強力ですが,これまでのWWWブラウザの機能拡張の方向を見る限り,しばらくの間サポートされないのでは無いかと思われます(私見です)。
他のプロパティに関しても同様ですが,W3Cの仕様書に書かれていることが常にサポートされるとは限りません。事実として,既にCSS1仕様公開から1年以上が経ちますが,いまだにCSS1を「完全に」サポートしたWWWブラウザは存在しません。Microsoft社もNetscape Communications社も「当社はCSSをサポートする」と宣言しているにもかかわらず,これが現実です。仕様と現実は別のものであることには,十分注意してください。
BLOCKQUOTE{ margin: 1em 3em; /* 上下,左右 */ border-width: thin 0em; border-style: dashed none; } H1{ border-bottom: thin solid #800; }
マージン・パディングなどの用語を簡単に説明します(図5-15)。
要素に対する余白で,その要素のボーダーライン(枠線)の外側に設定されます。マイナス値も指定可能です。
指定の{1,4}は,[ ]の中身を1つ,2つ,3つ,4つ書いた場合それぞれの意味が異なることを表わしています。これは,padding,border-widthなどでも同様です。
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>
すなわち,マージンははじめから相対的な位置関係を指定すると考えてください。そのため,指定は継承されないのです。
要素に対する余白で,その要素のボーダーライン(枠線)の内側に設定されます。マイナス値は許されません。
上下左右のボーダー幅を変えることで,多彩な表現が可能です(図5-16)。また,インライン系要素にもボーダーを指定できます(図5-17)。
{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;}
CSS2までの仕様では,borderに画像を割り当てるためのプロパティが用意されていません。実装されるかどうかはともかく,仕様としてはあってしかるべきだと(筆者は)思うのですが……
これも,(W3Cの)外部者だから言えることなのでしょうか。
ボーダーの形状は,平面的なものから立体的なものまで複数が用意されています(図5-18)。これらも上下左右別々に指定できます(CSS1仕様書では{1,4}とはされていませんが,単なるミスでしょう。実際,CSS1仕様書内の記述例でも{1,4}として扱われています)。
なお,ボーダースタイルの初期値は「none」のため,スタイルを明示しなければボーダーは表示されません。
ボーダーの幅,スタイル,色を一括指定するためのプロパティです。borderプロパティは上下左右を一括に,その他は名前が示す部位を担当します。
それぞれ,名前が示す通りの部位を担当します。
これら以外に関しては7章で解説します。
H1 IMG{ width: 1.5em; } H1, H2, H3, H4, H5, H6{ clear: both; }
表示の横幅・縦幅を指定するプロパティですが,ブロック系要素の場合,特別な効果を狙わない限りはautoとします。
置換要素(画像など)では,指定したサイズに画像が拡大・縮小されます。widthかheightの一方だけを明示し他方をautoとすれば,比率を保ったまま処理されます(図5-19)。
{ width:4cm; } /* height:auto; */
なお,パーセント指定は「最も近いブロック表示の親要素(the generated box's containing block)」のサイズに対する割合です。自分自身の本来のサイズに対する割合では無いので,ご注意ください(CSS1のheightプロパティには,パーセント指定は許されていません。CSS2では変更されました)。
フロートがleft(right)に指定された要素は,displayプロパティの値に関わらずブロック表示に変更され,その親要素のwidthの左端(右端)に移動すると同時に,その“反対側への”後続テキストの回り込みを許可します。したがって,「float:left」とすると,右(right)側への回り込みが許可されます。
CSS1では,画像だけでなく文字もフロート化できます。テキストで作った図表や引用ブロックをフロート化させても面白いでしょう(図5-20)。
BLOCKQUOTE{ font-size: 0.7em; width: 40%; /* フロート化させるために幅を固定する */ margin: 0.5em; /* 回り込んだ文字との間隔を取る */ padding: 0.5em; border: dotted thin #faa; float: left; }
clearプロパティがleft(right)に指定されていると,その要素が現われた所で,float:left(right)によって生まれた回り込みが解除されます。
clearプロパティを用いれば,「新しい見出しが始まったら,回り込みは解除する」などの指定が可能です(図5-21)。
H1, H2, H3, H4, H5, H6{ clear:both; }
これらのプロパティが指定されていると,widthやheightの指定値(あるいはautoによる計算結果)がこの範囲の外である場合,こちらの値が採用されます。
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) }
displayプロパティは,各要素の表示のされかたを指定します(表5-6)。また,displayプロパティの指定を元に,各種プロパティが適用されるか否かが判断されます(5.1節を参照)(変わるのは表示上の解釈だけで,マークアップにおける性質は変わりません)。
指定 | 結果 |
---|---|
block | ブロック(その要素の開始・終了で改行する) |
inline | インライン(その要素の開始・終了では改行しない) |
list-item | 要素の行頭に「マーカー」が付けられる特別なblock |
run-in | 後述する特殊なblock |
compact | 後述する特殊なlist-item |
marker | 後述する特殊な区分で,blockでもinlineでも無い |
table系 | テーブルに相当する特殊な区分(7章を参照) |
none | 表示しない |
通常は,HTMLの本来の位置づけとは異なる効果を得たい場合にのみ指定します。例えば,UL要素のリスト項目を横に並べたい場合は,その内部のLI要素をinlineとして指定します(図5-22)。
<STYLE TYPE="text/css"> UL LI{ display: inline} </STYLE> <UL> <LI>1st, <LI>2nd. </UL>
1st, 2nd.
CSS2で新たに採用されたcompactは,実はHTML2.0のころから存在するリスト(UL,OL,DL)のCOMPACT属性を再現するものです(COMPACT属性は,HTML4.0Strictでは削除されました)。
「display: compact」と指定された要素は,その直後のブロックを自分の横にならべても表示幅からはみ出さない場合に,ブロックを横にならべるように機能します(図5-23 compact指定)。すなわち,表示幅からはみ出さない場合は,自分と直後のブロックをつなげてひとつのblockであるかのように振る舞うことになります。
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)。
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は機能しません。
ソース中の空白・タブ・改行をどのように表示するかを指定します(表5-7)。
指定 | 連続した空白・タブ・改行の扱い | 表示幅に合わせた自動折り返し |
---|---|---|
normal | 一つの空白として表示 | する |
pre | ソースのまま表示 | しない(ソース中の“改行”で改行) |
nowrap | 一つの空白として表示 | しない(BR要素でのみ改行) |
list-item要素の行頭マーカーの種類を指定します。ただし,list-style-imageプロパティが有効の場合は,そちらが優先されます。
CSS2では,list-style-typeの属性値が大幅に追加されました(表5-8)。
値 | 説明 |
---|---|
decimal-leading-zero | 頭にゼロを付けた数字(01,02,…) |
lower-latin,upper-latin | alphaと同じ(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)。
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章を参照してください。
リスト行頭のマークを任意の画像で指定します(図5-26)。画像を表示できない場合は,list-style-typeプロパティの指定が有効になります。
UL{ list-style-image: url(star.gif) }
☆……………………… ☆……………………… ☆………………………
マークが要素ブロックの内部に表示されるのか外部に表示されるのかを指定します。この違いは文章が折り返し表示されたときに明確になります(図5-27)。
○……………………… ………………………… …………
○……………………… ……………………… …………
リストの行頭マーカーはそれ自身が一種のboxで,その振る舞いは「フロート指定したもの」に似ていますが,必ずしも同一ではありません。そこで,CSS2では新たに「マーカー」という概念を定義しました。
CSS2では,「マーカー」の実体を,「display: marker」と指定された特殊な「:before」擬似要素として処理します。list-style系のプロパティを指定するのは「list-item」系要素ですが,実際に調整されるのはリスト項目行頭の「マーカー」(擬似)要素なのです。
マーカーは元の要素とは独立した要素だと考えますので,例えば,LI要素に背景画像を指定しても,マーカーには適用されません。マーカーのサイズや色,背景などの調整は,端的にはLI:before擬似要素に指定することになります。
なお,任意の要素の:before(あるいは:after)擬似要素に「display: marker」を指定することによって,その要素の前後にマーカーを表示させられます。
マーカーにはpaddingとborderは指定できますが,marginは指定できないことになりました。そのかわりに,marker-offsetプロパティを利用します。
marker-offsetは,マーカーと元要素との間隔を調整するためのプロパティです。マーカーの性質上,水平方向の調整のみが可能です。