画像に対する文字の回りこみ

前のページでは同じ行の中に文字列と画像が含まれている場合の位置関係を指定しました。この時、あくまで画像と文字列は同じ行の中にありますので、非常に大きい画像が行の中に含まれていた場合でも画像と同じ行には1行分の文字列しか表示されません。

次の例を見てください。 

<p>
<img src="img/lion.png" alt="ライオン" />
今日は雌ライオンが一匹外に出ていて、ちょうどガラスの目の
前でウトウトしています。おかげで顔の形などはっきりと見る
ことができました。
</p>

このような記述があるHTML文書をブラウザで表示すると次のように表示されます。

p4-1

画像と文字列は同じ行に含まれていますので、画像がどれだけ大きくても画像と同じ行には文字列は1行しか表示されません。

align属性による回りこみ

このような時に画像の右または左に、画像の高さの分だけ文字列の行を表示する方法を確認します。指定するにはimg要素のalign属性を使います。 

<img src="画像URI" alt="代替テキスト" align="回り込みの位置" />
※align属性は非推奨属性の為、「Transitional DTD」または「Frameset DTD」でしか使用できません。(DTDについては「DTDの種類」を参照して下さい)。

align属性には前のページでも使用した属性です。align属性に「left」を指定した場合は画像を左寄せで配置しその右側に文字列を回り込ませます。また「right」を指定した場合は画像を右寄せで配置しその左側に文字列を回り込ませます。

例えば「left」を指定した場合、続く文字列は縦方向が画像の上端に文字列の上端が揃う位置、横方向は画像の右側から順に表示されていきます。

p4-2

そして画面の端まで来たとき画像の下へ続くのではなく(画像の右の)前の行のすぐ下に続いていきます。

p4-3

行の始まる縦方向の位置が画像の高さよりも大きくなった時、今度は画像の下へ文字列は表示されます。

p4-4

このように回り込みの設定を行う事で、大きな画像を表示した場合でも無駄な空間を無くして文書を表示させることができます。

サンプル

では実際に試してみます。下記のようなサンプルページを作成しました。今回は非推奨属性を使用していますので「XHTML1.0 Transitional DTD」で作成しています。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>動物園2008年12月</title>
  </head>
  <body>
    <h1>ライオン</h1>

    <p>
    ライオンを見に来ました。
    </p>

    <p>
    <img src="img/lion.png" alt="ライオン" align="right" />
    </p>

    <p>
    今日は雌ライオンが一匹外に出ていて、ちょうどガラスの目の
    前でウトウトしています。おかげで顔の形などはっきりと見る
    ことができました。
    </p>

    <p>
    暖かい日差しの中でのんびりと昼寝している姿は百獣の王と呼
    ばれるライオンのイメージとは程遠く、まるで縁側でうたた寝
    している猫のようです。
    </p>

  </body>
</html>

ブラウザで表示すると次のように表示されます。

p4-5

今回、文書や画像をそれぞれ別のp要素でマークアップを行い段落を別にして記述しています。このように段落が分かれている場合でも回り込みは有効となります。

回り込みの解除

回り込みの設定を行った場合、画像の高さを超える位置まで回りこみは続いて行きます。文書の途中で回りこみを辞めて画像の次の行から続けて文字列を表示させたい場合にはbr要素を使って回り込みの解除を行います。

HTML4.01 

<br clear="回り込み解除">

XHTML 

<br clear="回り込み解除" />
※clear属性は非推奨属性の為、「Transitional DTD」または「Frameset DTD」でしか使用できません。(DTDについては「DTDの種類」を参照して下さい)。

br要素そのものは改行を行うための要素ですが、clear属性に値を指定することで現在設定されている回りこみを解除することができます。clear属性に指定できる値は次の通りです。

clear属性動作
none回り込みの動作は変更せずに改行する
left左側画像に対する回りこみを解除
right右側画像に対する回りこみを解除
all両側の画像に対する回りこみを解除

画像に対してalign属性に「left」が設定されている場合、<br clear="left"> または <br clear="all"> の後については回り込みが解除され画像の下に表示する位置が移ります。

サンプル

では実際に試してみます。下記のようなサンプルページを作成しました。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>動物園2008年12月</title>
  </head>
  <body>
    <h1>ライオン</h1>

    <p>
    ライオンを見に来ました。
    </p>

    <p>
    <img src="img/lion.png" alt="ライオン" align="right" />
    </p>

    <p>
    今日は雌ライオンが一匹外に出ていて、ちょうどガラスの目の
    前でウトウトしています。おかげで顔の形などはっきりと見る
    ことができました。<br clear="all" />
    </p>

    <p>
    暖かい日差しの中でのんびりと昼寝している姿は百獣の王と呼
    ばれるライオンのイメージとは程遠く、まるで縁側でうたた寝
    している猫のようです。
    </p>

  </body>
</html>

ブラウザで表示すると次のように表示されます。

p4-6

1つ前のサンプルと比べて頂くと違いが良く分かるかと思います。

スタイルシートを使った記述方法

align属性は非推奨属性なのでStrict DTDでは使用できません。またbr要素のclear属性も同じです。今後はスタイルシートのfloatプロパティ及びclearプロパティを使う事で同じような設定を行うことが出来ます。詳細はスタイルシートのページで解説しますが実際の例だけを確認しておきます。

スタイルシートを使った場合は次のように記述できます。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>動物園2008年12月</title>
  </head>
  <body>
    <h1>ライオン</h1>

    <p>
    ライオンを見に来ました。
    </p>

    <p>
    <img src="img/lion.png" alt="ライオン" style="float:left;" />
    </p>

    <p>
    今日は雌ライオンが一匹外に出ていて、ちょうどガラスの目の
    前でウトウトしています。おかげで顔の形などはっきりと見る
    ことができました。<br style="clear:both;" />
    </p>

    <p>
    暖かい日差しの中でのんびりと昼寝している姿は百獣の王と呼
    ばれるライオンのイメージとは程遠く、まるで縁側でうたた寝
    している猫のようです。
    </p>

  </body>
</html>

ブラウザで表示すると次のように表示されます。

p4-7

( Written by Tatsuo Ikura )

Profile
profile_img

著者 / TATSUO IKURA

初心者～中級者の方を対象としたプログラミング方法や開発環境の構築の解説を行うサイトの運営を行っています。