目次
本書のこの節では、HTMLで視覚的整形に用いる要素や属性について説明する。このほとんどは、 推奨しない。
属性定義
この属性は、文書本体(BODY要素)あるいは表( TABLE要素、TR要素、TH要素、 TD要素)のキャンバスの背景色を設定する。 テキスト色を指定する追加的な属性が、 BODY要素で設定できる。
この属性は推奨しないこととなり、背景色情報の指定にはスタイルシートを用いることを奨める。
表、画像、オブジェクト、段落など、まとまった塊をキャンバスに配置することは、align属性によって行える。 この属性は多くのHTML要素に設定可能であるが、要素によって取り得る値の範囲が異なる場合がある。ここでは、テキストの配置属性の意味のみを説明する。
属性定義
推奨しない例:
次の例は見出しをキャンバスの中央に揃えている。
<H1 align="center"> 木を彫るコツ </H1>
CSSを使うと、例えば次のようにして同じ効果を上げることができる。
<HEAD> <TITLE>木を彫るコツ</TITLE> <STYLE type="text/css"> H1 { text-align: center} </STYLE> <BODY> <H1>木を彫るコツ </H1>
上の指定ではすべてのH1宣言が中央揃えになるという点に注意されたい。 要素に class属性を設定すると、スタイル設定の有効範囲を狭めることができる。
<HEAD> <TITLE>木を彫るコツ</TITLE> <STYLE type="text/css"> H1.wood {text-align: center} </STYLE> <BODY> <H1 class="wood"> 木を彫るコツ </H1>
推奨しない例:
同様に、HTMLでalign属性を使った段落右揃えの設定は:
<P align="right">…段落のテキスト…
CSSで次のように書ける。
<HEAD> <TITLE>木を彫るコツ</TITLE> <STYLE type="text/css"> P.mypar {text-align: right} </STYLE> <BODY> <P class="mypar">…段落のテキスト…
推奨しない例:
一連の段落をまとめて右に配置するために、
DIV要素でグループ化できる。
<DIV align="right"> <P>…第1段落のテキスト… <P>…第2段落のテキスト… <P>…第3段落のテキスト… </DIV>
CSSでは、text-alignプロパティは親要素から継承される。そこで、次のように書ける。
<HEAD> <TITLE>木を彫るコツ</TITLE> <STYLE type="text/css"> DIV.mypars {text-align: right} </STYLE> <BODY> <DIV class="mypars"> <P>…第1段落のテキスト… <P>…第2段落のテキスト… <P>…第3段落のテキスト… </DIV>
全文を中央揃えにするCSSの書き方は次のようになる。
<HEAD> <TITLE>木を彫るコツ</TITLE> <STYLE type="text/css"> BODY {text-align: center} </STYLE> <BODY> …この全体が中央揃えになる… </BODY>
CENTER要素は、DIV要素でalign属性を"center"に設定することと全く等価である。 CENTER要素は推奨しない。
画像やオブジェクトは、「行内」に直接出現することもできるが、ページの一方に浮動することもできる。浮動する場合、オブジェクトの反対側に流れるテキストのマージンは一時的に変更される。
オブジェクト、画像、表、フレームなどの align属性は、それらを左または右マージンに浮動させる。浮動オブジェクトは、一般に、新しい行を開始する。可能な値は次の2つ。
推奨しない例:
次の例は、キャンバスの現在の左マージンに
IMG要素を浮動させる方法を示すものである。
<IMG align="left" src="http://foo.com/animage.gif" alt="わたしのボート">
配置の属性の中には値に "center" を許容するものもあり、この場合は浮動を生じず、当該オブジェクトを現在マージンの中央に揃える。 しかしながら、 P要素とDIV要素では、値 "center" は当該要素の内容を中央に揃える。
BR要素に定義される属性を用いると、浮動オブジェクトの周囲のテキストの流れを制御できる。
属性定義
次の視覚的状況を確認されたい。 BR要素によって行が区切られるまで、テキストは画像の右を流れている。
********* ------- | | ------- | image | --<BR> | | *********
この状況でclear属性の値がnoneに設定される場合、 BR要素に続く行は、画像の右マージンで、すぐ下から始まる。
********* ------- | | ------- | image | --<BR> | | ------ *********
推奨しない例:
clear属性がleft か
allに設定される場合、次の行は以下の位置に現れる。
********* ------- | | ------- | image | --<BR clear="left"> | | ********* -----------------
スタイルシートを使うと、左マージンに浮動するオブジェクト(画像、表、など)について、すべての行区切りを上述のように指定することができる。CSSでは、次のように書ける。
<STYLE type="text/css"> BR { clear: left } </STYLE>
特定のBRインスタンスに対して上述の挙動を指定するには、スタイル情報と id属性を組み合わせればよい。
<HEAD> <TITLE>浮動要素とテキストの流れ</TITLE> <STYLE type="text/css"> BR#mybr { clear: left } </STYLE> </HEAD> <BODY> <P>... ********* ------- | | ------- | table | --<BR id="mybr"> | | ********* ----------------- ... </BODY>
この節のHTML要素は、フォント情報を指定する。このすべてを推奨しないわけではないが、スタイルシートを使うことの方を推奨する。
<!ENTITY % fontstyle "TT | I | B | BIG | SMALL"> <!ELEMENT (%fontstyle;|%phrase;) - - (%inline;)*> <!ATTLIST (%fontstyle;|%phrase;) %attrs; -- %coreattrs, %i18n, %events -- >
開始タグ: 必須、終了タグ: 必須
別途定義がある属性
フォントスタイル要素のレンダリングは、ユーザエージェント依存である。以下は参考情報を記述するに過ぎない。
幾つかのテキスト形式を示す。
<P><b>bold</b>, <i>italic</i>, <b><i>bold italic</i></b>, <tt>teletype text</tt>, and <big>big</big> and <small>small</small> text.
上記は、次のようにレンダリングされるであろう。
スタイルシートを使えば、より豊富なフォント効果を引き出すことができる。CSSで、ある段落を青いイタリック体にする指定は、次のように書ける。
<HEAD> <TITLE>青いイタリック体テキストがある段落</TITLE> <STYLE type="text/css"> P#mypar {font-style: italic; color: blue} </STYLE> </HEAD> <P id="mypar">…青いイタリック体テキスト…
フォントスタイル要素は適切に入れ子にする必要がある。入れ子のフォントスタイル要素をどうレンダリングするかはユーザエージェント依存である。
公式の定義については移行型DTDを参照されたい。
属性定義
FONT要素は、当該要素内容であるテキストのサイズや色を変更する。
BASEFONT要素は、size属性によって、基本のフォントサイズを設定する。 FONT要素のフォントサイズ変更は、BASEFONT要素が設定する基本フォントサイズに関連する。 BASEFONT要素が使われていない場合、デフォルトのフォントサイズは3である。
推奨しない例:
次の例は、
FONT要素で指定できる7種類の大きさの違いを示す。
<P><font size=1>size=1</font> <font size=2>size=2</font> <font size=3>size=3</font> <font size=4>size=4</font> <font size=5>size=5</font> <font size=6>size=6</font> <font size=7>size=7</font>
上記は次のようにレンダリングされるであろう。
次は、基本フォントサイズ3と関連する相対指定の効果を示す。
基本フォントサイズは、FONT要素の相対指定によって変更されるのでない限り、見出しには適用されない。
<!ELEMENT HR - O EMPTY -- horizontal rule --> <!ATTLIST HR %attrs; -- %coreattrs, %i18n, %events -- >
開始タグ: 必須、終了タグ: なし
属性定義
デフォルトはalign="center"である。
別途定義がある属性
HR要素があると、視覚系ユーザエージェントは罫線をレンダリングする。
罫線とその周囲のコンテンツの間に挿入される垂直方向の空間の分量は、ユーザエージェント依存である。
推奨しない例:
次の例は、罫線を、中央に揃え、左右マージン間で得られる空間の半分の幅にしている。1本目の罫線の太さはデフォルトであるが、2本目3本目は5ピクセルにされている。3本目は影のない塗りつぶし色でレンダリングされねばならない。
<HR width="50%" align="center"> <HR size="5" width="50%" align="center"> <HR noshade size="5" width="50%" align="center">
上記罫線は次のようにレンダリングされるであろう。