見出しに使えるfit-contentを解説してみる
コンテンツの幅に合わせたサイズを指定できるfit-content。無駄なタグを省くことができて、便利に使えるこのコードを私は見出しデザインで使用しています。今回はfit-contentについて実例つきで紹介していきます。
fit-contentで背景色
中央位置に配置した見出しに背景色をつけるスタイル。
<h2>
や
<h3>
などの見出しタグを親要素の中央の位置に配置しつつ、背景色をつけるためには横幅を指定しなければいけません。
また、見出しの横幅を指定しないと親要素の幅いっぱいに広がってしまいます。
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
を指定するとコンテンツ幅に合わせて背景色を配置できます。
<h2>求人情報</h2>h2 {
margin-inline: auto;
width: -moz-fit-content;
width: fit-content;
background-color: #e3bf00;
}
width: fit-content
を使用することで、コンテンツ（テキスト）に合わせてボックス要素の横幅を指定でき、背景色を配置することができます。
margin-right: auto
と
margin-left: auto
で中央配置ができ、もしテキストの周りに余白を指定する場合でもタグやコードを追加しなくても対応可能です。
<span>
を追加することが悪いわけではないのですが、無駄なタグを省けるのはぜひとも採用していきたいですね。
見出しが２行の場合
ちなみに、この方法は見出し1行のみで採用できる方法です。2行以上になるとコンテンツの中で一番長い行の横幅に合わせて背景色が配置されてしまいます。
テキストだけに背景色を配置したい場合には、テキストを
<span>
で括る必要があります。
<h2><span>求人情報を<br>くわしくご紹介します</span></h2>h2 {
text-align: center;
}
h2 span {
background-color: #e3bf00;
}
※
<br>
は音声読み上げソフト（スクリーンリーダー）を使用しテキストを読み上げる際、多少無音状態が発生することがあるので、区切る必要のない箇所には
<br>
タグを使用しない方が聞きやすくなります。本記事は
fit-content
をメインに解説しているので使用しましたが、実案件でスクリーンリーダーを考慮した実装をする時はさらに
<span>
を多用して改行することをおすすめします。
fit-contentでマーカー
中央位置に配置した見出しにマーカーをつけるスタイル。背景色と同じように親要素の中央の位置に配置しつつ、背景色をつけるためには横幅を指定しなければいけません。見出しの横幅を指定しないと親要素の幅いっぱいに広がってしまいます。
見出しタグに
width: fit-content
を指定するとコンテンツ幅に合わせてマーカーを配置できます。
<h2>求人情報</h2>h2 {
margin-inline: auto;
width: -moz-fit-content;
width: fit-content;
background-image: linear-gradient(rgba(0 0 0 / 0) 70%, #e3bf00 70%);
}見出しが２行の場合
背景色と同様に、この方法は見出し1行のみで採用できる方法です。2行以上になるとマーカーの対象がテキストごとではなく見出し全体になり、見出し縦幅の70%〜100%（サンプルコードの場合）の位置にマーカーが配置されてしまいます。
テキストだけにマーカーを配置したい場合には、テキストを
<span>
で括る必要があります。
<h2><span>求人情報を<br>くわしくご紹介します</span></h2>h2 {
text-align: center;
}
h2 span {
background-image: linear-gradient(rgba(0 0 0 / 0) 70%, #e3bf00 70%);
}ブラウザ対応
モダンブラウザで対応済みで、Firefoxの古いバージョン（2021年10月以前）への対応が必要な場合は、ベンダープレフィックス（-moz-fit-content）が必要です。
参考
Share
