From 47961b3ba6050b40092d5833546da5a3a76bba9e Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 16 Dec 2021 23:11:26 +0900 Subject: 2021/08/13 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/content-visibility/index.md | 131 +++++++++++++-------------- 1 file changed, 64 insertions(+), 67 deletions(-) (limited to 'files/ja/web/css/content-visibility') diff --git a/files/ja/web/css/content-visibility/index.md b/files/ja/web/css/content-visibility/index.md index ac51db4435..a976173a85 100644 --- a/files/ja/web/css/content-visibility/index.md +++ b/files/ja/web/css/content-visibility/index.md @@ -1,111 +1,108 @@ --- title: content-visibility slug: Web/CSS/content-visibility +tags: + - CSS + - CSS 封じ込め + - CSS プロパティ + - レイアウト + - Paint + - リファレンス + - Style + - Visibility + - ウェブ +browser-compat: css.properties.content-visibility translation_of: Web/CSS/content-visibility --- -

{{CSSRef}}

+{{CSSRef}} -

content-visibility CSSプロパティは、要素がそのコンテンツをレンダリングするかどうかを制御するとともに、強力な包含セットを強制することで、ユーザーエージェントが必要になるまで大量のレイアウトとレンダリング作業を省略できるようにします。基本的に、ユーザーエージェントは、レイアウトやペイントなどの要素のレンダリング作業を必要になるまでスキップできるため、最初のページの読み込みがはるかに高速になります。

+**`content-visibility`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素がその内容物をレンダリングするかどうかを制御するとともに、強力な封じ込めのセットを強制することで、必要になるまでユーザーエージェントが大量のレイアウトとレンダリングの作業を省略できるようにします。基本的に、ユーザーエージェントは、レイアウトやペイントなどの要素のレンダリング作業を必要になるまでスキップできるため、最初のページの読み込みがはるかに高速になります。 -

文法

+## 構文 -
/* Keyword values */
+```css
+/* キーワード値 */
 content-visibility: visible;
 content-visibility: hidden;
 content-visibility: auto;
 
-/* Global values */
+/* グローバル値 */
+content-visibility: inherit;
 content-visibility: initial;
+content-visibility: revert;
 content-visibility: unset;
-
+``` -

値

+### 値 -
-
visible
-
-

無効。要素のコンテンツは通常どおりにレイアウトおよびレンダリングされます。

-
-
hidden
-
-

要素はその内容をスキップします。スキップされたコンテンツは、ページ内検索、タブオーダーナビゲーションなどのユーザーエージェント機能にアクセスできたり、選択またはフォーカス可能であってはなりません。これは、display: noneをコンテンツに与えるのと似ています。

-
-
auto
-
-

この要素は、レイアウトの封じ込め、スタイルの封じ込め、およびペイントの封じ込めをオンにします。要素がユーザーに関連していない場合は、その内容もスキップします。非表示とは異なり、スキップされたコンテンツは、ページ内検索、タブオーダーナビゲーションなどのユーザーエージェント機能に対して通常どおり利用可能である必要があり、通常どおりフォーカス可能で選択可能である必要があります。

-
-
+- `visible` + - : 効果なし。要素の内容物は通常通りにレイアウトおよび描画されます。 +- `hidden` + - : 要素はその内容物を読み飛ばします。読み飛ばされた内容物は、ページ内検索やタブ順序ナビゲーションなどのユーザーエージェント機能でアクセス可能になることはなく、また選択可能やフォーカス可能にもなりません。これは、内容物に `display: none` を設定することに似ています。 +- `auto` + - : この要素の、レイアウトの封じ込め、スタイルの封じ込め、描画の封じ込めをオンにします。要素がユーザーに関連していない場合、その内容の読み飛ばしも行われます。 hidden の場合とは異なり、読み飛ばされたコンテンツは、ページ内検索やタブ順序ナビゲーションなどのユーザーエージェント機能で通常通り利用可能となり、通常通りフォーカスや選択が可能になります。 -

例

+## 公式定義 -

autoを使用して長いページのレンダリングコストを削減

+{{cssinfo}} -

次の例は、autoを使用して画面外のセクションのペイントとレンダリングをスキップする方法を示しています。ビューポート外のコンテンツはレンダリングされないため、これはページの読み込みと操作の両方に役立ちます。

+## アクセシビリティの考慮 -
<style>
+見出しやその他のコンテンツが画面外にあるとみなされた場合、 `content-visibility` によって抑制されます。これは、画面リーダーの利用者が、ページのアウトラインを完全に読み上げるという利点を失う可能性があることを意味します。
+
+詳しくは [Content-visibility and Accessible Semantics](https://marcysutton.com/content-visibility-accessible-semantics) をご覧ください。
+
+## 例
+
+### auto を使用して長いページのレンダリングコストを削減
+
+次の例は、 auto を使用して画面外のセクションのペイントとレンダリングを飛ばす方法を示しています。ビューポート外の内容物はレンダリングされないため、これはページの読み込みと操作の両方に役立ちます。

+
+```html
+