内容
ここでは要素の視覚的な体裁に使われるある種の要素や属性について述べます。これらの多くは、不適切deprecatedでいずれ廃語になるものです。
属性の定義
この属性は、文書ボディ部というキャンバス( BODY要素) やテーブル( TABLE、 TR、 THそして TD要素)の背景色を設定します。テキストの色を特定する属性が、 BODY要素と平行して用いられます。
この属性は不適切deprecatedなもので、背景色情報を設定するスタイル・シートに移行します。
ブロック要素(tables・images・objects・paragraphsなど)を align属性でキャンバス上で配置することができます。この属性は多くのHTML要素に備わっていますが、取りえるレインジ(値)が要素毎に多少ことなっています。ここでは、テキストでの配置上でのalign属性の意味について述べます。
属性の定義
初期値は、テキスト方向がどのように設定されているかに依存します。ベースが左右方向なら初期値は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)で、いずれ廃止されます。
画像や対象物(オブジェクト)は、一列に表示したり、ページの端に寄せて表示したり、オブジェクトのどちらかの側にテキストを流して表示します。
オブジェクト・画像・テーブル・フレームなどの align属性を使って、対象を左や右に寄せることができます。対象の動きは、一般的には行が関わります。属性は、次のような値を取ります:
不適切な例(DEPRECATED EXAMPLE):
次の例で、IMG要素を画面の左に寄せたものです。
<IMG align="left" src="http://foo.com/animage.gif" alt="my boat">
配置属性で"center"を取るものもあり、画面の中央に配置します。しかし、 Pや DIVの様にその内容をセンタリングするものもあります。
他の属性、 BR要素用に定義された、は対象にそって動く テキストの流れを制御します。
属性定義
不適切(Deprecated)。この要素で起こった改行の後ビジュアルなブラウザで、次の行が何処に表われるかを指定します。この属性は対象物(画像・テーブルなど)を移動させます。取り得る値は:
次の視覚的な例をみると、行が BRで変えられるまで、テキストは画像の右に流れています。
********* ------- | | ------- | image | --<BR> | | *********
clearがnoneに設定されている場合 BRに続く行は画像に右端でその(BR)すぐ下からはじまります:
********* ------- | | ------- | image | --<BR> | | ------ *********
不適切な例(DEPRECATED EXAMPLE):
clear属性がleftかallに設定されている場合次の行は次の様に表われます。
********* ------- | | ------- | 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>
次のHTML要素は、文字情報を設定します。全てが 不適切(deprecated)ではありませんが、スタイル・シートに置き代える方向になります。
<!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>
<STYLE type="text/css">
P#mypar {font-style: italic; color: blue}
</STYLE>
</HEAD>
<P id="mypar">...Lots of blue italic text...
文字スタイル要素は、正しく入れ子しなければなりません。入れ子された文字スタイル要素の表示は、表示代行手段によってことなります。
FONTと BASEFONTは、 不適切(deprecated)です。
正式な定義は、 Transitional DTDを参照下さい。
属性定義
不適切(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>
これは以下の様に表示されるでしょう:
次のは、基本文字サイズが3の場合での相対文字サイズの効果を示しています:
FONT要素で相対的サイズに変更されている場合を除いて、ベース・フォント・サイズは、見出し(ヘッディング)には適用されません
<!ELEMENT HR - O EMPTY -- horizontal rule --> <!ATTLIST HR %coreattrs; -- id, class, style, title -- %events; >
開始タグ:必須、終了タグ禁止
属性定義
不適切(Deprecated)。この属性は、前後の文脈からみて罫線の水平方向の配置を特定します。取り得る値は:
初期値は align=centerです。
その他の属性
HR要素は、ビジュアルな表示代行手段では横罫線として表示されます。
罫線と前後の内容との間にできる垂直方向の空間がどれだけになるかは、表示代行手段によって異なります。
不適切な例(DEPRECATED EXAMPLE):
この例では罫線は中央にき、現在の画面の両端の半分のサイズです。先頭のは初期値の厚さで、下二つは5ピクセルの厚さです。一番下のは影がない単一線として表示されなければなりません:
<HR width="50%" align="center"> <HR size="5" width="50%" align="center"> <HR noshade size="5" width="50%" align="center">
この罫線は次の様に表示されるます: