Section 10 : 画像の回り込み

 書籍の図版には文章中ではなく,文章と対比できる位置(たとえばページの右側)にレイアウトされているものもある。HTML でも,これと同じレイアウトを行えるようになっている。


 Let's begin HTML の Section 8 で紹介した画像の挿入方法は,「文章中に入る」つまり,

 文章が続いていて,その中にimageのように入る

記述だった。この方法で,画像を文章から独立させて表示させるには,前後に <BR> などを入れて改行させればよい。必要に応じてセンタリングしておけば図らしくなる。
 これはこれで構わないのであるが,縦に長い画像を表示させると効率が悪いのはお分かりいただけるはず。そうでなくても,文章と図を対比させるのに図が右,文が左というレイアウトを見たことがあるだろう。この「図の回り込み」を HTML では簡単に行うことができる。

<IMG SRC="..." ALIGN="...">

ここでおさらいしておくと,SRC="..." は画像ファイルの URL である。追加された ALIGN で画像を右に配置するか(right),左に配置するか(left)を決めることができる。
 配置された画像を避けるようにして文章がレイアウトされる。ここで,

<BR CLEAR="...">

を指定すると,改行され,回り込み配置を中止する。つまり,画像の下端より文章が上に収まっている場合,改行後に画像の下端の高さから文章が始まる。CLEAR="..." には,<IMG ...> の ALIGN で指定した right または left を指定する。もしくは all で右・左両方の回り込みを同時に中止することもできる。とりあえず <BR CLEAR="all"> だけ知っているだけでも構わない。
 実際に目でみて確かめてみよう。

<H3>Let's try HTML</H3>
<P><IMG SRC="lth.gif" ALIGN="right" ALT="Let's try HTML"> Let's try HTML は入門編 Let's begin HTML を卒業した人向けの初級 HTML チュートリアルです。<BR>
 背景色,文字の色・大きさ,画像,表組などについて基本的なものを 例をあげて解説しています。<BR CLEAR="right"></P>
<A HREF="index.html">目次へ</A>

ブラウザの幅をさまざまに変えて文章と画像の位置関係をよく見てみよう。

Let's try HTML

Let's try HTML Let's try HTML は入門編 Let's begin HTML を卒業した人向けの初級 HTML チュートリアルです。
背景色,文字の色・大きさ,画像,表組などについて基本的なものを例をあげて解説しています。

目次へ

 HTML はより複雑な表現に対応できるよう改訂が繰り返されている。また,ブラウザ独自の「呪文」もある(e.g. : Internet Explorer の <MARQUEE>)。だが,そのような機能を使うにつけても,HTML の基本は必ずついて回るのは言うまでもない。さらに,多くの人に情報を提供するためにも,使った「呪文」がサポートされていないブラウザでは内容がわからなくなってしまうような HTML を書くべきではない。
 また,文書が手書きからワープロになり,そしてペーパーレスになろうとしているいま,「HTML の哲学」を捕らえておくことは,少なからず有用であると考える。
 ともあれ,求められるのは,HTML が単にわかるということではなく,自分の発信したい情報を的確に HTML 化できることである。


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

Next : URL
Prev : 表組の利用(2)
Up : 目次