スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

画像の横に文字を回りこませる方法

「パターン1」
文字を右と画像下に回り込みさせる

「パターン2」
文字を画像横にだけ回り込みさせる

続きは、サンプルソースと解説です。
猫 「パターン1」
文字を右と画像下に回り込みさせる


多くのサイトで見かける事があるでしょうが、このように文字を右に回り込ませるサンプルです。

余った文字は画像の下に移動しますので、ごくごく自然に下の文章と繋ぐ事が出来ます。

ブログの記事などで使う画像の回り込みとしては、現在では最も多く使われているパターン?

HTML

<div class="hiro-right">
   <img src="http://blog-imgs-67.fc2.com/b/l/o/blog130/IMG_9390.jpg" alt="猫"width="200px" />
   あいうえお、かきくけこ、さしすせそ・・・・
</div>
猫

「パターン2」
文字を左サイドだけに回り込みさせる

パターン2の場合は、さらに文章を<p> ~</p> でかこむだけです。

パターン2ではこのように余った文字がそのまま下に続きますので、
読み手側も目の移動が少なく大変見やすい文章表示になります。

HTML

<div class="hiro-left">
   <img src="画像のアドレス" alt="タイトル" />
   <p>あいうえお、かきくけこ、さしすせそ</p>
</div>

CSS

.hiro-left,
.hiro-right {
   overflow: hidden;
   height: auto;
}
 
.hiro-left img {
   float: left;
   margin: 0 15px 0 0 !important;
   padding: 0 !important;
   border: 0 !important;
}
 
.hiro-right img {
   float: right;
   margin: 0 0 0 15px !important;
   padding: 0 !important;
   border: 0 !important;
}
 
.hiro-left p,
.hiro-right p {
   overflow: hidden;
   height: auto;
}
関連記事

コメント


管理者のみに表示
ニューハーフ
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。