Section 11 : 行揃えと回り込み − ALIGN 属性

 Section 7 でふれたように,ALIGN 属性は使われる要素とその使われ方によって意味が微妙に違う。共通するのは「配置を指定する」という点である。ALIGN 属性の主な3つの意味は,

である。


行配置を設定する

 その要素の範囲を左寄せ・センタリング・右寄せとする。ALIGN="..." の ... の部分に leftcenterright を入れて用いる。対象となる要素は,

<P>〜</P>段落の行配置を指定する。このとき,</P> は必須Internet Explorer 2.0 では ALIGN="right" は指定不可
<DIV>〜</DIV>行揃え。Internet Explorer 2.0 では無効。Let's begin HTML の Section 6 を復習しよう。
<Hn>〜</Hn>見出しの行配置を指定する。Internet Explorer 2.0 では ALIGN="right" は指定不可
<HR>水平線を画面の左・中央・右に表示させる。Section 12で詳しく解説する。
<TR>〜</TR>表の行に対して,その中のセルの行配置を指定する。<TD> で ALIGN を設定したならば,そちらが優先される。その行の <TH> には無効。
<TD>〜</TD>表のセルに対して,その行配置を指定する。
<TH>〜</TH>表の見出しのセルに対して,その行配置を指定する。

 これらは,<DIV ALIGN="..."> と同様なのでわかりやすいだろう。


回り込みを指定する

 「回り込み」は書籍でよく見られるような,図版などがページのある部分にあって,文字がよけるように配置されるレイアウトのしかたである。
 これも,leftright が指定できる。対象となる要素は,<IMG> と <TABLE>〜</TABLE> である。これに ALIGN を指定することにより,画像もしくは表組は左・右に配置され,そのあとの文書はそれらをよけるようにレイアウトされる。
 回り込みを途中でやめるときは,

<BR CLEAR="...">

を指定する。... に入るのは,回り込みをやめたい配置である。たとえば,left,right へ回り込みを指定したときに,right の回り込みだけを解除することができる。すべての回り込みを解除する場合は all を指定する。

 右の回り込みを見ていただこう。

<P>回り込み指定前です。<BR>
<IMG SRC="g_sphere.gif" ALT="Floating Image" ALIGN="right">
 画像が右側に配置され,文章は画像をよけてレイアウトされます。 途中で回り込みをやめたくなったら,&lt;BR CLEAR="..."&gt; を使って,<BR CLEAR="right">
のようにすることができます。</P>

 ブラウザの横幅を変えてどうなるかも確認しよう。

回り込み指定前です。
Floating Image  画像が右側に配置され,文章は画像をよけてレイアウトされます。途中で回り込みをやめたくなったら,<BR CLEAR="..."> を使って,
のようにすることができます。

 これが,画像を単に右側へ配置するのと異なることは,次の例と比べればわかる。

<P>画像を単に右に配置するのは,<BR>
<DIV ALIGN="right"><IMG SRC="g_sphere.gif" ALT="Right-flushed Image"></DIV>
とします。このとき,文字は画像の下から始まり,回り込みはおこりません。 このような配置は,&lt;CENTER&gt; と用いるのがふつうでしょう。</P>

 画像の直後の文章の開始位置に注意しよう。

画像を単に右に配置するのは,

Right-flushed Image
とします。このとき,文字は画像の下から始まり,回り込みはおこりません。このような配置は,<CENTER> と用いるのがふつうでしょう。


文字の表示位置を指定する

 <IMG> では left,right で回り込みを指定するほかに,top,middle,bottom で文章中に画像を入れ,その画像と文字との位置関係が指定する。top は文字の上端が画像の上端に一致し,bottom ではその逆である。middle では真ん中あたりに配置される。

位置関係は,ALIGN=top← top,ALIGN=middle← middle,ALIGN=bottom← bottom となります。

解決! センター化学 I
解決! センター化学 I ◆ Z 会出版

Next : 水平線 − <HR> の属性
Prev : 背景・文字色 − <BODY> の属性
Up : 目次