15 配置、フォントスタイル、横罫線

目次

  1. 整形
    1. 背景色
    2. 配置
    3. 浮動オブジェクト
  2. フォント
    1. フォントスタイル要素: TTI BBIGSMALLSTRIKES、及びU要素
    2. フォント変更要素: FONT要素とBASEFONT要素
  3. 罫線: HR要素

本書のこの節では、HTMLで視覚的整形に用いる要素や属性について説明する。このほとんどは、 推奨しない

15.1 整形

15.1.1 背景色

属性定義

bgcolor = color [CI]
推奨しない。 この属性は、文書本体や表のコマの背景色を設定する。

この属性は、文書本体(BODY要素)あるいは表( TABLE要素、TR要素、TH要素、 TD要素)のキャンバスの背景色を設定する。 テキスト色を指定する追加的な属性が、 BODY要素で設定できる。

この属性は推奨しないこととなり、背景色情報の指定にはスタイルシートを用いることを奨める。

15.1.2 配置

表、画像、オブジェクト、段落など、まとまった塊をキャンバスに配置することは、align属性によって行える。 この属性は多くのHTML要素に設定可能であるが、要素によって取り得る値の範囲が異なる場合がある。ここでは、テキストの配置属性の意味のみを説明する。

属性定義

align = left|center|right|justify [CI]
推奨しない。 この属性は、周囲との関係における当該要素の水平配置を指定する。可能な値は次の4つ。
  • left: テキストは左揃えでレンダリングされる。
  • center: テキストは中央揃えでレンダリングされる。
  • right: テキストは右揃えでレンダリングされる。
  • justify: テキストは左右マージンに揃えられる。

デフォルト値は基本のテキスト方向に依存する。左から右のテキストではデフォルトは align=leftだが、右から左のテキストではデフォルトは align=rightである。

推奨しない例:
次の例は見出しをキャンバスの中央に揃えている。

<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要素は推奨しない

15.1.3 浮動オブジェクト

画像やオブジェクトは、「行内」に直接出現することもできるが、ページの一方に浮動することもできる。浮動する場合、オブジェクトの反対側に流れるテキストのマージンは一時的に変更される。

オブジェクトの浮動 

オブジェクト、画像、表、フレームなどの align属性は、それらを左または右マージンに浮動させる。浮動オブジェクトは、一般に、新しい行を開始する。可能な値は次の2つ。

推奨しない例:
次の例は、キャンバスの現在の左マージンに IMG要素を浮動させる方法を示すものである。

<IMG align="left" src="http://foo.com/animage.gif" alt="わたしのボート">

配置の属性の中には値に "center" を許容するものもあり、この場合は浮動を生じず、当該オブジェクトを現在マージンの中央に揃える。 しかしながら、 P要素とDIV要素では、値 "center" は当該要素の内容を中央に揃える。

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

BR要素に定義される属性を用いると、浮動オブジェクトの周囲のテキストの流れを制御できる。

属性定義

clear = none|left|right|all [CI]
推奨しない。 視覚系ブラウザにおいて、当該行区切りの次の行がどこに現れるべきかを指定する。 この属性は、画像、表などの浮動要素を計算対象とする。可能な値は次の4つ。
  • none: 次の行は、普通に始まる。これはデフォルト値である。
  • left: 次の行は、左マージン側の全浮動オブジェクトの最下端の直下からはじまる。
  • right: 次の行は、右マージン側の全浮動オブジェクトの最下端の直下からはじまる。
  • all: 次の行は、左右両マージンの全浮動オブジェクトの最下端の直下からはじまる。

次の視覚的状況を確認されたい。 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>

15.2 フォント

この節のHTML要素は、フォント情報を指定する。このすべてを推奨しないわけではないが、スタイルシートを使うことの方を推奨する。

15.2.1 フォントスタイル要素: TTIBBIG SMALL STRIKES、及び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.

上記は、次のようにレンダリングされるであろう。

様々なフォントスタイルのレンダリング例

スタイルシートを使えば、より豊富なフォント効果を引き出すことができる。CSSで、ある段落を青いイタリック体にする指定は、次のように書ける。

<HEAD>
 <TITLE>青いイタリック体テキストがある段落</TITLE>
<STYLE type="text/css">
P#mypar {font-style: italic; color: blue}
</STYLE>
</HEAD>
<P id="mypar">…青いイタリック体テキスト…

フォントスタイル要素は適切に入れ子にする必要がある。入れ子のフォントスタイル要素をどうレンダリングするかはユーザエージェント依存である。

15.2.2 フォント変更要素: FONT要素とBASEFONT要素

FONT要素とBASEFONT要素は推奨しない

公式の定義については移行型DTDを参照されたい。

属性定義

size  = cdata [CN]
推奨しない。 この属性は、フォントのサイズを設定する。可能な値は次の通り。
  • 1から7までの整数。フォントのサイズを固定的に設定するものだが、そのレンダリングはユーザエージェント依存である。またすべてのユーザエージェントが7種類の大きさをレンダリングできるとは限らない。
  • フォントサイズの相対的増減。値「+1」は、1サイズ大きいことを意味する。値「-3」は、3サイズ小さいことを意味する。すべてのサイズは、1から7の範囲に従属する。
color = color [CI]
推奨しない。 この属性は、テキスト色を設定する。
face = cdata [CI]
推奨しない。 この属性は、フォント名を、優先順にコンマ区切りで列挙する。ユーザエージェントはこの順でフォント名を探す必要がある。

別途定義がある属性

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要素の相対指定によって変更されるのでない限り、見出しには適用されない。

15.3 罫線: HR要素

<!ELEMENT HR - O EMPTY -- horizontal rule -->
<!ATTLIST HR
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

開始タグ: 必須、終了タグ: なし

属性定義

align = left|center|right [CI]
推奨しない。 この属性は、周囲との関係における、罫線の水平方向の配置を指定する。可能な値は次の3つ。
  • left: 罫線は左揃えでレンダリングされる。
  • center: 罫線は中央揃えになる。
  • right: 罫線は右揃えでレンダリングされる。

デフォルトはalign="center"である。

noshade [CI]
推奨しない。 この論理型属性は、設定された場合、ユーザエージェントに対し伝統的表示である2色の「溝」ではなく、1色で塗りつぶして罫線を表示するよう求める。
size = pixels [CI]
推奨しない。 この属性は、罫線の高さ【太さ】を指定する。デフォルト値はユーザエージェント依存である。
width = length [CI]
推奨しない。 この属性は、罫線の幅【長さ】を指定する。デフォルトは100%であり、キャンバス全体を横切る。

別途定義がある属性

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

上記罫線は次のようにレンダリングされるであろう。

3種類の罫線レンダリング例


訳者代表: 内田明 (UCHIDA Akira)
email: uchida@happy.email.ne.jp