文章に画像を回り込ませる方法 align="right"
Office Word で画像を挿入した時に、画像の表示形式として文章を回り込ませる設定ができます。それと同じで、ホームページでも画像の左右に文章を回り込ませる事が可能で、画像だけではなく、ブロックレベルの div などで囲まれた範囲を回り込ます事もできます。
画像の左右に文章を回り込ませる align="*"
文章の右に画像を回り込ませる。align="right"
HTMLソース(メモ帳)
<html> <head> <title>題名</title> </head> <body> <img src="画像のアドレス" alt="MB-Support logo" border="0" width="100" height="104" align="right" /> <p> 各OSのインストール方法と、再インストールする前後の作業、 FDISKによる領域作成/削除方法など、基本的な内容を掲載しています。 </p> </body> </html>
ブラウザ
文章の左に画像を回り込ませる。align="left"
HTMLソース(メモ帳)
<html> <head> <title>題名</title> </head> <body> <img src="画像のアドレス" alt="MB-Support logo" border="0" width="100" height="104" align="left" /> <p> 各OSのインストール方法と、再インストールする前後の作業、 FDISKによる領域作成/削除方法など、基本的な内容を掲載しています。 </p> </body> </html>
ブラウザ
画像の周りに余白を入れる hspace="数字" vspace="数字"
画像の左右に余白を入れる hspace="*"
hspace="数字" 数字を大きくすれば、余白も大きくなります。
HTMLソース(メモ帳)
<html> <head> <title>題名</title> </head> <body> <img src="画像のアドレス" alt="MB-Support logo" border="0" width="100" height="104" align="left" hspace="20" /> <p> 各OSのインストール方法と、再インストールする前後の作業、 FDISKによる領域作成/削除方法など、基本的な内容を掲載しています。 </p> </body> </html>
ブラウザ
画像の上下に余白を入れる vspace="数字"
vspace=数字 数字を大きくすれば、余白も大きくなります。
HTMLソース(メモ帳)
<html> <head> <title>題名</title> </head> <body> <img src="画像のアドレス" alt="MB-Support logo" border="0" width="100" height="104" align="left" vspace="20" /> <p> 各OSのインストール方法と、再インストールする前後の作業、 FDISKによる領域作成/削除方法など、基本的な内容を掲載しています。 </p> </body> </html>
ブラウザ
画像の上下左右に余白を入れる vspace="数字" hspace="数字"
HTMLソース(メモ帳)
<html> <head> <title>題名</title> </head> <body> <img src="画像のアドレス" alt="MB-Support logo" border="0" width="100" height="104" align="left" hspace="20" vspace="20" /> <p> 各OSのインストール方法と、再インストールする前後の作業、 FDISKによる領域作成/削除方法など、基本的な内容を掲載しています。 </p> </body> </html>
ブラウザ
回り込みを終了させる <br clear="all" />
回り込みを解除するには、<br clear="all" /> を記述します。 文章が画像の高さよりも多い場合、回り込み解除を使わなくても見た目では正常表示できますが、もし、ブラウザのサイズに変動するページを作成している場合、制作者の意図しない横幅でホームページを閲覧した場合、同じく制作者の意図しない表示となる可能性があります。 回り込みを実行したら、必ず回り込みを解除させるタグを挿入しましょう。
HTMLソース(メモ帳)
<html> <head> <title>題名</title> </head> <body> <img src="画像のアドレス" alt="MB-Support logo" border="0" width="100" height="104" align="left" hspace="20" /> <p> 各OSのインストール方法と、再インストールする前後の作業、 FDISKによる領域作成/削除方法など、基本的な内容を掲載しています。 </p> <br clear="all" /> <img src="画像のアドレス" alt="MB-Support logo" border="0" width="100" height="104" align="right" hspace="20" /> <p> Windowsの起動と終了/マウスの使い方など、パソコンの基本的な操作方法から、 Windowsアップデート/ハードディスクの断片化を修復するなど メンテナンス情報を掲載しています。これからWindowsパソコンを始める方向けです。 </p> <br clear="all" /> </body> </html>
ブラウザ
<br clear="all" /> は、その上で利用した align 、float の左右を関係無く、全ての回り込みを解除します。 align="left" に対しては、<br clear="left">（左の回り込みだけを解除） 、align="right" に対しては、<br clear="right">（右の回り込みだけを解除）させる事もできます。回り込み中に改行を使う場合は、<br /> とだけ入力します（回り込みは解除されない）。
