要素の幅を中身によって変えられるwidth: fit-content;の使い方について【CSS】

widthプロパティにはfit-contentという値があるのでご存知でしょうか。
fit-contentは要素の中身によって横幅を変える事が出来る値となります。これを使う事で、見出しの文字数分だけに背景や線をつける事が出来るのでとても便利な値です。
今回は、このwidth: fit-content;について解説していきます。

見出しに背景色を付ける場合

見出しに背景色を付ける場合、いくつかやり方があるかと思いますが、まずはfit-contentを使用しない場合のやり方をご覧ください。

<h3 class="title1">ここに見出しが入ります</h3>
<h3 class="title2"><span>ここに見出しが入ります</span></h3>

.title1 {
    text-align: center;
    padding: 10px;
    background-color: lightgray;
}
.title2 {
    text-align: center;
}
.title2 span {
    display: inline-block;
    padding: 10px;
    background-color: lightgray;
}

1つ目のやり方だと全幅に背景色が付いてしまい、文字数分だけに背景色を付けたい場合は横幅を指定しなければならず汎用性がありません。
2つ目のやり方は、目的には合ってますが記述が多くなり手間がかかります。

fit-contentを使うと、記述も最小限に抑えられて汎用性のあるものが出来ます。
以下のコードをご覧ください。

<h3 class="title">ここに見出しが入ります</h3>

.title {
    width: fit-content;
    padding: 10px;
    margin: 0 auto;
    background-color: lightgray;
}

fit-contentを使うと、上記例のように横幅が文字数に合わせて可変になるので、文字数分だけに背景色を付ける事ができます。横幅が文字数分の横幅になるので、中央寄せにする場合はmargin: 0 auto;で対応可能です。

見出しに下線を付ける場合

続いて見出しに下線を付ける場合ですが、borderプロパティやbackgroundプロパティで下線を付ける事が多いと思います。今回はborderプロパティで下線を付けてみます。

backgroundプロパティで下線を付ける場合の解説は、CSSで点線や破線の長さ・間隔を自由に設定する方法について【CSS】で詳しく解説していますのでご覧ください。

<h3 class="title">ここに見出しが入ります</h3>

.title {
    text-align: center;
    padding-bottom: 5px;
    border-bottom: 2px solid lightgray;
}

上記例のように、こちらも全幅に下線が付いてしまいます。文字数分だけに下線を付ける場合はspanタグで括って下線を設定するのが多いかと思います。

fit-contentを使用した場合は以下のようになります。

.title {
    width: fit-content;
    padding-bottom: 5px;
    margin: 0 auto;
    border-bottom: 2px solid lightgray;
}

上記例のように、fit-contentを使うとこちらも文字数分の横幅になりますので下線が付けやすくなります。

※背景色も下線も複数行で文字だけに付けたい場合は対応出来ません。spanタグ等で対応する必要がありますので注意してください。

対応ブラウザについて

現在、ほぼ全てのモダンブラウザには対応可能です。
Firefoxの2021年10月以前のバージョンではベンダープレフィックスが必要になります。詳しくはこちらでご確認ください。

さいごに

いかがでしたでしょうか。
今回は、要素の幅を中身によって変えられるwidth: fit-content;の使い方について解説しました。
見出しだけではなく、全幅のコンテンツ内に文字数分のコンテンツを配置する際など有用な場合がありますので、上手く使ってみてください。