CSS fit-contentプロパティの便利な使い方

要素のサイズを要素内のコンテンツのサイズに依存して決めるfit-contentプロパティの便利な使い方を紹介します。

見出しのテキスト、画像の配置、コンテンツのブロック、タブなど、Webサイトやスマホアプリでよく使用されるUI要素を実装するテクニックです。

Use Cases For CSS fit-content
by Ahmad Shadeed

fit-contentプロパティの基本的な使い方は以前の記事をご覧ください。

• fit-content, min-content, max-contentの便利な使い方、CSSでコンテンツに依存してサイズを決める

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

• はじめに
• fit-contentの使用例: 見出しのテキスト
• fit-contentの使用例: figureと画像
• fit-contentの使用例: コンテンツのブロック
• fit-contentの使用例: タブ
• 終わりに

はじめに

CSSの値で使用されるfit-contentキーワードとは、要素の幅を特定の条件に基づいてその要素内のコンテンツと等しくします。

下記は、ブラウザがfit-contentをどのように扱うかを示すフローチャートです。

ブラウザがfit-contentをどのように扱うかを示すフローチャート

利用可能なコンテンツがmax-contentより大きいかどうかをチェックし、幅がmax-contentに等しいかどうかをチェックします。利用可能なスペースがmax-contentより小さい場合、幅は利用可能なスペースと等しくなります。
利用可能なスペースがmin-contentより小さい場合、幅はmin-contentと等しくなります。

fit-contentやCSSでコンテンツに依存してサイズを決めることに慣れていない場合は、下記をご覧ください。

• fit-content, min-content, max-contentの便利な使い方、CSSでコンテンツに依存してサイズを決める

fit-contentの使用例: 見出しのテキスト

見出しを中央揃えにし、要素全体にではなくコンテンツ（テキスト）だけに下線を追加したいと思ったことはありませんか？

fit-contentの使用例: 見出しのテキスト

これを実装するには、見出しのコンテンツ（テキスト）を<span>で囲み、その<span>に下線を適用することで実現できます。

fit-contentを使用すると、<span>は必要ありません。

実際の動作は、デモページをご覧ください。

• デモページ

fit-contentの使用例: figureと画像

記事の本文内で、<figure>の幅にそのコンテンツ（画像）の幅を持たせ、大きすぎる場合はその幅を超えないようにしたいと思ったことはありませんか？

fit-contentはそのような場合に最適です。

fit-contentの使用例: figureと画像

実際の動作は、デモページをご覧ください。

• デモページ

fit-contentの使用例: コンテンツのブロック

これは私のお気に入りの一つです。
記事の本文内で、特定のコンテンツブロックのサイズを全幅ではなく、中のコンテンツに揃えます。

fit-contentの使用例: コンテンツのブロック

fit-contentの使用例: タブ

これは、Google Adsで見つけた興味深い使用例です。アイデアは、タブ要素のコンテンツだけをクリックできるようになっています。

下記のように、クリックできるエリアはタブのコンテンツだけであることに注目してください。

fit-contentの使用例: タブ

終わりに

この記事があなたのお役に立てれば幸いです。
コメントや提案があれば、@shadeed9までお願いします。