ALIGN属性値の２回目です。
今回はtexttop、absmiddle、absbottomの三つを紹介します。
前回の属性値と対比しながら簡単に説明してゆきましょう。
まずtexttopですが、topがその画像を行内のすべての要素（画像やテキスト）の最も背の高いものの上端にあわせるのに対してtexttopはその画像を行内の最も背の高いテキストの上端にあわせます。この場合、例のように画像とテキストを１つづつしか用いないレイアウトではどちらも同じです。
例 <IMG SRC="./link/link.jpg"
align="texttop"> texttopはtop同様基本的に上段で揃えられます。
|
texttopはtop同様基本的に上段で揃えられます。
|
しかし、画像やテキストが複数になったときには違った表現をします。次にtopとの対比例を掲げますのでご覧ください。 ※ 例文中要素とは画像もしくはテキストをあらわします。
例 <IMG SRC="./link/link.jpg"
align="middle"> middleは中段に
<IMG SRC="./link/link_s.jpg"
align="top"> topは最も高い要素にあわせます。
|
middleは中段に topは最も高い要素にあわせます。
|
例 <IMG SRC="./link/link.jpg"
align="middle"> middleは中段に
<IMG SRC="./link/link_s.jpg"
align="texttop"> texttopは最も高いテキストにあわせます。
|
middleは中段に texttopは最も高いテキストにあわせます。
|
例 <IMG SRC="./link/link.jpg"
align="bottom"> bottomは下段に
<IMG SRC="./link/link_s.jpg"
align="top"> topは最も高い要素にあわせます。
|
bottomは下段に topは最も高い要素にあわせます。
|
例 <IMG SRC="./link/link.jpg"
align="bottom"> bottomは下段に
<IMG SRC="./link/link_s.jpg"
align="texttop"> texttopは最も高いテキストにあわせます。
|
bottomは下段に texttopは最も高いテキストにあわせます。
|
最後の例では完全に画像が上下になっています。このように思いもよらない結果になってしまうので注意が必要です。
次にabsmiddleを見てみましょう。absは多分absolute(絶対の意）の略だと思います。
middleがテキストにその画像の中央を揃えるのに対しabsmiddleはその行中の最も大きいイメージの中央にそのイメージの中央を揃えます。
どちらかというとグループ分けするならtexttopとtopを入れ替えた方がいいような気がします。とはいえこのように分けられているということは何か理由があるのでしょう。私にはどうでもいいことですが。
absmiddleはtexttop同様、画像１枚とテキストだけならmiddleとなんらかわりません。
例 <IMG
SRC="./link/link.jpg" align="absmiddle"> absmiddleはmiddle同様基本的に中段で揃えられます。
|
absmiddleはmiddle同様基本的に中段で揃えられます。
|
しかし、画像やテキストが複数になったときには違った表現をします。次にabsmiddleを使った例をいくつか掲げます。表示結果からその他の組み合わせは類推してください。middleとの対比は省略します。
例 <IMG
SRC="./link/link.jpg" align="top"> topは上段に
<IMG SRC="./link/link_s.jpg"
align="absmiddle"> absmiddleは最も大きい要素の中央にあわせます。
|
topは上段に
absmiddleは最も大きい要素の中央...
|
例 <IMG
SRC="./link/link.jpg" align="middle"> middleは中段に
<IMG SRC="./link/link_s.jpg"
align="absmiddle"> absmiddleは最も大きい要素の中央にあわせます。
|
middleは中段に
absmiddleは最も大きい要素の中央...
|
例 <IMG
SRC="./link/link.jpg" align="bottom"> bottomは下段に
<IMG SRC="./link/link_s.jpg"
align="absmiddle"> absmiddleは最も大きい要素の中央にあわせます。
|
bottomは下段に
absmiddleは最も大きい要素の中央...
|
最後にabsbottomを見てみましょう。
bottomがテキストにその画像の下段を揃えるのに対しabsbottomはその行中の最も大きいイメージの下段にそのイメージの下段を揃えます。
※ absmiddleとほとんど同じ文体です。すみません。
absbottomはtexttopなどと同様、画像１枚とテキストだけならbottomとなんらかわりません。
例 <IMG
SRC="./link/link.jpg" align="bottom"> absbottomはbottom同様基本的に下段で揃えられます。
|
absbottomはbottom同様基本的に下段で揃えられます。
|
しかし、画像やテキストが複数になったときには違った表現をします。次にabsbottomを使った例をいくつか掲げます。表示結果からその他の組み合わせは類推してください。bottomとの対比は省略します。
例 <IMG
SRC="./link/link.jpg" align="top"> topは上段に
<IMG SRC="./link/link_s.jpg"
align="absbottom"> absbottomは最も大きい要素の下段にあわせます。
|
topは上段に
absbottomは最も大きい要素の下段...
|
例 <IMG
SRC="./link/link.jpg" align="middle"> middleは中段に
<IMG SRC="./link/link_s.jpg"
align="absbottom"> absbottomは最も大きい要素の下段にあわせます。
|
middleは中段に
absｂottomは最も大きい要素の下段...
|
例 <IMG
SRC="./link/link.jpg" align="bottom"> bottomは下段に
<IMG SRC="./link/link_s.jpg"
align="absbottom"> absbottomは最も大きい要素の下段にあわせます。
|
bottomは下段に
absbottomは最も大きい要素の下段...
|
このように先頭にabsがつくabsmiddleとabsbottomはその名のとおり絶対的に最も背の高い要素の中央あるいは下段に揃えられます。
|
構 文
<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
<IMG SRC="./link/link.jpg" align="middle">
middleは中段に
<IMG SRC="./link/link_s.jpg"
align="texttop">
texttopは最も高いテキストにあわせます。
</BODY>
</HTML>
|
使用例
<HTML>
<HEAD>
<TITLE>ALIGNの指定</TITLE>
</HEAD>
<BODY>
<IMG
SRC="./link.jpg" align="middle">
middleは中段に
<IMG SRC="./link_s.jpg"
align="texttop">
texttopは最も高いテキストにあわせます。
</BODY>
</HTML>
呼び出すための画像はココからダウンロードしHTMLファイルと同じフォルダまたはディレクトリーにコピーしてください。圧縮ファイルの解凍はダブルクリックすることで同じフォルダあるいはディレクトリに自動解凍できます。 |
|
