MB-Support

パソコン初心者のサポートページ

文章に画像を回り込ませる方法 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 /> とだけ入力します(回り込みは解除されない)。




戻る 一覧表示 次へ


BTOパソコン・ゲームPC・自作パソコンなら【TSUKUMO】 - 自作PCに必要なパーツ、豊富な品揃え

Copyright © 2013 MB-Support パソコン初心者のサポートページ All Rights Reserved.

管理人サイト閲覧方法プライバシーポリシー著作権/免責事項