CSSコンテンツ可視性ジェネレーターとは
content-visibility: autoは、ブラウザに、画面外の要素がビューポートに近づくまでレンダリング作業をスキップするよう指示します。contain-intrinsic-sizeと組み合わせることで、ブラウザに推定サイズを提供し、スクロールバーが正しく動作するようにします。これにより、ブログアーカイブ、プロダクトグリッド、ドキュメントなど、繰り返しセクションが多い長いページのレンダリングパフォーマンスが大幅に向上します。
クイックアンサー
content-visibility: autoを使用して、画面外の要素がビューポートに近づくまでレンダリングをスキップします。これにより、繰り返しセクションが多い長いページの初期読み込みパフォーマンスを向上できます。
Last updated: 2026-06-11
制限事項
- ブラウザのサポートは異なります。Chrome 85以上、Edge 85以上、Firefox 125以上、Safari 18.2以上がcontent-visibilityをサポートしています。古いブラウザはこのプロパティを無視し、すべてのコンテンツを通常どおりレンダリングします。
- アンカーリンクがcontent-visibility: autoの要素に正しくスクロールしない場合があります。ブラウザがスクロール試行前にターゲット領域をレンダリングしていないためです。
- content-visibility: autoセクション内のコンテンツは、ブラウザが画面外のサブツリーをレンダリングしていないため、スクリーンリーダーやページ内検索ですぐに利用できません。支援技術で発見可能にする必要があるセクションでは、content-visibility: visibleを使用するか、プロパティを削除してください。
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
使い方
- 繰り返しセクションに最も適したコンテンツタイプを選択します。
- 1つのセクションの推定平均高さをピクセル単位で設定します。
- CSSをコピーして、繰り返しセクションのコンテナセレクターに適用します。
- 公開前にページのパフォーマンスとスクロールバーの動作をテストします。
主な用途
- 長いブログ記事リストのレンダリングを高速化する。
- 折りたたみセクションが多いドキュメントページのパフォーマンスを向上させる。
- 数百のアイテムがある製品一覧ページのレイアウト処理を削減する。