15 配置,フォントスタイル及び水平方向のけい(罫)線

15.では,要素の視覚的フォーマット化に使用してもよいHTML要素及び属性を示す。ただし,その多くは,推奨しない

15.1 フォーマット化

15.1.1 背景の色

属性定義

bgcolor = color [CI]
推奨しない。 この属性は,文書本体又は表セルに対して背景の色を設定する。

この属性は,文書本体(BODY要素)又は表(TABLE要素,TR要素,TH要素及び TD要素)の描画面の背景の色を設定する。テキストの色を指定する付加的な属性は,BODY要素を使って使用できる。

この属性は,背景の色の情報を指定するためにはスタイルシートを用いることが望ましいので,推奨しない

15.1.2 配置

表,画像,オブジェクト,段落などのブロック要素をalign属性を用いて描画面に配置することができる。この属性は,多くのHTML要素に対して設定してもよいが,可能な値の範囲は要素ごとに異なることがある。ここでは,テキストのalign属性の意味を示すだけとする。

属性定義

align = left|center|right|justify [CI]
推奨しない。 この属性は,周囲の文脈に関して,その要素の水平方向の配置を指定する。可能な値を次に示す。
  • left: テキスト行は,左揃えでレンダリングされる。
  • center: テキスト行は,中央揃えとする。
  • right: テキスト行は,右揃えでレンダリングされる。
  • justify: テキスト行は,両側マージンに合わせて調整される。

デフォルトは,基底テキスト方向に依存する。右向きテキストでは,デフォルトはalign=leftとし,左向きテキストでは,デフォルトはalign=rightとする。

推奨しない例
次の例は,見出しを描画面上の中央に配置している。

<H1 align="center"> How to Carve Wood </H1>

例えば,CSSを使用して,同じ効果を得ることができる。その例を次に示す。

<HEAD>
 <TITLE>How to Carve Wood</TITLE>
 <STYLE type="text/css">
  H1 { text-align: center}
 </STYLE>
<BODY>
 <H1> How to Carve Wood </H1>

これは,すべてのH1宣言を中央に配置する点に注意すること。要素のclass属性を設定することによって,スタイルの有効範囲を狭くすることができる。

<HEAD>
 <TITLE>How to Carve Wood</TITLE>
 <STYLE type="text/css">
  H1.wood {text-align: center}
 </STYLE>
<BODY>
 <H1 class="wood"> How to Carve Wood </H1>

推奨しない例
同様に,HTMLのalign属性を用いて段落を描画面の右に配置するには,次のとおりにする。

<P align="right">...Lots of paragraph text...

CSSを用いた場合は,次による。

<HEAD>
 <TITLE>How to Carve Wood</TITLE>
 <STYLE type="text/css">
  P.mypar {text-align: right}
 </STYLE>
<BODY>
 <P class="mypar">...Lots of paragraph text...

推奨しない例
一連の段落を右に配置するために,DIV要素を用いてそれらをグループ化する。

<DIV align="right">
 <P>...text in first paragraph...
 <P>...text in second paragraph...
 <P>...text in third paragraph...
</DIV>

CSSを用いた場合,text-align特性は,親要素から継承され,そのために次を使用できる。

<HEAD>
 <TITLE>How to Carve Wood</TITLE>
 <STYLE type="text/css">
  DIV.mypars {text-align: right}
 </STYLE>
<BODY>
 <DIV class="mypars">
  <P>...text in first paragraph...
  <P>...text in second paragraph...
  <P>...text in third paragraph...
 </DIV>

CSSを用いて,文書全体を中央に配置する例を次に示す。

<HEAD>
 <TITLE>How to Carve Wood</TITLE>
 <STYLE type="text/css">
  BODY {text-align: center}
 </STYLE>
<BODY>
 ...the body is centered...
</BODY>

CENTER要素は,"center"に設定されたalign属性を用いてDIV要素を指定するのと全く同じとする。CENTER要素は,推奨しない

15.1.3 オブジェクトの浮動

画像及びオブジェクトは,直接に"行内"に現われてもよいし,又はページの一方の側に浮動されてもよい。この場合,一時的に,オブジェクトのいずれかの側に流し込まれるかもしれないテキストのマージンは変更される。

オブジェクトの浮動 

