CSSサンプルプログ

こんにちは、馬場です。


今回は、
block要素の横幅を
要素の内容によって
伸び縮みさせる方法について、
floatを使った実現方法を
ご紹介します。

• ○ displayを使った実現方法
• ○ floatを使った実現方法
• ○ positionを使った実現方法

▼floatを使った実現方法

floatは
cssコーディングを行う際に
なくてはならない
代表的なプロパティの1つなので、
お気づきの方も多いと思いますが、
floatを使うと
要素の横幅が
要素の内容によって伸縮します。
（要素の内容に依存します。）

（htmlコーディング）

<div class="wrapper02">

<div class="balloon02">あのマイケルが！！？</div>
<div class="clear">&nbsp;</div>
<p>きょうは・・・。</p>

</div>

（cssサンプル）

* {

margin:0;
padding:0;

}
body {

font-size:75%;

}
.wrapper02 {

padding:10px;

}
.balloon02 {

float:left;
padding:10px 10px 25px 10px;
background-color:#67C3EC;
background-image:url(images/bg01.gif);
background-repeat:no-repeat;
background-position:center bottom;

}
.clear {

clear:both;
height:0;
font-size:1px;
line-height:0;
visibility:hidden;

}

・・・floatを使った実現方法と
言いますか、floatを使っているだけです。

私は、floatを使用する際は
widthを設定することがほとんどだったため、
なかなか気付くことができませんでした。


前回ご紹介した、
「displayを使った実現方法」は
inline要素になってしまうのに対し、
今回は、
block要素のままなので、
例のように吹き出しを表現する場合は、
前回より、今回の方が
向いているかもしれません。



positionを使った実現方法については、
次回以降にご紹介させていただきます。