align=align - 配置指定

トップ > HTMLリファレンス > align=align

■ 属性

<タグ名 align=align> - 配置指定

■ ブロック要素、セル要素の align 属性

<h1><p><div><table><caption><legend><col><colgroup><tbody><tr><th><td> などの align 属性では、要素内のデータの横方向の表示位置を指定します。

説明
left左寄せで表示します。
center中寄せで表示します。
right右寄せで表示します。
justify均等割付で表示します。まだあまりサポートされていません。
char小数点など、char 属性で指定した文字で揃えます。テーブルのセルに対する指定の場合にのみ有効です。

■ 矩形要素の align 属性

<img><textarea><select><iframe><applet><embed><object><fieldset>(※)などの矩形インライン要素における align 属性では、要素と周りのテキストの位置関係を指定します。基本的には画像の上端、中央、下端を、まわりのテキストや画像の指定した位置にあわせます。

位置説明
topH2/e2/N2/i1。同じ行に存在する一番高いテキストや画像の上端に画像の上端を合わせます。
texttope2/N2。同じ行に存在する一番高い(Netscape 7.0 では通常の大きさの)テキスト(画像は除く)の上端に画像の上端を合わせます。
centere2/N2/i4。middle と同じ意味になります。現在では center は横方向の中央を指定するために用いられるため、矩形要素では center よりも middle を指定する方が望ましいようです。
middleH2/e2/N2/i1。HTML4.01 の仕様では、同じ行に存在するテキスト(画像は除く)のベースライン(Mの下端。gの下端ではない)に画像の中央を合わせます。実際は、各ブラウザで独自のアルゴリズムを用いて位置決めしているようです。
absmiddlee2/N2。同じ行に存在する一番高いテキストや画像の上端と、一番低いテキストや画像の下端の中央に画像の中央を合わせます。
無しbaseline と同じ動作をします。
bottomH2/e2/N2/i1。baseline と同じ動作をします。
baselinee2/N2。同じ行に存在する一番低いテキスト(画像は除く)のベースライン(Mの下端。gの下端ではない)に画像の下端を合わせます。
absbottome2/N2。同じ行に存在する一番低いテキストや画像の下端に画像の下端を合わせます。
回り
込み
leftH3/e2/N2/i1。画像を左端によせ、周りをテキストで回り込みます。回り込みを解除するには <br> の clear 属性を用います。
rightH3/e2/N2/i1。画像を右端によせ、周りをテキストで回り込みます。回り込みを解除するには <br> の clear 属性を用います。

※ <fieldset> はブロック要素ですが、何故か、align 属性は矩形インライン要素的な振舞いをします。

■ top と texttop の違いについて

top はテキストや画像の上端を対称としますが、texttop はテキストの上端を対象とします。Internet Explorer 6.0 では一番大きなテキストを、Netscape 7.0 では通常の大きさのテキストを対象とします。

MgMg画像画像 MgMg画像画像
top texttop

■ absmiddle の振る舞いについて

absmiddle は、行中のテキストや画像の中で一番高い部分と一番低い部分の中央に、画像の中央を合わせます。

画像画像
absmiddle

■ middle の振る舞いについて

middle の定義は HTML4.01 では「テキストのベースライン(Mの下端。gの下端ではない)に画像の中央を合わせる」となっていますが、Internet Explorer や Netscape など各ブラウザでそれぞれ独自のアルゴリズムを用いているようです。

Mg画像 Mg画像 Mg画像 Mg画像 Mg画像
Mg画像画像 Mg画像画像 Mg画像画像 Mg画像画像

■ bottom と baseline と absbottom の違いについて

align 属性を指定しない場合や bottom を指定した場合は baseline と同じく、周りのテキストのベースライン(M の下端。g の下端ではない)に画像の下端を合わせます。absbottom はテキストや画像の下端に、画像の下端にあわせます。

Mg 画像 画像 Mg 画像 画像 Mg 画像 画像 Mg 画像 画像
無し bottom baseline absbottom

■ テキストの回り込みについて

テキストの回り込みとは、画像の周りをテキストが囲むようにすることです。align="right" または align="left" で指定します。回り込みを解除するには、<br> の clear 属性を使用します。

<img> タグに 画像 align="left" や align="right" を指定すると、 画像の周りをテキストが囲むようになります。 画像 これを、「テキストの回り込み」と呼びます。 テキストの回り込みを使用することによって、写真などの画像を効果的に貼り付けることができるようになります。回り込みを解除するには、<br> タグの clear 属性を使用します。

Copyright (C) 1996-2003 杜甫々
初版:2000年10月9日、最終更新:2003年12月7日
http://www.tohoho-web.com/html/attr/align.htm