写真や画像の横に文章を表示させたい！ときのHTMLを
覚え書きとして書いておきます。
さらに、画像の横に文章を書いたら
画像と文章がくっついてしまってなんか格好悪いな。というとき、
体裁を気にする私のような人用に
画像と文章の間にスペースを空けるその対処法も紹介します。
写真や画像の横に文章を表示させる
写真や画像の横に文章を表示させることを「画像の回り込み」といいます。
alignという属性を使うことで右か左か、画像の位置を指定します。
１）画像を右に配置、文章を左に表示させる
写真や画像の横に文章を表示させることを画像の回り込みといいます。サンプルとして、グリーンのりんごのイラストを右に配置してみました。
このときのHTMLは以下のようになります。
サンプルとして、グリーンのりんごのイラストを右に配置してみました。
imgは画像。
src="URL(imgのある場所)/imgの名前.jpg"(他に.gif、.pngなど)
２）画像を左に配置、文章を右に表示する
写真や画像の横に文章を表示させることを画像の回り込みといいます。サンプルとして、グリーンのりんごのイラストを左に配置してみました。
このときのHTMLは以下のようになります。
サンプルとして、グリーンのりんごのイラストを左に配置してみました。
画像と文章の間に余白を空ける
画像をalign="left" で左に表示させたときに起こるのですが、
文章の文字が表示された画像のすぐ右にくっついてしまって
ちょっと格好が悪いし、なんだか読みにくいので
画像と文章の間にスペースを入れてみます。
hspaceという属性を使います。
<img src="http://～～～/＊＊＊.jpg" align="left" hspace="20" />
この場合 hspaceで画像の左右に20pxの余白が生まれます。
20の数字を変えると余白の幅が変わります。
写真や画像の横に文章を表示させることを画像の回り込みといいます。サンプルとして、グリーンのりんごのイラストを左に配置してみました。
先ほどの２） の画像と見比べてみてください。
ちなみに画像の上下に余白を入れたい時は
vspace を使います。
画像の回り込みを解消する
画像の横に表示する文章を途中で切りたい。というときは
「回り込みの解除」をすることができます。
<br clear="all"> を記述するとそこから以降は
普通の位置に文章を表示することができます。
写真や画像の横に文章を表示させることを画像の回り込みといいます。（ここに<br clear="all">を記述）
サンプルとして、グリーンのりんごのイラストを左に配置してみました。
例えば、グラフや図表の横に説明を入れたいときなど
この方法を使うときれいに納まります。
HTMLタグはおもしろいですね。
いじりだすと時間を忘れますので、ほどほどに・・・。
又、こうしたチップスを紹介しますね。
 |
オートチャンス 2014-12-25
|