オブジェクト,画像,表,フレームなどに対するalign属性によって,オブジェクトは,左マージン又は右マージンに浮動する。浮動オブジェクトは,一般に,新しい行を開始する。この属性は,次の値をとる。

推奨しない例
次の例は,IMG要素を描画面の現左マージンに浮動させる方法を示している。

<IMG align="left" src="http://foo.com/animage.gif" alt="my boat">

"center"値を許容する配置属性もある。これは浮動を生じさせないが,現マージン内の中央にオブジェクトを配置する。しかし,P及びDIVに対しては,値"center"は要素の内容を中央に配置する。

オブジェクト周囲のテキストの浮動  

BR要素のために定義される他の属性は,浮動オブジェクト周囲のテキストの流込みを制御する。

属性定義

clear = none|left|right|all [CI]
推奨しない。 この要素によって生じた行区切りの後,視覚的ブラウザにおいて次の行が出現するのが望ましい場所を指定する。この属性は,画像,表などの浮動オブジェクトを考慮する。可能な値を次に示す。
  • none: 次の行は,通常どおり始まる。これをデフォルト値とする。
  • left: 次の行は,左マージンにおけるいかなる浮動オブジェクトより下の最も近い行で始まる。
  • right: 次の行は,右マージンにおけるいかなる浮動オブジェクトより下の最も近い行で始まる。
  • all: 次の行は,左右いずれかのマージン上におけるいかなる浮動オブジェクトより下の最も近い行で始まる。

次の視覚的シナリオを検討する。このシナリオでは,BRによって行が区切られるまで,画像の右にテキストが流し込まれる。

*********  -------
|       |  -------
| image |  --<BR>
|       |
*********

clear属性がnoneに設定されている場合,BRの後続の行は,画像の右マージンの,BRの下からすぐに始まる。

*********  -------
|       |  -------
| image |  --<BR>
|       |  ------
*********

推奨しない例
clear属性がleft又はallに設定されている場合,次の行の現われ方を次に示す。

*********  -------
|       |  -------
| image |  --<BR clear="left">
|       |  
*********
-----------------

スタイルシートを使用すると,左マージンに対して浮動するオブジェクト(画像,表など)に対して,すべての行区切りがclear属性をleftとする方法で振る舞うことが望ましいと指定できる。CSSを用いると,次のとおりにこのことを達成できる。

<STYLE type="text/css">
BR { clear: left }
</STYLE>

BR要素の特定のインスタンスに対してこの振る舞いを指定するために,スタイル情報とid属性とを組み合わせることができる。

<HEAD>
...
<STYLE type="text/css">
BR#mybr { clear: left }
</STYLE>
</HEAD>
<BODY>
<P>...
*********  -------
|       |  -------
| table |  --<BR id="mybr">
|       |  
*********
-----------------
...
</BODY>

15.2 フォント

15.2.1及び15.2.2のHTML要素は,フォント情報を指定する。すべて推奨しないわけではないが,スタイルシートの使用を優先し,これら要素の使用は避けたほうがよい。

15.2.1 フォントスタイル要素(TT要素,I要素,B要素,BIG要素,SMALL要素,STRIKE要素,S要素及びU要素)

<!ENTITY % fontstyle
 "TT | I | B | BIG | SMALL">
<!ELEMENT (%fontstyle;|%phrase;) - - (%inline;)*>
<!ATTLIST (%fontstyle;|%phrase;)
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

開始タグ: 必す(須),終了タグ: 必す(須)

他の箇所で定義される属性

フォントスタイル情報のレンダリングは,利用者エージェントに依存する。次は,単に参考とする。

TT: テレタイプ又は単一スペーステキストとしてレンダリングする。
I: イタリック体としてレンダリングする。
B: 太字テキストスタイルとしてレンダリングする。
BIG: "大きい"フォントでテキストをレンダリングする。
SMALL: "小さい"フォントでテキストをレンダリングする。
STRIKE及びS: 推奨しない。線引き抹消スタイルのテキストをレンダリングする。
U: 推奨しない。 下線付きテキストをレンダリングする。

次の文は,テキストの幾つかの型を示す。

<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.

これら単語は,次のとおりにレンダリングされるかもしれない。

An example of rendering of various font styles

スタイルシートを使用して,フォント効果を大いに増すことができる。CSSを用いると,段落において青色のイタリック体テキストを指定する場合を次に示す。

