CSS fit-contentプロパティの便利な使い方
Post on:2022年2月22日
要素のサイズを要素内のコンテンツのサイズに依存して決めるfit-content
プロパティの便利な使い方を紹介します。
見出しのテキスト、画像の配置、コンテンツのブロック、タブなど、Webサイトやスマホアプリでよく使用されるUI要素を実装するテクニックです。
Use Cases For CSS fit-content
by Ahmad Shadeed
fit-content
プロパティの基本的な使い方は以前の記事をご覧ください。
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。
- はじめに
- 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の使用例: 見出しのテキスト
見出しを中央揃えにし、要素全体にではなくコンテンツ(テキスト)だけに下線を追加したいと思ったことはありませんか?
fit-contentの使用例: 見出しのテキスト
これを実装するには、見出しのコンテンツ(テキスト)を<span>
で囲み、その<span>
に下線を適用することで実現できます。
1 |
<h1><span>Headline content</span></h1> |
1 2 3 |
h1 span { box-shadow: inset 0 -6px 0 0 lightgrey; } |
fit-content
を使用すると、<span>
は必要ありません。
1 |
<h1>Headline content</h1> |
1 2 3 4 5 6 |
h1 { width: fit-content; margin-left: auto; margin-right: auto; box-shadow: inset 0 -6px 0 0 lightgrey; } |
実際の動作は、デモページをご覧ください。
fit-contentの使用例: figureと画像
記事の本文内で、<figure>
の幅にそのコンテンツ(画像)の幅を持たせ、大きすぎる場合はその幅を超えないようにしたいと思ったことはありませんか?
fit-content
はそのような場合に最適です。
fit-contentの使用例: figureと画像
1 2 3 4 5 6 7 |
figure { width: fit-content; margin: 0 auto; background: #fff; padding: 1rem; border-radius: 10px; } |
実際の動作は、デモページをご覧ください。
fit-contentの使用例: コンテンツのブロック
これは私のお気に入りの一つです。
記事の本文内で、特定のコンテンツブロックのサイズを全幅ではなく、中のコンテンツに揃えます。
fit-contentの使用例: コンテンツのブロック
1 2 3 |
.article-body .related-widget { width: fit-content; } |
fit-contentの使用例: タブ
これは、Google Adsで見つけた興味深い使用例です。アイデアは、タブ要素のコンテンツだけをクリックできるようになっています。
下記のように、クリックできるエリアはタブのコンテンツだけであることに注目してください。
fit-contentの使用例: タブ
1 2 3 4 |
.tab-item { flex-grow: 1; width: fit-content; } |
終わりに
この記事があなたのお役に立てれば幸いです。
コメントや提案があれば、@shadeed9までお願いします。
sponsors