文章中の画像文章中の画像画像は文字と同じ扱いですが、ｐタグ内に行の高さよりも大きな画像をおくと、このように*
画像の入る行の高さが大きくなります。赤い*印の後に img タグをいれています。これを次のように画像をよけて文字を配置するようにできます。
画像は文字と同じ扱いですが、挿入する画像*にある設定を施すと、挿入したところの左によせられ、他のｐタグ内の文章がこのように画像をよけて文字を配置するようにできます。赤い*印の後に img タグをいれています。以前はブラウザによっては不具合があったため、なかなか普及しませんでした。たとえばネットスケープ4.73ではウインドウの大きさを変更してその画像がぎりぎり見えなくなるような変更になった場合にとんでもないところに表示するといった不具合があります。しかし、現在ではこの方法は画像だけでなくレイアウト全般に使用されるようになりましたので、覚えておいて損はありません。
画像は文字と同じ扱いですが、ｐタグ内に行の高さよりも大きな画像をおくと、このように*画像の入る行の高さが大きくなります。赤い*印の後に img タグをいれています。これを次のように画像をよけて文字を配置するようにできます。以前はブラウザによっては不具合があったため、なかなか普及しませんでした。たとえばネットスケープ4.73ではウインドウの大きさを変更してその画像がぎりぎり見えなくなるような変更になった場合にとんでもないところに表示するといった不具合があります。しかし、現在ではこの方法は画像だけでなくレイアウト全般に使用されるようになりましたので、覚えておいて損はありません。
*この画像の様に上を合わせるためには、画像を入れる位置をそのブロックの一番最初にします。ここまでの説明では（*）の位置に画像を入れています。いろいろやってみて覚えてください。
ただし、見る人のウインドウに比べて画像が大きいと、画像の左（または右）に流し込まれる文字の部分が見苦しくなりますから、画像が大きめの場合は、「大きめの画像を真ん中に入れる」方法の方がよいでしょう。
画像は同じ段落内に入れます。スタイルシートで float を使って左に寄せるか、右に寄せるかを指定します。
右に寄せるには次のようにスタイルに指定します。
img.migiyose {float:right;}
migiyose はクラスの名前です。名前はなんでもいいのですが、これをしないとページの全ての画像が右によりますのでよせたい画像だけクラスを設定することにします。
本文中には
<img class="migiyose" src="URL" alt="代替">
URLとあるところにはほとんどの場合ファイル名が入ります。altも適切に入れます。
スタイルシートで float:right になっているので画像は右に寄せられて、左の部分に文章が流し込まれます。
もちろん左によせるには
img.hidariyose {float:left;}
本文中には
<img class="hidariyose" src="URL" alt="代替">
これで画像が左に寄せられ、文章が右側に流し込まれます。
画像を真ん中にして両側に文章が流し込まれるような指定はできません。
画像の大きさに対して文章が少ないと、次のブロックが流れ込んできます。次の段落ならばいいのですが、次の見出しや、署名が流れ込むのは見苦しいものです。
このような時は、見出しなど流し込みが続いては困るブロックのタグにスタイルで指定します。
H2 {clear:both;}
この値は、right left both none のどれかになります。普通は both でいいでしょう。
下図では 第３章 と書いてある H2 タグに指定しました。
適度な大きさの画像と説明文で次のような内容のページを作ります。
流れてきた桃を何となく想像して描いたのですが、よく考えてみるとこんなに水面に出ているわけはありません。普通の果物ならばこのぐらいというわけで、描き直してみたものがこれです。でもこれでは桃であるという説得力にかけ、印象も薄いですね。たぶん子供の頃みた絵も、かなりの部分が水面に出ていて、なんとなくそんなものだと思いこんでいるのでしょう。
さて、桃はどのぐらいの大きさでどのぐらいの重さだったのでしょうか。おばあさんが持てる重さだったでしょうか。
この図は、縦横とも150ピクセルで、float:left の指定をしています。