ブロック要素の幅を中身の幅に合わせて伸縮する
スポンサーリンク
ブロック要素の横幅は通常 100% になります。例えば背景色だけを設定した div タグは次のようになります。
| html（サンプルコード） | |
1 2 3 | <div style="background-color: #ffa500;"> 通常のブロック要素は幅 100% になる。 </div> |
通常のブロック要素は幅 100% になる。
これを中身の幅に合わせて伸縮するようにするには、 display に inline-block を設定する方法と float を設定する方法があります。
ちなみにこのサイトのページ内目次（↓）は ol タグに float プロパティを設定することで横幅を内容に合わせています。
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 を設定したブロック要素１ </div> <div style="float:left; background-color: #00a5ff;"> float を設定したブロック要素２ </div> <br style="clear:both;"/><!-- floatの解除が必要 --> |
float を設定したブロック要素１
float を設定したブロック要素２
これを縦に並べる場合は clear を設定した改行タグを挿入します。
| css（実行可能なサンプルコード） | |
1 2 3 4 5 6 7 8 9 | <div style="float:left; background-color: #ffa500;"> float を設定したブロック要素１ </div> <br style="clear:both;"/> <div style="float:left; background-color: #00a5ff;"> float を設定したブロック要素２ </div> <br style="clear:both;"/><!-- floatの解除が必要 --> |
float を設定したブロック要素１
float を設定したブロック要素２
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;"> インラインブロック要素１ </div> <div style="display:inline-block; background-color: #00a5ff;"> インラインブロック要素２ </div> |
インラインブロック要素１
インラインブロック要素２
これを縦に並べたい場合は、改行タグを入れたり別のブロック要素で囲う必要があります。以下は改行タグで縦に並べた例です。
| css（実行可能なサンプルコード） | |
1 2 3 4 5 6 7 | <div style="display:inline-block; background-color: #ffa500;"> インラインブロック要素１ </div> <br/><!-- 改行 --> <div style="display:inline-block; background-color: #00a5ff;"> インラインブロック要素２ </div> |
インラインブロック要素１
インラインブロック要素２
スポンサーリンク
- CSS
- ブロック要素の幅を中身の幅に合わせて伸縮する
- タグ内にCSSを直接記述する方法