見出しに使えるfit-contentを解説してみる

Share
5
50
29

コンテンツの幅に合わせたサイズを指定できるfit-content。無駄なタグを省くことができて、便利に使えるこのコードを私は見出しデザインで使用しています。今回はfit-contentについて実例つきで紹介していきます。

fit-contentで背景色

fit-contentでコンテンツ幅に背景色

中央位置に配置した見出しに背景色をつけるスタイル。<h2><h3>などの見出しタグを親要素の中央の位置に配置しつつ、背景色をつけるためには横幅を指定しなければいけません。

fit-contentを使わないと不便であることを解説する画像
fit-contentを使用しないと見出しごとに横幅を指定する必要がある

また、見出しの横幅を指定しないと親要素の幅いっぱいに広がってしまいます。

横幅指定しないと親要素の幅いっぱいに広がることを解説する画像

h2やh3などの見出しにdisplay: inline-blockを使用すればコンテンツ幅に背景色をつけることができます。

しかし、中央配置ができないため、見出しタグの中に<span>を追加してテキストを括り、見出しタグにtext-align: centerを指定します。

<h2><span>求人情報</span></h2>
h2 {
  text-align: center;
}

h2 span {
  background-color: #e3bf00;
}

もし、テキストの周りに余白(padding)を指定し、背景色のボックスを広げたい場合には<span>タグにdisplay: inline-blockを追加します。


h2 span {
  display: inline-block;
  padding: 10px;
  background-color: #e3bf00;
}

いろいろ考慮するとHTMLタグやCSSコードを追加する必要が出てきます。

そこでfit-contentを使用します。見出しタグにwidth: fit-contentを指定するとコンテンツ幅に合わせて背景色を配置できます。

fit-contentでコンテンツ幅に指定できることを解説する画像
fit-contentでテキストの幅に合わせて背景色を配置できる
<h2>求人情報</h2>
h2 {
  margin-right: auto;
  margin-left: auto;
  width: -moz-fit-content;
  width: fit-content;
  background-color: #e3bf00;
}

width: fit-contentを使用することで、コンテンツ(テキスト)に合わせてボックス要素の横幅を指定でき、背景色を配置することができます。margin-right: automargin-left: autoで中央配置ができ、もしテキストの周りに余白を指定する場合でもタグやコードを追加しなくても対応可能です。

<span>を追加することが悪いわけではないのですが、無駄なタグを省けるのはぜひとも採用していきたいですね。

見出しが2行の場合

ちなみに、この方法は見出し1行のみで採用できる方法です。2行以上になるとコンテンツの中で一番長い行の横幅に合わせて背景色が配置されてしまいます。

一番長い行の横幅に合わせて背景色が配置されることを解説する画像
一番長い行の横幅に合わせて背景色が配置

テキストだけに背景色を配置したい場合には、テキストを<span>で括る必要があります。

spanで括るとテキストだけに背景色が配置されることを解説する画像
spanで括るとテキストだけに背景色が配置される
<h2><span>求人情報を<br>くわしくご紹介します</span></h2>
h2 {
  text-align: center;
}

h2 span {
  background-color: #e3bf00;
}

<br>は音声読み上げソフト(スクリーンリーダー)を使用しテキストを読み上げる際、多少無音状態が発生することがあるので、区切る必要のない箇所には<br>タグを使用しない方が聞きやすくなります。本記事はfit-contentをメインに解説しているので使用しましたが、実案件でスクリーンリーダーを考慮した実装をする時はさらに<span>を多用して改行することをおすすめします。

fit-contentでマーカー

fit-contentでコンテンツ幅にマーカーを配置

中央位置に配置した見出しにマーカーをつけるスタイル。背景色と同じように親要素の中央の位置に配置しつつ、背景色をつけるためには横幅を指定しなければいけません。見出しの横幅を指定しないと親要素の幅いっぱいに広がってしまいます。

横幅を指定しないと親要素いっぱいに広がってしまうことを解説する画像
横幅を指定しないと親要素いっぱいに広がってしまう

見出しタグにwidth: fit-contentを指定するとコンテンツ幅に合わせてマーカーを配置できます。

fit-contentでテキストの幅に合わせてマーカーを配置できる
<h2>求人情報</h2>
h2 {
  margin-right: auto;
  margin-left: auto;
  width: -moz-fit-content;
  width: fit-content;
  background-image: linear-gradient(rgba(0 0 0 / 0) 70%, #e3bf00 70%);
}

見出しが2行の場合

背景色と同様に、この方法は見出し1行のみで採用できる方法です。2行以上になるとマーカーの対象がテキストごとではなく見出し全体になり、見出し縦幅の70%〜100%(サンプルコードの場合)の位置にマーカーが配置されてしまいます。

マーカーがテキストごとではなく見出し全体に配置されてしまうのを解説する画像
マーカーがテキストごとではなく見出し全体に配置されてしまう
見出し縦幅の70%〜100%の位置にマーカーが配置されることを解説する画像

テキストだけにマーカーを配置したい場合には、テキストを<span>で括る必要があります。

spanで括るとテキストだけにマーカーが配置される
<h2><span>求人情報を<br>くわしくご紹介します</span></h2>
h2 {
  text-align: center;
}

h2 span {
  background-image: linear-gradient(rgba(0 0 0 / 0) 70%, #e3bf00 70%);
}

ブラウザ対応

Can i use

IE以外のモダンブラウザで対応。Firefoxのみベンダープレフィックス(-moz-fit-content)が必要です。

参考

人気記事

  1. 厳選 ! 良質なWebデザインを集めているギャラリーサイト

    もうこれだけでいい!良質なWebデザインを集めているギャラリーサイト18+1選

  2. Chrome拡張機能を見直してみた

    便利なChrome拡張機能を見直してみた

  3. いざという時に使える13のHTML&CSS Tips集の画像

    いざという時に使える13のHTML&CSS Tips集

  4. ジュンク堂書店池袋本店の選書フェア

    ジュンク堂書店池袋本店の選書フェアで選んだ34冊の中から9冊を紹介してみる

  5. 見出しをおしゃれにする英字フォントの画像

    【無料】見出しをおしゃれにする英字フォントを19個集めてみた