15.では,要素の視覚的フォーマット化に使用してもよいHTML要素及び属性を示す。ただし,その多くは,推奨しない。
属性定義
この属性は,文書本体(BODY要素)又は表(TABLE要素,TR要素,TH要素及び TD要素)の描画面の背景の色を設定する。テキストの色を指定する付加的な属性は,BODY要素を使って使用できる。
この属性は,背景の色の情報を指定するためにはスタイルシートを用いることが望ましいので,推奨しない。
表,画像,オブジェクト,段落などのブロック要素を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>
推奨しない例
同様に,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要素は,推奨しない。
画像及びオブジェクトは,直接に"行内"に現われてもよいし,又はページの一方の側に浮動されてもよい。この場合,一時的に,オブジェクトのいずれかの側に流し込まれるかもしれないテキストのマージンは変更される。
オブジェクト,画像,表,フレームなどに対するalign属性によって,オブジェクトは,左マージン又は右マージンに浮動する。浮動オブジェクトは,一般に,新しい行を開始する。この属性は,次の値をとる。
推奨しない例
次の例は,IMG要素を描画面の現左マージンに浮動させる方法を示している。
<IMG align="left" src="http://foo.com/animage.gif" alt="my boat">
"center"値を許容する配置属性もある。これは浮動を生じさせないが,現マージン内の中央にオブジェクトを配置する。しかし,P及びDIVに対しては,値"center"は要素の内容を中央に配置する。
BR要素のために定義される他の属性は,浮動オブジェクト周囲のテキストの流込みを制御する。
属性定義
次の視覚的シナリオを検討する。このシナリオでは,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.1及び15.2.2の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> <STYLE type="text/css"> P.mypar {font-style: italic; color: blue} </STYLE> </HEAD> <P id="mypar">...Lots of blue italic text...
フォントスタイル要素は,適切に入れ子にされなければならない。入れ子されたフォントスタイル要素のレンダリングは,利用者エージェントに依存する。
形式的な定義については過渡的なDTDを参照すること。
属性定義
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>
これは,次のとおりにレンダリングされる。
次は,基底フォントサイズの3を使用する場合の,相対的なフォントサイズの効果を示す。
基底フォントサイズは,ヘッダには適用されない。ただし,相対的フォントサイズ変更を伴ったFONT要素を用いて,これらを変更する場合は例外とする。
<!ELEMENT HR - O EMPTY -- horizontal rule --> <!ATTLIST HR %coreattrs; -- id, class, style, title -- %events; >
開始タグ: 必す(須),終了タグ: 禁止
属性定義
デフォルトはalign=centerとする。
他の箇所で定義される属性
HR要素のために,水平方向のけい(罫)線は,視覚的利用者エージェントによってレンダリングされる。
けい(罫)線とその周囲にある内容との間に挿入される上下方向のスペースの合計は,利用者エージェントに依存する。
推奨しない例
次の例は,けい(罫)線を中央に揃え,けい(罫)線のサイズをマージン間で利用可能な幅の半分にしている。一番上のけい(罫)線の厚さはデフォルトとなっているが、下の二本のけい(罫)線は5画素に設定されている。一番下のけい(罫)線は,陰影のない濃い色でレンダリングされることが望ましい。
<HR width="50%" align="center"> <HR size="5" width="50%" align="center"> <HR noshade size="5" width="50%" align="center">
これらのけい(罫)線は,次のとおりにレンダリングされるかもしれない。