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

内容

  1. 体裁(Formatting)
    1. 背景色
    2. 配置
    3. 対象の動き
  2. フォント
    1. フォント・スタイル要素:TT, IBBIGSMALLSTRIKESU要素
    2. フォント変更要素:フォントベースフォント(BASEFONT)
  3. 罫線:HR要素

 ここでは要素の視覚的な体裁に使われるある種の要素や属性について述べます。これらの多くは、不適切deprecatedでいずれ廃語になるものです

15.1体裁(Formatting)

15.1.1 背景色

属性の定義

bgcolor = color [CI]
Deprecated. この属性は、文書やテーブル箱(cell)の背景色を設定します。

 この属性は、文書ボディ部というキャンバス( BODY要素) やテーブル( TABLETRTHそして TD要素)の背景色を設定します。テキストの色を特定する属性が、 BODY要素と平行して用いられます。

 この属性は不適切deprecatedなもので、背景色情報を設定するスタイル・シートに移行します。

15.1.2 配置

 ブロック要素(tables・images・objects・paragraphsなど)を align属性でキャンバス上で配置することができます。この属性は多くのHTML要素に備わっていますが、取りえるレインジ(値)が要素毎に多少ことなっています。ここでは、テキストでの配置上でのalign属性の意味について述べます。

属性の定義

align = left|center|right|justify [CI]
Deprecated. この属性は、要素の水平方向の配置を設定します。(its element with respect to the surrounding context.) 取り得る値:
  • 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>

不適切な例(DEPRECATED EXAMPLE):
同様に、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...

不適切な例(DEPRECATED EXAMPLE):
DIV要素で、一連のパラグラフをグループとして一括して右寄せします:

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

CSSで書くと、テキスト-配置プロパティ(text-align property)を使います: parent element

<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要素は、 align属性で"center"と設定したDIV要素とまったく同じものです。 CENTER要素は、不適切(deprecated)で、いずれ廃止されます。

15.1.3 対象物の動き

 画像や対象物(オブジェクト)は、一列に表示したり、ページの端に寄せて表示したり、オブジェクトのどちらかの側にテキストを流して表示します。

オブジェクトの動き

 オブジェクト・画像・テーブル・フレームなどの align属性を使って、対象を左や右に寄せることができます。対象の動きは、一般的には行が関わります。属性は、次のような値を取ります:

 不適切な例(DEPRECATED EXAMPLE):
 次の例で、IMG要素を画面の左に寄せたものです。

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

 配置属性で"center"を取るものもあり、画面の中央に配置します。しかし、 PDIVの様にその内容をセンタリングするものもあります。

対象周囲のテキストの流れ

 他の属性、 BR要素用に定義された、は対象にそって動く テキストの流れを制御します。

属性定義

clear = none|left|right|all [CI]

不適切(Deprecated)。この要素で起こった改行の後ビジュアルなブラウザで、次の行が何処に表われるかを指定します。この属性は対象物(画像・テーブルなど)を移動させます。取り得る値は:

  • none:次の行は、通常通りはじまります。これは初期値です。
  • left:次の行は左手に在る画像の直下で一番近い行からはじまります。
  • right:次の行は右手に在る画像の直下で一番近い行からはじまります。
  • all:次の行は両端に存る画像の直下で一番近い行からはじまります。

 次の視覚的な例をみると、行が BRで変えられるまで、テキストは画像の右に流れています。

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

 clearnoneに設定されている場合 BRに続く行は画像に右端でその(BR)すぐ下からはじまります:

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

 不適切な例(DEPRECATED EXAMPLE):
clear属性がleftallに設定されている場合次の行は次の様に表われます。

*********  -------
|       |  -------
| image |  --<BR 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 フォント(文字)

 次のHTML要素は、文字情報を設定します。全てが 不適切(deprecated)ではありませんが、スタイル・シートに置き代える方向になります。

15.2.1 字体要素TTIBBIGSMALLSTRIKESU要素

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

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

その他の定義された属性

 文字スタイルの表示は表示代行手段によって異なります。次のことは、一応の情報説明に過ぎません。

TT:テレタイプか等幅テキスト
I:斜体テキスト
B:太文字テキスト
BIG:大きい文字テキスト
SMALL:小さい文字テキスト
STRIKES:  不適切(Deprecated)抹消記号付テキスト
U:  不適切(Deprecated)下線付テキスト

 以下の部分で、幾つかの文字スタイルを示しています:

<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 文字修正要素: FONTBASEFONT

 FONTBASEFONTは、 不適切(deprecated)です。

 正式な定義は、 Transitional DTDを参照下さい。

属性定義

size  = cdata [CN]

不適切(Deprecated)。この属性は、文字の大きさを設定します。取り得る値は:

  • 1から7までの整数。これは文字を或る大きさに固定し、表示は表示代行手段により異なります。表示代行手段は全ての大きさをを表示できるとは限りません。
  • 相対的に文字サイズを大きくする。値"+1"は、一サイズ大きいことを意味します。値"-3"は、三サイズ小さいことです。サイズは1から7迄です。
color = color [CI]
不適切(Deprecated)。この属性は、テキストの色を設定します。
face = cdata [CI]
不適切(Deprecated)。この属性は、表示代行手段が好みの順番に探すべき文字名のコンマで区切られたリストを定義します。

その他の属性

 FONT要素で、内容のテキストの文字サイズや色を変更します。

 BASEFONT要素は、基本となる文字サイズを設定します。 FONTで達成された文字サイズ変更は、 BASEFONTで設定された基本文字に相対的なものです。 BASEFONTが使われていない場合初期の基本文字は3です。

 不適切な例(DEPRECATED EXAMPLE):
次の例は 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>

 これは以下の様に表示されるでしょう:

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]

不適切(Deprecated)。この属性は、前後の文脈からみて罫線の水平方向の配置を特定します。取り得る値は:

  • left:左寄に表示
  • center:中央に表示
  • right:右寄りに表示t

 初期値は align=centerです。

noshade [CI]
不適切(Deprecated)。設定する場合このブール変数型属性は、表示代行手段は通常の二色の溝でなく単一線で罫線を表示するよう要求します。
size = pixels [CI]
不適切(Deprecated)。この属性は、罫線の高さを特定します。この属性の初期の値は表示代行手段によって異なります。
width = length [CI]
不適切(Deprecated)。この属性は罫線の幅を特定します。初期値は1000%で、キャンバス(画面)全体に伸展してます。

 その他の属性

 HR要素は、ビジュアルな表示代行手段では横罫線として表示されます。

 罫線と前後の内容との間にできる垂直方向の空間がどれだけになるかは、表示代行手段によって異なります。

 不適切な例(DEPRECATED EXAMPLE):
 この例では罫線は中央にき、現在の画面の両端の半分のサイズです。先頭のは初期値の厚さで、下二つは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