画像を貼るのは、基本的なことで結構ミスの多い部分です。
時々画像が表示されていないサイトを見かけたりしませんか？
画像を貼る位置を変えよう
前のページでは画像は単に左側に表示されるだけでしたね。でも、写真を真ん中に載せてみたり 右側にしてみたりといろいろ場所を変えてみたいでしょう。
テキストを画像に回り込ませる
単純に画像のみの位置を変えたいのなら、文章の整列のページで解説したような方法で位置を変えることが可能です。つまり、
<div align="leftまたはcenterまたはright"><img src="" width=…></div>
というように <div></div>でくくってやればいいわけです。しかし、上の写真のように文章の右側に画像を配置しテキストを左側に回りこませるにはどうしたらよいでしょう。
<html>
<head>
<title>私のホームページのタイトル</title>
</head>
<body>
<img src="001.jpg" alt="写真001番" width="300" height="225" align="right" hspace="10" vspace="10">
ようこそ私のホームページへ。私の趣味は写真です。
仕事が休みのときはいつもカメラを持って日本各地に花の写真を撮りに行っています。
日本は縦に長い国ですから一年中どこかで花が咲いています。
そしてこれからまもなく南の方から桜の便りが、退職したら一度でいいから桜前線と一緒に北上したいものです。このホームページでは私の撮った写真を載せていこうと思っています。
お楽しみに。<br>
この文章は画像を回りこんでいるはずですが、ウィンドウサイズが大きいと良くわからないかもしれませんのでウィンドウの幅を小さくして確認してください。
</body>
</html>
いかがですか？こうなりました？
<img src="画像ファイル名" alt="画像の説明" width="幅" height="高さ" align="画像の配置場所" hspace="左右の余白" vspace="上下の余白">
という書き方です。いろいろな数字を入れてみて、どのように表示されるか確認してみましょう。
回り込みの解除
画像を回り込ませていてもレイアウトや文脈の都合上途中で解除したい場合があると思います。そんなときは以下のように記述します。
<html>
<head>
<title>私のホームページのタイトル</title>
</head>
<body>
<img src="001.jpg" alt="写真001番" width="300" height="225" align="right" hspace="10" vspace="10">
ようこそ私のホームページへ。私の趣味は写真です。
仕事が休みのときはいつもカメラを持って日本各地に花の写真を撮りに行っています。
<br clear="right">
日本は縦に長い国ですから一年中どこかで花が咲いています。
そしてこれからまもなく南の方から桜の便りが、退職したら一度でいいから桜前線と一緒に北上したいものです。このホームページでは私の撮った写真を載せていこうと思っています。
お楽しみに。<br>
この文章は画像を回りこんでいるはずですが、ウィンドウサイズが大きいと良くわからないかもしれませんのでウィンドウの幅を小さくして確認してください。
</body>
</html>
このように表示されましたか？回り込みを解除したいところに、<br clear="rightまたはleftまたはall">を記述すればよいです。画像のある側をクリアすればよいのですが良くわからなければallにしておけばすべて解除されます。
さてここまできたら大体ページは出来上がりますね。さて次は、ホームページ作りにとても重要なリンクを作りましょう。リンクが無いと１ページで終わってしまいますもんね。
