60おじぃの タグ打ち ホームページ作成講座 / HTMLとスタイルシートで きれいにレイアウト

画像下にテキストを配置する

画像の下に文章（テキスト）を配置したい、という場合。

普通に書くと以下のようになります。

HTML

<p>
<img src="image/gazou.jpg" width="300" height="225">
インターネット上で、普段私たちが見ているホームページは、HTML文書で書かれています。これは世界共通の言語です。この言語を学んで情報を発信するのは、楽しいことではないでしょうか。新しい世界が広がりますから。<br> ホームページを作って、情報発信したいと思ったら、まずは、情報発信したい内容を書いていくことから始めるといいと思います。
</p>

このHTMLをブラウザで表示させて、確認します。

ブラウザ

ブラウザで表示すると、上のようになりました。
画像の下に文章を入れたいのですが、画像の右下のほうに、文章が少し回り込んでいるのが気になります。これは、画像も１行分として、ブラウザが読み込んでいるため、らしいです。

そこで、画像<img src="gazou.jpg">の後に改行タグ<br>を入れて、改行させます。

HTML

<p>
<img src="image/gazou.jpg" width="300" height="225"><br>
インターネット上で、普段私たちが見ているホームページは、HTML文書で書かれています。これは世界共通の言語です。この言語を学んで情報を発信するのは、楽しいことではないでしょうか。新しい世界が広がりますから。<br> ホームページを作って、情報発信したいと思ったら、まずは、情報発信したい内容を書いていくことから始めるといいと思います。
</p>

こんどは、以下のように画像の下に、きれいに文章を入れることができました。
画像の上にテキストを入れる場合も同じような方法でできます。そのときは、改行タグ<br>はテキストの最後にいれます。

ブラウザ

画像の右にテキストを配置する

画像を左に、
文章（テキスト）を右側
に配置したい場合。

HTML

<p>
<img style="float: left" src="image/gazou.jpg" width="300" height="225">
インターネット上で、普段私たちが見ているホームページは、HTML文書で書かれています。これは世界共通の言語です。この言語を学んで情報を発信するのは、楽しいことではないでしょうか。新しい世界が広がりますから。<br> ホームページを作って、情報発信したいと思ったら、まずは、情報発信したい内容を書いていくことから始めるといいと思います。
</p>

img に対して、スタイルシートで style="float: left" と指定します。画像が左に配置され、文章（テキスト）は右側に回りこんでいきます。画像の後に入れていた<br>タグは不要になります。
float フロートとは浮かすという意味で、コーヒーフロートを想いうかべれば、覚えやすいかもしれません。
この例のように、HTML内にスタイルシートを直接書き込む方法を、インラインスタイルシートといいます。

ブラウザ

ブラウザで表示させると、上のように、画像の右側に文章が回り込んでいます。

画像の左にテキストを配置する

上の例とは逆に、
画像を右に、テキストを左
に配置してみましょう。

HTML

<p>
<img style="float: right" src="image/gazou.jpg" width="300" height="225">
インターネット上で、普段私たちが見ているホームページは、HTML文書で書かれています。これは世界共通の言語です。この言語を学んで情報を発信するのは、楽しいことではないでしょうか。新しい世界が広がりますから。<br> ホームページを作って、情報発信したいと思ったら、まずは、情報発信したい内容を書いていくことから始めるといいと思います。
</p>

img に対して、style="float: right" と指定します。画像が右に配置され、文章（テキスト）は左側に回りこんでいきます。

以下のように画像の左側に文章が回りこみました。

ブラウザ