fit-conetntの有用性を例で比較説明
多いのが「タイトル部分の文字がある部分のみに背景やマーカーの装飾しセンター揃えにする」例え。
すぐ思い浮かぶ方法は、文字部分をタグ（span）で内包するコーディング。
/* HTML */
<h1><span>この文字の部分だけ地色を付けたい。センター揃えで。</span></h1>/* CSS */
h1 { text-align: center; }
h1 span {
display: inline-block;
color: #fff;
background: #000;
}もちろんこれでも目的は達成出来るが「fit-content」を使うと、コードがさらに簡潔になる。
/* HTML */
<h1>この文字の部分だけ地色を付けたい。センター揃えで。</h1>/* CSS */
h1 {
width: -moz-fit-content;
width: fit-content;
color: #fff;
background: #000;
margin: 0 auto;
}ブロックごと右揃えなんかでも便利
そのブロック自体は「右揃え」。ただし中は「左揃え」。なおかつ内包された一番長い文章に合わせて親ブロックの幅をキープするようにしたい時。
例えば「挨拶文」や「規約文章」などの最後に日付や名前を入れる場合は便利。
/* HTML */
<div class="wrap">
<p>ここに挨拶文やら規約文章など長々入る。ここに挨拶文やら規約文章など長々入る。ここに挨拶文やら規約文章など長々入る。</p>
<div class="cregit">
<p>2022年10月7日<br>株式会社クリエイタークリップ<br>代表：しがないWEBクリエイターです</p>
</div>
</div>/* CSS */
.cregit {
width: -moz-fit-content;
width: fit-content;
margin: 0 0 0 auto;
}「displayでinline-blockにして・・・flexの方がいいかなぁ」などと悩まないで済むのは精神的によろしい。
逆に「親要素の幅にピッタリ合わせる」でも使える
例えば親要素内の画像を親要素のサイズにピッタリ合わせたい場合なども使える。この辺はおまけレベルで覚えておいても良いだろう。
