たった10分でできるCSSの裏ワザ②

Posted by ウェブクリエイト webcreat on 2013年7月14日 in 豆知識 |

【画像の横にテキストを回り込みさせる方法】

CSSがちょっと覚えるだけで、不要なタグが軽減され
HTMLが軽量化されるメリットがあります。

♥お願い♥
ご購読の皆様、右下からブログ登録してもらえると嬉しいです♪
(迷惑メールに入ってしまうこともあるので、フォルダチェックお願いします。)

初心者の頃は、CSSがうまく設定できずにテーブルで区切ってましたが
それではHTMLソースがダラダラと長くなりすぎるということに
気づき、やっぱりCSSは必要なのだと思ったのです。

では本題です。
●画像の横にテキストを回り込みさせる方法

よく、このような配置のページを見かけますよね?

回り込み方法

画像の横にテキストを回り込みさせるには?

簡単にできると思われがちですが、画像(img)を入れた後に
テキストを入れようとすると、画像の下に続いてしまうんです。

回り込みしない場合の画像

※画像の横にテキストを回り込みさせない場合、このように画像の下にテキストがきてしまいます。

それを回避するのが今回のテーマテキストを回り込みさせる方法 です。

①HTMLソースの簡単タグで設定する場合
※右寄せの例
<img src=”../../logo.gif” align=”right“>

※中央揃えの例
<img src=”../../logo.gif” align=”middle“>

 

②HTML+CSSで設定する場合
【CSS】
p .hidari {
float: left;
margin-right: 2em;
margin-bottom: 1em;
}

*pタグにクラス指定をし、マージン(幅)をします。

【HTML】
<p><img src=”img01.jpg” width=”320″  alt=”左寄せの画像”></p>

*画像を通常通り配置させて、テキストにクラス指定をします。(p .hidari)

【解説】

float(フロート:左右どちらかに寄せる)プロパティの値として leftを指定し、適用した要素(ここではimg要素)の画像を左寄せにしているので、テキストが右に回り込みました。

いかがでしたでしょうか?
CSSを覚えたい人は必見の小技なので覚えて置くと
何かと便利ですよ♪

次回のテーマはCSSで四角の枠を丸くする方法です♥
お楽しみに♪

★━━━━━━━━━━━━━━━━━━━━━━━━━━━
【ウェブクリエイトが制作したサイトのPR】
■太陽光発電はカーポートが最適!メンテナンスも楽々!
http://kmcllc.co.jp/
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Comments are closed. Would you like to contact the author directly?

Copyright © 2013-2020 ホームページ制作 さいたま市・川口市 ウェブクリエイト All rights reserved.
This site is using the Multi Child-Theme, v2.1.1, on top of
the Parent-Theme Desk Mess Mirrored, v2.2, from BuyNowShop.com.