【画像の横にテキストを回り込みさせる方法】
CSSがちょっと覚えるだけで、不要なタグが軽減され
HTMLが軽量化されるメリットがあります。
♥お願い♥
ご購読の皆様、右下からブログ登録してもらえると嬉しいです♪
(迷惑メールに入ってしまうこともあるので、
初心者の頃は、CSSがうまく設定できずにテーブルで区切ってましたが
それではHTMLソースがダラダラと長くなりすぎるということに
気づき、やっぱりCSSは必要なのだと思ったのです。では本題です。
【HTML】
それでは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で四角の枠を丸くする方法です♥
CSSを覚えたい人は必見の小技なので覚えて置くと
何かと便利ですよ♪
次回のテーマはCSSで四角の枠を丸くする方法です♥
お楽しみに♪
★━━━━━━━━━━━━━━━━━━━━━━━━━━━
【ウェブクリエイトが制作したサイトのPR】
■太陽光発電はカーポートが最適!メンテナンスも楽々!
http://kmcllc.co.jp/
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━