2009年05月22日

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

こんにちは
馬場です。

divタグやpタグのような
block要素の横幅は
要素の内容に関係なく、
横幅いっぱいに広がります。
(親要素の横幅に依存する)

しかし、
中のテキストの横幅によって
伸び縮みして欲しいときがあります。

今回から3回に分けて、
block要素の横幅を
要素の内容によって
伸縮させる方法を
ご紹介します。




▼displayを使った実現方法


divタグやpタグは
block要素ですので、
横幅はいっぱいいっぱいに伸びます。
(block要素のwidthは親要素のwidthに依存)

それに対し、
inline要素は内容によって
横幅が伸縮します。
(inline要素のwidthは内容に依存)

スタイルで
divタグやpタグの
displayをinlineにすれば、
もちろん要素の内容によって
横幅が伸縮します。



・・・すでにタイトルの

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


には反してしまっているような気がしてしかたありませんが。。。

▼スクリーンショット

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

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

<div class="balloon01">花金ですから!!</div>
<p>きょうは・・・。</p>

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

margin:0;
padding:0;

}
body {

font-size:75%;

}
.wrapper01 {

padding:10px;

}
.wrapper01 p {

padding-top:30px;

}
.balloon01 {

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

}
上記のサンプルのように、
吹き出しのように使用する場合は、
inline要素だと上下のpaddingが開いてくれないので、
親要素などでpaddingを開けることになります。





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


floatを使った実現方法や
positionを使った実現方法については、
次回以降にご紹介させていただきます。 中のテキストの横幅によって
伸び縮みして欲しいときがあります。

今回から3回に分けて、
block要素の横幅を
要素の内容によって
伸縮させる方法を
ご紹介します。




▼displayを使った実現方法


divタグやpタグは
block要素ですので、
横幅はいっぱいいっぱいに伸びます。
(block要素のwidthは親要素のwidthに依存)

それに対し、
inline要素は内容によって
横幅が伸縮します。
(inline要素のwidthは内容に依存)

スタイルで
divタグやpタグの
displayをinlineにすれば、
もちろん要素の内容によって
横幅が伸縮します。



・・・すでにタイトルの

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


には反してしまっているような気がしてしかたありませんが。。。

▼スクリーンショット

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

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

<div class="balloon01">花金ですから!!</div>
<p>きょうは・・・。</p>

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

margin:0;
padding:0;

}
body {

font-size:75%;

}
.wrapper01 {

padding:10px;

}
.wrapper01 p {

padding-top:30px;

}
.balloon01 {

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

}
上記のサンプルのように、
吹き出しのように使用する場合は、
inline要素だと上下のpaddingが開いてくれないので、
親要素などでpaddingを開けることになります。





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


floatを使った実現方法や
positionを使った実現方法については、
次回以降にご紹介させていただきます。
posted by baba at 17:59 | Comment(0) | TrackBack(0) | テクニック

2009年05月08日

widthを使うときの注意点 その2

こんにちは。
溝上です。

前回に引き続き「widthを使うときの注意点 その2」をお送りします。

前回の最後にも書きましたが、Internet Explorerで表示崩れが起きたらまず一番にwidthを疑いましょう。
borderが正しく表示されない場合などもwidthを指定すれば直ることが良くあります。
それでは早速、表示崩れするサンプルを試してみます。
borderで囲んだdivの中で、左右にfloatします。
htmlコーディング例
<div class="box">
<div class="left">left</div>
<div class="right">right</div>
<div class="clear">&nbsp;</div>
</div>
(cssサンプル)
.box{
  border:1px solid #000000;
}
.right {
  float:right;
  width:150px;
  height:150px;
}
.left {
  float:left;
  width:150px;
  height:150px;
}
.clear {
  clear:both;
  height:0;
  font-size:1px;
  line-height:0;
  visibility:hidden;
}
このサンプルをInternet Explorer6とFirefox1.5で見てみました。

▼Firefoxの場合▼

▼Internet Explorerの場合▼


「ちゃんとborderが表示されているじゃないか」

と思われたのではないでしょうか。
左右にfloatしたdivタグの下に隙間が出来てしまっていますが、border自体は正しく表示されているように見えます。
これがです。

一度Internet Explorerを最小化した後、最大化してみましょう。

▼Internet Explorerの場合(最小化→最大化)▼


みごとな表示崩れです。
borderが下だけ表示されています。

この現象は画面をスクロールした場合や、長いページで元から画面に表示されていなかった箇所、お気に入りの表示、非表示を切り替えた場合などにも発生します。

発生する場合が多いわりに、なかなか気づきにくい厄介な表示崩れでは無いでしょうか。

この表示崩れはfloatしている要素を囲んでいるタグにwidthをつければ解決します。
(cssサンプル)
.box{   
width:400px;
border:1px solid #000000;
}
▼Internet Explorerの場合(最小化→最大化)▼


borderだけではなく下にあった隙間も無くなりました。
スクロールしたり、お気に入りの表示を切り替えたりしても問題なしです。

このバグも前回同様floatが関わっているようですが、特にfloatしていない場合でも起きたりします。
バグが再現できなくてサンプルはありませんが・・・
Internet Explorerは本当に厄介なバグが多いですね。
 
posted by baba at 15:16 | Comment(0) | TrackBack(0) | テクニック
 
×

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