HTMLタグ

　ALIGN属性値の最後のグループleftとrightです。
　これらは前回までの二つの属性値と比べればまだ使う機会も多いと思います。
　前回までのグループと最も違う点は文章の配置です。前回までのものは画像の横にどれほど大きなスペースがあろうとも複数行の文章を置くことはできませんでした。もしその行を越えるテキストがいれられれば自動的に画像の下の新たな行に送られました。
　しかし今回の二つのものは画像の横に複数の行のテキストを配置できます。

　早速、例をみていただきましょう。まずは比較するためにtopでの表示をみてください。

例　<IMG SRC="./link/link.jpg" align="top"> あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん　

　このようにtopを用いた場合、一行に収まりきらなかったテキストは次の行に表示されます。例では画像が一行目の高さを広げているため画像の下にきている行が二行目だとは思えないかもしれませんが実際にはすぐ次の行です。

　次に今回の属性値であるleftを用いた場合にはどうなるでしょう。

例　<IMG SRC="./link/link.jpg" align="left"> あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

　このようにtopなど前回までの属性値ではできなかった画像横への複数行の表示ができます。
　文字列が多く画像の横に入りきらないときは自動的に画像の下の通常行に送られます。

　それではついでにrightもみておきましょう。

例　<IMG SRC="./link/link.jpg" align="right"> あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

　考え方はleftと同じです。もちろん文字列の画像横への複数行表示も可能です。
　おもしろいことに＜IMG＞タグの方が先にあるにかかわらず画像は右側に表示されます。
　ページエディタを使っていると自由にレイアイトできるのでこのようなHTMLでページを作ったときの感覚はわかりにくいかもしれません。

　上の例で画像横の文章から本行（画像の下の行）に戻したいとします。ページエディタなら単にカーソルを移して書き始めればソフトがきちんとHTMLを補足してくれます。しかしHTMLではちゃんと本行に戻ることを指定してやらなければずっと文章は続いてしまいます。
　その指定のためのタグが＜BR　CLEAR=""＞です。前回で説明した＜ＢＲ＞改行にＣＬＥＡＲ属性をつけたものです。属性値はleft、right、allの三つです。＜ＩＭＧ＞タグのＡＬＩＧＮでright（left)を設定したときは＜ＢＲ　ＣＬＥＡＲ＞の属性値はright(left)です。allにしておけばleft、rightいずれであっても使えます。したがって通常allを使えばいいでしょう。

　下の例は５０音を二回繰り返しています。
　５０音の１回目の「ん」の次に＜BR CLEAR=" left"＞を加えたことで２回目の５０音が画像の下から始まっています。allを指定しても同様です。
このタグの考え方としては＜ＩＭＧ＞タグのＡＬＩＧＮ属性値leftをクリアしてから改行するということになります。

例　<IMG SRC="./link/link.jpg" align="left"> あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん　

　なお、画像の枠とテキストが近づきすぎていて読みにくくなることを防ぐために、その間にスペースを空けるための属性があります。hspace（横スペース）とvspace（縦スペース）です。
　使うときには次のように指定します。赤い部分が指定したスペース部分で実際は単に空白です。

例　<IMG SRC="./link/link.jpg" align="left" hspace="15" vspace="10"> あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

構　文

<HTML>
　<HEAD>
　　<TITLE>
　　</TITLE>
　</HEAD>
　<BODY>
<IMG SRC="./link/link.jpg" align="left"> あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
　</BODY>
</HTML>

使用例

<HTML>
<HEAD>
<TITLE>ALIGNの指定</TITLE>
</HEAD>
<BODY>
<IMG SRC="./link/link.jpg" align="left"> あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
</BODY>
</HTML>

一口メモ

　

　今回の属性値を使う場合に気をつけなければならないことがあります。
　それはleftやrightを用いる文章とその前後の文章をはっきりと＜ＢＲ＞などで区切っておかなければならないということです。例をみてください。

例　

<HTML>
<HEAD>
<TITLE>ALIGNの指定</TITLE>
</HEAD>
<BODY>
ABCDEFGHIJKLMNOPQRSTUVWXYZ
<IMG SRC="./link/link.jpg" align="left">あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
ABCDEFGHIJKLMNOPQRSTUVWXYZ
</BODY>
</HTML>

ABCDEFGHIJKLMNOPQRSTUVWXYZ

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん ABCDEFGHIJKLMNOPQRSTUVWXYZ

　おわかりでしょうか。一回目のアルファベットの「Ｚ」の次に改行をいれなかったためにタグ上では５０音との間に画像がはいっているにもかかわらず、５０音が画像の右部分からでて上の行とドッキングしてしまいました。二回目の５０音「ん」の後も同様です。
　この場合、その「Ｚ」の後と「ん」の後に改行をつけることにより次のように正常に表示させることができます。

ABCDEFGHIJKLMNOPQRSTUVWXYZ

※　使用例をコピーして使いたいときは「講座の前に」をお読みください。