分かりやすく、使いやすく。

ブロック要素の幅を中身の幅に合わせて伸縮する

スポンサーリンク

ブロック要素の横幅は通常 100% になります。例えば背景色だけを設定した div タグは次のようになります。

html(サンプルコード)
1
2
3
<div style="background-color: #ffa500;">
通常のブロック要素は幅 100% になる。
</div> 
通常のブロック要素は幅 100% になる。

これを中身の幅に合わせて伸縮するようにするには、 display に inline-block を設定する方法と float を設定する方法があります。

ちなみにこのサイトのページ内目次(↓)は ol タグに float プロパティを設定することで横幅を内容に合わせています。

  1. float プロパティ を設定する方法
  2. display プロパティに inline-block を設定する方法


float プロパティ を設定する方法

ブロック要素に float プロパティを設定すると横幅は中身に合わせて伸縮するようになります。 float プロパティを使用する場合、最後に float を解除する clear を設定しないと表示が崩れます。

css(実行可能なサンプルコード)
1
2
3
4
<div style="float:left; background-color: #ffa500;">
float を設定したブロック要素
</div>
<br style="clear:both;"/><!-- floatの解除が必要 --> 
float を設定したブロック要素

float 属性を設定すると、ブロック要素は横に並びます。

css(実行可能なサンプルコード)
1
2
3
4
5
6
7
8
<div style="float:left; background-color: #ffa500;">
float を設定したブロック要素1
</div>
 
<div style="float:left; background-color: #00a5ff;">
float を設定したブロック要素2
</div>
<br style="clear:both;"/><!-- floatの解除が必要 --> 
float を設定したブロック要素1
float を設定したブロック要素2

これを縦に並べる場合は clear を設定した改行タグを挿入します。

css(実行可能なサンプルコード)
1
2
3
4
5
6
7
8
9
<div style="float:left; background-color: #ffa500;">
float を設定したブロック要素1
</div>
<br style="clear:both;"/>
 
<div style="float:left; background-color: #00a5ff;">
float を設定したブロック要素2
</div>
<br style="clear:both;"/><!-- floatの解除が必要 --> 
float を設定したブロック要素1

float を設定したブロック要素2

display プロパティに inline-block を設定する方法

display プロパティに inline-block を設定すると横幅は中身に合わせて伸縮するようになります。IE の場合は IE7 以前のバージョンの場合、ブロック要素は inline-block に対応していないようです。

css(実行可能なサンプルコード)
1
2
3
<div style="display:inline-block; background-color: #ffa500;">
インラインブロック要素
</div> 

表示すると以下のようになります。

インラインブロック要素

ちなみに inline-block 要素は float のように横幅に余裕があれば横に並びます。

css(実行可能なサンプルコード)
1
2
3
4
5
6
7
<div style="display:inline-block; background-color: #ffa500;">
インラインブロック要素1
</div>
 
<div style="display:inline-block; background-color: #00a5ff;">
インラインブロック要素2
</div> 
インラインブロック要素1
インラインブロック要素2

これを縦に並べたい場合は、改行タグを入れたり別のブロック要素で囲う必要があります。以下は改行タグで縦に並べた例です。

css(実行可能なサンプルコード)
1
2
3
4
5
6
7
<div style="display:inline-block; background-color: #ffa500;">
インラインブロック要素1
</div>
<br/><!-- 改行 -->
<div style="display:inline-block; background-color: #00a5ff;">
インラインブロック要素2
</div> 
インラインブロック要素1

インラインブロック要素2
スポンサーリンク