●画像と文字のレイアウト
　●回り込み

　


日記はただ字を書いてるだけじゃつまらないから、絵日記風にしたいな。まずは天気のマークを入れようっと。えーと、「<img src=".gif">」だったよね。
　

<html>
<head>
<title>ノリコの日記</title>
</head>
<body bgcolor="#FFCCCC">
<center>
<br>
<br>
<b><font size="5" color="#FF6600">★日記★</font></b><br>
○月○日（月曜日）<img src="hare.gif" width="30" height="30"><br>
今日はうちの犬、ゴン太のお見合いをした。相手はご近所のランちゃん。<br>
とってもかわいい犬なので、もし上手く行ったら、きっとかわいい子犬がいっ ぱい生まれるんだろうな。<br>
<br>
○月○日（火曜日）<img src="ame.gif" width="30" height="30"><br>
今日は雨が降ってゆううつだったので、乙女ちっくに読書なんかしてみた。<br>
でもマンガだけどね。一気に3冊読んじゃった。早く続きが読みたいな。<br>
<br>
○月○日（水曜日）<img src="kumori.gif" width="30" height="30"><br>
風邪をひいた。熱が37度8分あった。昨日薄着でマンガ読んでたからかなぁ？<br>
病院に行って注射した。痛かった〜！でもおかげで今は熱も下がって、ご飯も いっぱい食べれたよ。</font>
</center>
</body>
</html>

（上のタグを表示させると・・・↓クリックしてみよう）


　
このようにそのまま並べてももちろんOKだけど、もっと便利なタグがあるよ。
　
　

画像の横にキャプション（説明文）などをつけるときに役立つタグです。

文字と画像を同じ行に置くときは、<img src>のタグの中に「align=位置」を「top（上）」「middle（真ん中）」「bottom（下）」と指定します。

画像の上に文字を置きたい場合、
<img src="hare.gif" align="top">上にある文字<P>
画像の中に文字を置きたい場合、
<img src="hare.gif" align="middle">中央にある文字<P>
画像の下に文字を置きたい場合、
<img src="hare.gif" align="bottom">下にある文字<P>

（上のタグを表示させると・・・）

画像の上に文字を置きたい場合、 上にある文字

画像の中に文字を置きたい場合、 中央にある文字

画像の上に文字を置きたい場合、 下にある文字

じゃあやってみようかな。真ん中がいいかな。
　
　

<html>
<head>
<title>ノリコの日記</title>
</head>
<body bgcolor="#FFCCCC">
<center>
<br>
<br>
<b><font size="5" color="#FF6600">★日記★</font></b><br>
○月○日（月曜日）<img src="hare.gif" width="30" height="30" align="middle"><br>
今日はうちの犬、ゴン太のお見合いをした。相手はご近所のランちゃん。<br>
とってもかわいい犬なので、もし上手く行ったら、きっとかわいい子犬がいっ ぱい生まれるんだろうな。<br>
<br>
○月○日（火曜日）<img src="ame.gif" width="30" height="30" align="middle"><br>
今日は雨が降ってゆううつだったので、乙女ちっくに読書なんかしてみた。<br>
でもマンガだけどね。一気に3冊読んじゃった。早く続きが読みたいな。<br>
<br>
○月○日（水曜日）<img src="kumori.gif" width="30" height="30" align="middle">
<br>
風邪をひいた。熱が37度8分あった。昨日薄着でマンガ読んでたからかなぁ？<br>
病院に行って注射した。痛かった〜！でもおかげで今は熱も下がって、ご飯も いっぱい食べれたよ。</font>
</center>
</body>
</html>

（上のタグを表示させると・・・↓クリックしてみよう）





　


絵日記だから、それぞれの日のイラストを載せたいな。この場合も「align=」でいいよね？
　
うん。そうなんだけど、中に入れる指定が違うんだよ。
　
　

<img src="ran.gif" align="left">
画像のまわりに文章を左に回り込ませることができます。画像のまわりに文章を左に回り込ませることができます。 画像のまわりに文章を左に回り込ませることができます。画像のまわりに文章を左に回り込ませることができます。 画像のまわりに文章を左に回り込ませることができます。

　
（上のタグを表示させると・・・）

画像のまわりに文章を左に回り込ませることができます。画像のまわりに文章を左に回り込ませることができます。 画像のまわりに文章を左に回り込ませることができます。画像のまわりに文章を左に回り込ませることができます。 画像のまわりに文章を左に回り込ませることができます。

　

★align=leftの「="left"」を「="right"」にすれば段落の右側に文字がきます。

回り込みを中止して新しい行にするには、<br clear="left"（または"right"）>と指定します。

<img src="ran.gif" align="left">
画像のまわりに文章を左に回り込ませることができます。画像のまわりに文章を左に回り込ませることができます。画像のまわりに文章を左に回り込ませることができます。
<br clear=left>
画像のまわりに文章を左に回り込ませることができます。画像のまわりに文章を左に回り込ませることができます。

（上のタグを表示させると・・・）

画像のまわりに文章を左に回り込ませることができます。画像のまわりに文章を左に回り込ませることができます。 画像のまわりに文章を左に回り込ませることができます。
画像のまわりに文章を左に回り込ませることができます。 画像のまわりに文章を左に回り込ませることができます。

じゃあ日ごとに絵の位置の左右を変えてみようかな。
　
　
これで見やすくなったね。
　
　 　

<html>
<head>
<title>ノリコの日記</title>
</head>
<body bgcolor="#FFCCCC">
<center>
<br>
<br>
<b><font size="5" color="#FF6600">★日記★</font></b><br>
<img src="ran.gif" align="left">
○月○日（月曜日）<img src="hare.gif" width="30" height="30" align="middle"><br>
今日はうちの犬、ゴン太のお見合いをした。相手はご近所のランちゃん。<br>
とってもかわいい犬なので、もし上手く行ったら、きっとかわいい子犬がいっ ぱい生まれるんだろうな。<br>
<br>
<br>
<br>
<br>
<br>
<br>
<img src="manga.gif" align="right">
○月○日（火曜日）<img src="ame.gif" width="30" height="30" align="middle"><br>
今日は雨が降ってゆううつだったので、乙女ちっくに読書なんかしてみた。<br>
でもマンガだけどね。一気に3冊読んじゃった。早く続きが読みたいな。<br>
<br>
<br>
<br>
<br>
<br>
<br>
<img src="cyusya.gif" align="left">
○月○日（水曜日）<img src="kumori.gif" width="30" height="30" align="middle">
<br>
風邪をひいた。熱が37度8分あった。昨日薄着でマンガ読んでたからかなぁ？<br>
病院に行って注射した。痛かった〜！でもおかげで今は熱も下がって、ご飯も いっぱい食べれたよ。</font>
</center>
</body>
</html>
※よくわからない人は「5.いよいよ作ってみよう」の時と同じ要領で、上のノリコの書いたHTMLをコピーして「ワープロソフト」にペーストし、内容を自分に合わせて書き換えてみましょう。 わかってきた人は、ノリコの例を参考に、自分でHTMLを打ってみましょう。

（上のタグを表示させると・・・↓クリックしてみよう）



できた〜！
　
　

　

COPYRIGHT