CSS 要素の幅を子要素に合わせたい！fit-contentの使い方

2024年1月8日

widthプロパティの値：fit-contentをご存じでしょうか？

widthプロパティは横幅を指定するプロパティですが、fit-contentは要素の中に記載されている文字の分だけ、横幅を指定してくれます。

見出しなどで、文字の部分だけに背景色を付ける場合に大変便利な値です。

今回はwidth: fit-contentについて解説いたします。

見出しに背景色を付ける

見出しの要素に背景色をつける場合、どのような方法が考えられるでしょうか？

順を追って解説させていただきます。

fit-contentを使用しない場合

  <h1>ここに見出しが入ります</h1>

  <style>
    h1 {
      text-align: center;
      background-color: orange;
      font-size: 32px;
      font-weight: bold;
    }
  </style>

見出しで使用されるタグ（h1～h6）はブロック要素のため、widthで値を指定しなかった場合、画面いっぱいに幅が広がります。

h1に対して背景色を指定しているため、背景色も横幅いっぱいに広がってしまいます。

fit-contentを使用しない場合は、以下のようにしてCSSを適用します。

  <h1><span>ここに見出しが入ります</span></h1>

  <style>
    h1 {
      text-align: center;
      font-size: 32px;
      font-weight: bold;
    }
    h1 span {
      background-color: orange;
    }
  </style>

h1タグの中にspanタグを使用します。spanタグで囲まれている部分に対して背景色を指定します。

さらにここからpaddingを適用する場合はどのような手段が考えられるでしょうか。

spanタグはインライン要素のため、paddingを適用する場合はinline-blockに変換するのが一般的です。

<h1><span>ここに見出しが入ります</span></h1>

<style>
  h1 {
    font-size: 32px;
    font-weight: bold;
    text-align: center;
  }
  h1 span {
    background-color: orange;
    display: inline-block;
    padding: .5em 2em;
  }
</style>

display: inline-blockとpaddingの指定を追加しました。

インラインやインラインブロックがよくわからないといった方は、下記の記事もご覧ください。違いについてまとめております。

fit-contentを使用する場合

<h1>ここに見出しが入ります</h1>

<style>
  h1 {
    font-size: 32px;
    font-weight: bold;
    width: fit-content;
    background-color: orange;
    padding: .5em 2em;
    margin: 0 auto;
  }
</style>

spanタグを使用することなく、背景色を文字の部分だけに付けることができました。

それに伴い、CSSの記載もh1タグのみに絞ることができ、見やすくなっております。

fit-contentを使用しない場合は、text-align: centerにて子要素（spanタグ）を真ん中寄せにしておりましたが、fit-contentを使用することによって、要素の幅が文字の分だけになってしまうため、margin: 0 autoで真ん中寄せにしております。

余白を作成する場合は、h1タグにpaddingを記載します。

<h1>ここに見出しが入ります</h1>

<style>
  h1 {
    font-size: 32px;
    font-weight: bold;
    width: fit-content;
    background-color: orange;
    margin: 0 auto;
    padding: .5em 2em;    /* 追加 */
  }
</style>

下線を引く場合

見出しの文章に下線をつける場合について解説いたします。

fit-contentを使用しない場合

<h1><span>見出しタイトル</span></h1>

<style>
  h1 {
    font-size: 32px;
    font-weight: bold;
    text-align: center;
  }
  h1 span {
    display: inline-block;
    background: linear-gradient(transparent 70%, orange 30%);
  }
</style>

下線を引きたい文章をspanタグで囲っております。

下線はbackgroundプロパティにて実現しております。

見出しが２行になる場合

<h1>
  <span>見出しタイトル</span><br>
  <span>これは２行目の見出しタイトルです</span>
</h1>

<style>
  h1 {
    font-size: 32px;
    font-weight: bold;
    text-align: center;
  }
  h1 span {
    display: inline-block;
    background: linear-gradient(transparent 70%, orange 30%);
}
</style>

２行になる場合は、１行目と２行目をそれぞれspanタグで囲っております。

fit-contentを使用する場合

<h1>ここに見出しが入ります</h1>

<style>
  h1 {
    font-size: 32px;
    font-weight: bold;
    width: fit-content;
    margin: 0 auto;
    background: linear-gradient(transparent 60%, orange 30%);
  }
</style>

fit-contentを使用する場合は、spanタグを使用しておりません。

fit-contentにより、要素の幅が文章の幅と同じになっており、要素に対して下線を引くことによって、文章に対して下線を引いているのと同じ状態になっております。

見出しが２行になる場合（※注意点）

<h1>見出しタイトル<br>これは２行目の見出しタイトルです</h1>

<style>
  h1 {
    font-size: 32px;
    font-weight: bold;
    width: fit-content;
    margin: 0 auto;
    background: linear-gradient(transparent 60%, orange 30%);
    text-align: center;
  }
</style>