CSSでブロック要素の幅をコンテンツのサイズぴったりにしたい時のこれからの記述方法
Post on:2021年8月4日
sponsors
sectionやdivやpなど、ブロック要素をボーダーで囲うと、全幅（親要素の幅）になります。そのブロック要素の中のコンテンツが少なく、ボーダーの幅をコンテンツのサイズに合わせたい場合は、どう実装していますか？
ブロック要素のままでは親要素の幅になってしまうので、通常はdisplay: inline;やdisplay: inline-block;を加えると思います。
しかし、ブロック要素のwidthにfit-content値を使用すると、ブロック要素のまま（displayの値を変更せずに）コンテンツのサイズに合わせることができます。
「古い方法」「より良い方法」としたのは、上記画像の直訳です。古いからダメということではなく、より良い方法が使えるようになり、ケースバイケースで使用するのがお勧めです。
古い方法
|
1 2 3 |
.box-content{ display: inline-block; } |
このCSSはよく使用されると思います。もしくは、display: inline;でしょうか。
ブロック要素のdisplayプロパティの値をinline-blockにすることで、インラインブロック要素として扱うことができます。
より良い方法
|
1 2 3 4 |
.box-content{ width:-moz-fit-content; /* Firefox */ width:fit-content; /* other browsers */ } |
この方法の何が良いかというと、ブロック要素はブロックレベルの要素のままで、そのコンテンツに合わせたサイズになります。そのため、周囲の他の要素とインラインで流れることはありません。また、CSSのwidth:fit-content;自体も、幅をコンテンツにフィット、で分かりやすいです。
ブロック要素をブロック要素のままで使用したい場合は、このCSSがお勧めです。もちろん、インラインブロックにしたい場合は前述の古い方法がお勧めです。
fit-contentのサポートブラウザ
fit-contentは、IE11を除くすべてのブラウザでサポートされています。
fit-contentの便利な使い方については、以前の記事をご覧ください。
実際の動作は、下記でご覧ください。
See the Pen
width: fit-content by Elad Shechter (@elad2412)
on CodePen.
元ツイートは、下記から。
🤓 When you need a #CSS 'display: block' element that takes only the content size, you can now use the 'width: fit-content' instead of the 'inline-block' value.
And has full browser support! 🦄.@CodePen: https://t.co/E00fBZnjTt pic.twitter.com/QRPxlYyRel
— Elad Shechter (@eladsc) July 28, 2021
sponsors
