文章中の画像

行の高さよりも大きな画像

ここでは、文章の中の画像であることを説明するため、左右の余白を大きく取っています。画像は文字と同じ扱いですが、pタグ内に行の高さよりも大きな画像をおくと、このように*(こに画像が入ります)画像の入る行の高さが大きくなります。赤い*印の後に img タグをいれています。これを次のように画像をよけて文字を配置するようにできます。

左によせる

挿入する画像*(こに画像が入ります)にスタイルシートである設定を施すと、挿入したところの高さで左によせられ、その後の文章がこのように画像をよけて文字を配置するようにできます。赤い*印の後に img タグをいれています。以前はブラウザによっては不具合があったため、なかなか普及しませんでした。しかし、現在ではほとんどのブラウザが正しく表示するようになりました。その上、この方法は画像だけでなくレイアウト全般に使用されるようになりましたので、覚えておいて損はありません。

右によせる

もちろん右に寄せることもできます。*(こに画像が入ります)赤い*印の後に img タグをいれています。ここから次の赤い*印までの文章は繰り返しです。文字が画像をよける様子を見てください。画像は文字と同じ扱いですが、pタグ内に行の高さよりも大きな画像をおくと、このように画像の入る行の高さが大きくなります。これを次のように画像をよけて文字を配置するようにできます。以前はブラウザによっては不具合があったため、なかなか普及しませんでした。しかし、現在ではほとんどのブラウザが正しく表示するようになりました。その上、この方法は画像だけでなくレイアウト全般に使用されるようになりましたので、覚えておいて損はありません。

(こに画像が入ります)*この画像の様に上を合わせるためには、画像を入れる位置をそのブロックの一番最初にします。ここまでの説明では(*)の位置に画像を入れています。いろいろやってみて覚えてください。

ただし、見る人のウインドウに比べて画像が大きいと、画像の左(または右)に流し込まれる文字の部分が見苦しくなりますから、画像が大きめの場合は、「大きめの画像を真ん中に入れる」方法の方がよいでしょう。

また、まん中に画像をおいて両側に文字を流し込むことはできません。

やりかた

画像は同じ段落内に入れます。スタイルシートで float を使って左に寄せるか、右に寄せるかを指定します。

右によせる

右に寄せるには次のようにスタイルに指定します。

img.group1 {float:right;}

group1 はクラスの名前です。名前はなんでもいいのですが、これをしないとページの全ての画像が右によりますのでよせたい画像だけクラスを設定することにします。

本文中には

<img class="group1" src="URL" alt="代替">

URLとあるところにはほとんどの場合ファイル名が入ります。altも適切に入れます。

スタイルシートで float:right になっているので画像は右に寄せられて、左の部分に文章が流し込まれます。

左によせる

もちろん左によせるには

img.group2 {float:left;}

本文中には

<img class="group2" src="URL" alt="代替">

これで画像が左に寄せられ、文章が右側に流し込まれます。

文章の流し込み解除

画像の大きさに対して文章が少ないと、次のブロックが流れ込んできます。次の段落ならばいいのですが、次の見出しや、署名が流れ込むのは見苦しいものです。

桃の絵の周りに次の章の文章まで入り込んでいます

このような時は、見出しなど流し込みが続いては困るブロックのタグにスタイルで指定します。

h2 {clear:both;}

この値は、right left both none のどれかになります。普通は both でいいでしょう。

下図では 第3章 と書いてある h2 タグに指定しました。

桃の絵が終わってから次の章の文章が入ります

課題 float.html

適度な大きさの画像と説明文で次のような内容のページを作ります。文章はある程度長くないと回り込みません。文章をコピーして繰り返すとか、左右の余白を多くするなどで文字が回り込むことが確認できるページにします。

桃はどのぐらい浮かぶか

桃のてっぺんしか見えません流れてきた桃を何となく想像して描いたのですが、よく考えてみるとこんなに水面に出ているわけはありません。普通の果物ならばこのぐらいというわけで、描き直してみたものがこれです。でもこれでは桃であるという説得力にかけ、印象も薄いですね。たぶん子供の頃みた絵も、かなりの部分が水面に出ていて、なんとなくそんなものだと思いこんでいるのでしょう。
さて、桃はどのぐらいの大きさでどのぐらいの重さだったのでしょうか。おばあさんが持てる重さだったでしょうか。
この図は、縦横とも150ピクセルで、float:left の指定をしています。

周りの文字との隙間

桃のてっぺんしか見えません上の画像では図の右に文字が密着しすぎていると感じるかもしれません。こちらの画像ではimgタグにmargin:0 1em 0 0;の設定をして図の右に1文字分の隙間を作っています。上下には白い部分があるので、上下の隙間が見えません。そこでborderの設定もしてみました。調整中はborderをつけ、決まったらborderを消すというのも良い方法です。

余白を作るにはmarginの他にもpaddingを使うとか、画像そのものに余白をつけておくなどの方法もあります。