超初心者のための超かんたんHP作成講座　サルでもわかる？かんたんHTML

サルでもわかる？かんたんHTML　トップページ　>>>　＃４．画像　>>>　画像の横に複数行表示しよう

　　　　　　

画像の横に複数行表示しよう

　「今回はこんな風に画像の横に複数行表示してみるぞぃ。」

　サンプル

あるところに、赤ずきんちゃんと呼ばれる女の子がいました。
赤ずきんちゃんは森の向こうのおばあさんの家へ
パンとぶどう酒を持っていくことになりました。
森の中を歩いていると、途中でオオカミに出会いました。

毒りんご

オオカミは赤ずきんちゃんに
「キレイなお花が咲いてるよ。」
と声をかけます。
赤ずきんちゃんがお花に夢中になっている間に、
オオカミはおばあさんの家へ先回りしました。

　「こうやって画像の横に複数行表示することを、
　　　　文章を画像に回り込ませる　というぞぃ。」

画像の横に複数行表示するタグ
-----------------------------------------------------------------

　align="■"　：　画像を■に表示し、文章を回り込ませる。

　　　　　　　　　　　　（■にはright（右）、left（左）を入れる）

　 　：　文章の回り込みを解除する。

-----------------------------------------------------------------

HP作成超初心者

　「前回と同じ　align="■"　を使うんですね。
　　　　でも属性値が変わると働きも変わっちゃうんですね。」

HP作成講座の先生

「うむ。これで　 　を使っても
　　　　文章が画像の下の行に移らずに、画像の横で改行されるんじゃ。」

HP作成超初心者

「下の　 　っていうのは・・・？」

HP作成講座の先生

　「これは、途中で画像の下の行に移りたい時に使うんじゃよ。
　　　　このタグで改行すると、後の文章は画像の下の行に移るぞぃ。
　　　　では実際に使ってみようかのぅ。」

　メモ帳

<BODY>～</BODY>　の間に入力

<IMG src="画像のURL" alt="毒リンゴ" width="80" height="80" align="left">
オオカミは先回りしておばあさんの家に行きました。 
「おばあさん。赤ずきんですよ。開けてくださいな。」 
「まぁ、よく来たわね。今開けますよ。」 
すっかり赤ずきんだと信じ込んだおばあさんはドアを開けてしまいました。

<IMG src="画像のURL" alt="毒リンゴ" width="80" height="80" align="right">
「まんまとかかったな！」 
オオカミはおばあさんに襲いかかりました。 
「まぁ、オオカミさんだったのねぇ。」 
そう言うとおばあさんはみるみる筋肉モリモリになり 
オオカミをやっつけてしまいました。 

　「こんな風に入力するぞぃ。
　　　　ではブラウザで見てみようかのぅ。」

　ブラウザ

オオカミは先回りしておばあさんの家に行きました。
「おばあさん。赤ずきんですよ。開けてくださいな。」
「まぁ、よく来たわね。今開けますよ。」
すっかり赤ずきんだと信じ込んだおばあさんはドアを開けてしまいました。

↑　4行目から画像の下にきておるな。

毒リンゴ

「まんまとかかったな！」
オオカミはおばあさんに襲いかかりました。
「まぁ、オオカミさんだったのねぇ。」
そう言うとおばあさんはみるみる筋肉モリモリになり
オオカミをやっつけてしまいました。

↑　離れていてちょっとわかりにくいが4行目から画像の下にきておるな。

　「画像のタグは属性がいっぱい入って長くなっちゃいますね。」

HP作成講座の先生

　「うむ、指定する事が多いからのぅ。
　　　　でもひとつひとつを見ていくとそんなに難しくないじゃろ。
　　　　今回はこれでおしまいじゃ。」

↑ページのTOPへ

画像と文字の位置
<<<　前のページへ戻る

リンクを貼ろう
次のページへ進む　>>>

サルでもわかる？かんたんHTML　トップページ　>>>　＃４．画像　>>>　画像の横に複数行表示しよう

初心者大歓迎！HTMLを使って一緒にHP作成してみませんか？