2009年07月24日

block要素の横幅を要素の内容によって伸縮させる方法 その3

こんにちは、馬場です。


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





▼positionを使った実現方法


block要素の横幅を
要素の内容によって
伸び縮みさせる方法について
positionを使って実現する場合は、
relativeではなく、「absolute」を使います。


私のイメージですが、
block要素の横幅を伸縮させるには、
そのblock要素を周りから見て、
浮かせる
(floatやposition:absoluteなどで、
その要素の高さが周りから認識されないようにする)
と、キュっとなるようです。

(↑私のイメージですので、聞き流してください。)


▼スクリーンショット

※スクリーンショットは、windows Firefox3.0のものです。

(htmlコーディング)
<div class="wrapper03">

<div class="balloon03">花火を観にいきます!!</div>
<p>あしたは・・・。</p>

</div>
(cssサンプル)
* {

margin:0;
padding:0;

}
body {

font-size:75%;

}
.wrapper03 {

padding:10px;

}
.wrapper03 p {

padding-top:50px;

}
.balloon03 {

position:absolute;
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;

}


position:absoluteを使用すると
topやleftを設定することで
表示位置の調整がしやすいのですが、
floatのように
clearで解除する、ということができません。

浮きっぱなしになるため、
要素のheightが増えた際に、
それに合わせて、
その下の要素が下へズレることはありません。


▼スクリーンショット

※スクリーンショットは、windows Firefox3.0のものです。
吹き出しで、下の要素が隠れてしまっています。


(htmlコーディング)
<div class="wrapper03">
<div class="balloon03">

花火を観にいきます!!<br />
今年も、あの橋まで

</div>
<p>1時間くらい、歩いていきます。・・・いい運動になります。</p>
</div>
(cssサンプル)
* {

margin:0;
padding:0;

}
body {

font-size:75%;

}
.wrapper03 {

padding:10px;

}
.wrapper03 p {

padding-top:50px;

}
.balloon03 {

position:absolute;
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;

}

また、
position:absoluteは
positionプロパティで
static以外の値が指定された親要素に対しての
絶対位置
になるため、
topやleftなどで位置を調整する際は、
どの要素からの絶対位置になるかも
意識する必要があります。



block要素の横幅を
要素の内容によって
伸び縮みさせる方法について、

displayを使った実現方法、
floatを使った実現方法、
positionを使った実現方法の3つをご紹介しましたが、

サンプルのように
吹き出しを表示する場合は、
マウスオーバーした時だけ表示されるような
一時的に表示する吹き出しは、
positionで、

常に表示しておく吹き出しについては
floatで対応するのが良いかと思います。

HTML5&CSS3の最新情報はこちら → HTML5GOGO

posted by baba at 20:14 | Comment(0) | TrackBack(0) | テクニック
この記事へのコメント

この記事へのトラックバック
 
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。