写真や画像の横に文章を表示させたい!ときのHTMLを
覚え書きとして書いておきます。
さらに、画像の横に文章を書いたら
画像と文章がくっついてしまってなんか格好悪いな。というとき、
体裁を気にする私のような人用に
画像と文章の間にスペースを空けるその対処法も紹介します。
写真や画像の横に文章を表示させる
写真や画像の横に文章を表示させることを「画像の回り込み」といいます。
alignという属性を使うことで右か左か、画像の位置を指定します。
1)画像を右に配置、文章を左に表示させる

サンプルとして、グリーンのりんごのイラストを右に配置してみました。
このときのHTMLは以下のようになります。
サンプルとして、グリーンのりんごのイラストを右に配置してみました。
imgは画像。
src="URL(imgのある場所)/imgの名前.jpg"(他に.gif、.pngなど)
2)画像を左に配置、文章を右に表示する

サンプルとして、グリーンのりんごのイラストを左に配置してみました。
このときのHTMLは以下のようになります。
サンプルとして、グリーンのりんごのイラストを左に配置してみました。
画像と文章の間に余白を空ける
画像をalign="left" で左に表示させたときに起こるのですが、
文章の文字が表示された画像のすぐ右にくっついてしまって
ちょっと格好が悪いし、なんだか読みにくいので
画像と文章の間にスペースを入れてみます。
hspaceという属性を使います。
<img src="http://~~~/***.jpg" align="left" hspace="20" />
この場合 hspaceで画像の左右に20pxの余白が生まれます。
20の数字を変えると余白の幅が変わります。

サンプルとして、グリーンのりんごのイラストを左に配置してみました。
先ほどの2) の画像と見比べてみてください。
ちなみに画像の上下に余白を入れたい時は
vspace を使います。
画像の回り込みを解消する
画像の横に表示する文章を途中で切りたい。というときは
「回り込みの解除」をすることができます。
<br clear="all"> を記述するとそこから以降は
普通の位置に文章を表示することができます。

<br clear="all">を記述)
サンプルとして、グリーンのりんごのイラストを左に配置してみました。
例えば、グラフや図表の横に説明を入れたいときなど
この方法を使うときれいに納まります。
HTMLタグはおもしろいですね。
いじりだすと時間を忘れますので、ほどほどに・・・。
又、こうしたチップスを紹介しますね。
![]() |
オートチャンス 2014-12-25
|