<HEAD>
<STYLE type="text/css">
P.mypar {font-style: italic; color: blue}
</STYLE>
</HEAD>
<P id="mypar">...Lots of blue italic text...

フォントスタイル要素は,適切に入れ子にされなければならない。入れ子されたフォントスタイル要素のレンダリングは,利用者エージェントに依存する。

15.2.2 フォント修飾子要素(FONT及びBASEFONT)

FONT及びBASEFONTは,推奨しない

形式的な定義については過渡的なDTDを参照すること。

属性定義

size  = cdata [CN]
推奨しない。 この属性は,フォントのサイズを設定する。可能な値を次に示す。
  • 1〜7の整数。これは,フォントを固定サイズに設定する。そのレンダリングは,利用者エージェントに依存する。すべての利用者エージェントが,七つのサイズ全部をレンダリングできるわけではない。
  • フォントサイズの相対的増加及び減少。"+1"という値は,サイズが一つ大きくなることを意味する。"-3"という値は,サイズが三つ小さくなることを意味する。すべてのサイズは,1〜7の大きさに属する。
color = color [CI]
推奨しない。この属性は,テキスト色を設定する。
face = cdata [CI]
推奨しない。この属性は,利用者エージェントが優先順位に従って探すことが望ましい,コンマで区切られたフォント名のリストを定義する。

他の箇所で定義される属性

FONT要素は,その内容におけるテキストのフォントのサイズ及び色を変更する。

BASEFONT要素は,size属性を使用して,基底フォントサイズを設定する。FONTを用いて達成されるフォントサイズの変更は,BASEFONTよって設定される基底フォントサイズに相対的とする。BASEFONTを使用しない場合は,デフォルト基底フォントサイズは3とする。

推奨しない例
次の例は,FONTを用いて利用可能な七つのフォントサイズの間の相違を示す。

<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>

これは,次のとおりにレンダリングされる。

Example of rendering of various font sizes

次は,基底フォントサイズの3を使用する場合の,相対的なフォントサイズの効果を示す。

Example of rendering of various font sizes with a basefont

基底フォントサイズは,ヘッダには適用されない。ただし,相対的フォントサイズ変更を伴ったFONT要素を用いて,これらを変更する場合は例外とする。

15.3 けい(罫)線(HR要素)

<!ELEMENT HR - O EMPTY -- horizontal rule -->
<!ATTLIST HR
  %coreattrs;                          -- id, class, style, title --
  %events;
  >

開始タグ: 必す(須),終了タグ: 禁止

属性定義

align = left|center|right [CI]
推奨しない。 この属性は,周囲の文脈を考慮して,けい(罫)線の水平方向の配置を指定する。可能な値を次に示す。
  • left: けい(罫)線は,左揃えでレンダリングされる。
  • center: けい(罫)線は,中央揃えとする。
  • right: けい(罫)線は,右揃えでレンダリングされる。

デフォルトはalign=centerとする。

noshade [CI]
推奨しない。 設定の際,この論理的属性は,利用者エージェントが従来の2色の"溝"よりも濃い色でけい(罫)線をレンダリングすることを要求する。
size = pixels [CI]
推奨しない。 この属性は,けい(罫)線の高さを指定する。この属性のデフォルト値は,利用者エージェントに依存する。
width = length [CI]
推奨しない。 この属性は,けい(罫)線の幅を指定する。デフォルト幅は,100%とする。すなわち,けい(罫)線は,描画面全体を横切って広がる。

他の箇所で定義される属性

HR要素のために,水平方向のけい(罫)線は,視覚的利用者エージェントによってレンダリングされる。

けい(罫)線とその周囲にある内容との間に挿入される上下方向のスペースの分量は,利用者エージェントに依存する。

推奨しない例
次の例は,けい(罫)線を中央に揃え,けい(罫)線のサイズをマージン間で利用可能な幅の半分にしている。一番上のけい(罫)線の厚さはデフォルトとなっているが、下の二本のけい(罫)線は5画素に設定されている。一番下のけい(罫)線は,陰影のない濃い色でレンダリングされることが望ましい。

<HR width="50%" align="center">
<HR size="5" width="50%" align="center">
<HR noshade size="5" width="50%" align="center">

これらのけい(罫)線は,次のとおりにレンダリングされるかもしれない。

Example of rendering of various horizontal rules