Limited support 注意が必要。一部のブラウザのみ対応。プロダクション利用は慎重に判断すること。

fit-content()

fit-content() は CSS の関数で、指定された寸法を min(最大サイズ, max(最小サイズ, 引数)) の式に従って有効な範囲の寸法に収めます。

コンテンツフィットサイズ関数

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.properties.width.fit-content_function
実験的
91
CSS プロパティ
fit-content function
実験的

`fit-content()`
91
fit-content function
実験的

`fit-content()`
91
fit-content function
実験的

`fit-content()`
91
fit-content function
実験的

`fit-content()`
91
fit-content function
実験的

`fit-content()`
91
fit-content function
実験的

`fit-content()`
91
fit-content function
実験的

`fit-content()`
91
fit-content function
実験的

`fit-content()`
91
fit-content function
実験的

`fit-content()`
91
fit-content function
実験的

`fit-content()`
91
fit-content function
実験的

`fit-content()`
91
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 1件
実験的機能
  • ブラウザの実験的フラグを有効にする必要があります
注釈 1件
実験的機能
  • ブラウザの実験的フラグを有効にする必要があります
注釈 1件
実験的機能
  • ブラウザの実験的フラグを有効にする必要があります
注釈 1件
実験的機能
  • ブラウザの実験的フラグを有効にする必要があります
注釈 1件
実験的機能
  • ブラウザの実験的フラグを有効にする必要があります
注釈 1件
実験的機能
  • ブラウザの実験的フラグを有効にする必要があります
注釈 1件
実験的機能
  • ブラウザの実験的フラグを有効にする必要があります
注釈 1件
実験的機能
  • ブラウザの実験的フラグを有効にする必要があります
注釈 1件
実験的機能
  • ブラウザの実験的フラグを有効にする必要があります
注釈 1件
実験的機能
  • ブラウザの実験的フラグを有効にする必要があります
注釈 1件
実験的機能
  • ブラウザの実験的フラグを有効にする必要があります
注釈 1件
実験的機能
  • ブラウザの実験的フラグを有効にする必要があります

基本構文

CSS 
.tag {
  width: fit-content(200px);
  padding: 0.25em 0.5em;
  background: #e5e7eb;
  border-radius: 4px;
}

ライブデモ

fit-content(200px)

CSS Fit-content(200px) demo.

プレビュー全画面表示

fit-content(120px)

CSS Fit-content(120px) demo.

プレビュー全画面表示

Normal. fit-content

CSS Normal. Fit-content demo.

プレビュー全画面表示

実務での使いどころ

  • 可変幅タグの最大幅制限

    タグやバッジのコンテンツに応じて幅を自動調整しつつ、最大幅を制限して長いテキストの溢れを防ぎます。

注意点

  • グリッドレイアウト以外でのfit-content()関数はブラウザサポートが限定的です。fit-contentキーワードとmax-widthの併用を検討してください。

アクセシビリティ

  • コンテンツがクランプされた場合にテキストが切り詰められないことを確認し、全コンテンツがアクセス可能であることを保証してください。

参考リンク