CSSでブロック要素の幅をコンテンツのサイズぴったりにしたい時のこれからの記述方法

sectiondivpなど、ブロック要素をボーダーで囲うと、全幅(親要素の幅)になります。そのブロック要素の中のコンテンツが少なく、ボーダーの幅をコンテンツのサイズに合わせたい場合は、どう実装していますか?

ブロック要素のままでは親要素の幅になってしまうので、通常はdisplay: inline;display: inline-block;を加えると思います。

しかし、ブロック要素のwidthfit-content値を使用すると、ブロック要素のまま(displayの値を変更せずに)コンテンツのサイズに合わせることができます。

CSSでブロック要素の幅をコンテンツのサイズぴったりにしたい時のこれからの記述方法

「古い方法」「より良い方法」としたのは、上記画像の直訳です。古いからダメということではなく、より良い方法が使えるようになり、ケースバイケースで使用するのがお勧めです。

古い方法

このCSSはよく使用されると思います。もしくは、display: inline;でしょうか。
ブロック要素のdisplayプロパティの値をinline-blockにすることで、インラインブロック要素として扱うことができます。

より良い方法

この方法の何が良いかというと、ブロック要素はブロックレベルの要素のままで、そのコンテンツに合わせたサイズになります。そのため、周囲の他の要素とインラインで流れることはありません。また、CSSのwidth:fit-content;自体も、幅をコンテンツにフィット、で分かりやすいです。

ブロック要素をブロック要素のままで使用したい場合は、このCSSがお勧めです。もちろん、インラインブロックにしたい場合は前述の古い方法がお勧めです。

fit-contentのサポートブラウザ

fit-contentは、IE11を除くすべてのブラウザでサポートされています。

サイトのキャプチャ

fit-contentのサポートブラウザ

fit-contentの便利な使い方については、以前の記事をご覧ください。

実際の動作は、下記でご覧ください。

See the Pen
width: fit-content
by Elad Shechter (@elad2412)
on CodePen.

元ツイートは、下記から。

sponsors

top of page

©2021 coliss