コンテンツの幅に合わせたサイズを指定できるfit-content。無駄なタグを省くことができて、便利に使えるこのコードを私は見出しデザインで使用しています。今回はfit-contentについて実例つきで紹介していきます
- 中央位置に配置した見出しに背景色をつけるスタイルで便利。
- 使わない場合、見出しの横幅を指定しないと親要素の幅いっぱいに広がってしまう。
- 見出しにdisplay: inline-blockを使用すればコンテンツ幅に背景色をつけられる。しかし、中央配置ができないため、見出しタグの中にを追加してテキストを括り、見出しタグにtext-align: centerを指定。
- もし、テキストの周りに余白（padding）を指定し、背景色のボックスを広げたい場合にはタグにdisplay: inline-blockを追加。
使用した場合
- 見出しタグにwidth: fit-contentを指定するとコンテンツ幅に合わせて背景色を配置
- width: fit-contentを使用することで、コンテンツ（テキスト）に合わせてボックス要素の横幅を指定でき、背景色を配置可。margin-right: autoとmargin-left: autoで中央配置ができ、もしテキストの周りに余白を指定する場合でもタグやコードを追加しなくても対応可。
h2 {
margin-right: auto;
margin-left: auto;
width: -moz-fit-content;
width: fit-content;
background-color: #e3bf00;
}見出しが２行の場合
- 2行以上になるとコンテンツの中で一番長い行の横幅に合わせて背景色が配置されてしまう。
- テキストだけに背景色を配置したい場合には、テキストをで括る。
fit-contentでマーカー
- 見出しタグにwidth: fit-contentを指定するとコンテンツ幅に合わせてマーカーを配置できる。
見出しが２行の場合
- テキストだけにマーカーを配置したい場合には、テキストをで括る。
ブラウザ対応
- IE以外のモダンブラウザで対応。Firefoxのみベンダープレフィックス（-moz-fit-content）が必要。