コミュニケーションを楽しく便利にできる「カフェスタ」!
HOME >> HTML > 画像と文字の並び方を指定する

point 画像と文字の並び方を指定する

<IMG src="URL(画像のアドレス)" align="キーワード">
キーワードにはtopmiddlebottomのいずれかを指定
ブラウザは画像を文字と同じように認識しますので、画像の前後に文字がある場合、画像と文字を一行で表示します。これではわかりにくいと思いますので次の例を見て下さい。
サンプル - Microsoft Internet Explorer
ホーム(H)メニュー(M)戻る(B)進む(N)
ここが一行目になります。
ここが二行目ライオンのイラストですになります。
ここが三行目になります。
ソース
<HTML>
<HEAD>
<TITLE>サンプル</TITLE>
</HEAD>
<BODY>
ここが一行目になります。<BR>
ここが二行目<IMG src="reo.gif">になります。<BR>
ここが三行目になります。
</BODY>
</HTML>
上の例では、画像が二行目の文字と一緒にひとつの行に配置されてますね。この例では、二行目の文字は画像の下の部分に合わせて配置されていますが、align属性を使えば、文字を真ん中に配置したり上に配置することができます。
サンプル - Microsoft Internet Explorer
ホーム(H)メニュー(M)戻る(B)進む(N)
紫色の三輪車
黄色の三輪車
青色の三輪車
ソース
<HTML>
<HEAD>
<TITLE>サンプル</TITLE>
</HEAD>
<BODY>
1<IMG src="san0.gif" align="top">
紫色の三輪車

2<IMG src="san1.gif" align="middle">
黄色の三輪車

3<IMG src="san2.gif" align="bottom">
青色の三輪車
</BODY>
</HTML>
Copyright ©2001〜2011 まさぼ〜 All Right Reserved