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

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

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/
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━