From d18d16fa0b96a7bcb99a0f0444424bb0a39385cc Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 2 Feb 2022 00:24:21 +0900 Subject: 2021/08/13 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/css_overflow/index.md | 117 ++++++++++++++++----------------- 1 file changed, 55 insertions(+), 62 deletions(-) (limited to 'files') diff --git a/files/ja/web/css/css_overflow/index.md b/files/ja/web/css/css_overflow/index.md index b34d3a40a6..af2c366dc7 100644 --- a/files/ja/web/css/css_overflow/index.md +++ b/files/ja/web/css/css_overflow/index.md @@ -1,87 +1,80 @@ --- -title: CSS Overflow +title: CSS オーバーフロー slug: Web/CSS/CSS_Overflow tags: - CSS - - Guide + - ガイド - overflow - - scrollbars - - scrolling + - スクロールバー + - スクロール translation_of: Web/CSS/CSS_Overflow --- -

{{CSSRef}}

+{{CSSRef}} -

CSS Overflow モジュールは、視覚メディアにおけるスクロール可能なオーバーフローの処理に関連した CSS の機能を含んでいます。 CSS では、ボックスの内容がボックスの辺の 1 つ以上を越えてはみ出した場合にオーバーフローが発生します。

+**CSS オーバーフロー**モジュールは、視覚メディアにおけるスクロール可能なオーバーフローの処理に関連した CSS の機能を含んでいます。 CSS では、ボックスの内容がボックスの辺の 1 つ以上を越えてはみ出した場合にオーバーフローが発生します。 -

インクオーバーフローとスクロール可能なオーバーフロー

+## インクオーバーフローとスクロール可能なオーバーフロー -

CSS で遭遇する可能性のあるオーバーフローには、2 つの種類があります。1つ目はインクオーバーフローと呼んでいます。これは、ボックスシャドウ、境界画像、テキスト装飾、張り出したグリフ、アウトラインなど、レイアウトに影響を与えない、あるいはスクロール可能なオーバーフロー領域を拡張しない描画効果のオーバーフローです。

+CSS で遭遇する可能性のあるオーバーフローには、2 つの種類があります。 1 つ目は**インクオーバーフロー**と呼んでいます。これは、ボックスシャドウ、境界画像、テキスト装飾、張り出した文字、アウトラインなど、レイアウトに影響を与えない、あるいはスクロール可能なオーバーフロー領域を拡張しない描画効果のオーバーフローです。 -

CSS で時に管理しなければならないオーバーフローをスクロール可能なオーバーフローと呼んでいます。これは、ボックスの外に現れるコンテンツで、スクロール機構を提供する必要があります。オーバーフローのプロパティは、コンテンツがボックスからオーバーフローしたときに何が起こるかを制御する方法です。

+CSS で時に管理しなければならないオーバーフローを**スクロール可能なオーバーフロー**と呼んでいます。これは、ボックスの外に現れるコンテンツで、スクロール機構を提供する必要があります。オーバーフローのプロパティは、コンテンツがボックスからオーバーフローしたときに何が起こるかを制御する方法です。 -

基本的な例

+## 基本的な例 -

次のインタラクティブなデモでは、 overflow プロパティの値を変更すると、高さが固定されているボックスのオーバーフローの処理方法がどのように変わるかを示しています。

+次のインタラクティブなデモでは、 `overflow` プロパティの値を変更すると、高さが固定されているボックスのオーバーフローの処理方法がどのように変わるかを示しています。 -
{{EmbedInteractiveExample("pages/css/overflow.html")}}
+{{EmbedInteractiveExample("pages/css/overflow.html")}} - +## リファレンス -

リファレンス

+### CSS プロパティ -

CSS プロパティ

+- {{CSSxRef("overflow")}} +- {{CSSxRef("overflow-block")}} +- {{CSSxRef("overflow-inline")}} +- {{CSSxRef("overflow-x")}} +- {{CSSxRef("overflow-y")}} +- {{CSSxRef("text-overflow")}} +- {{CSSxRef("block-overflow")}} {{experimental_inline}} +- {{CSSxRef("line-clamp")}} {{experimental_inline}} +- {{CSSxRef("max-lines")}} {{experimental_inline}} +- {{CSSxRef("continue")}} {{experimental_inline}} -
- -
+### 標準外のプロパティ -

標準外のプロパティ

+- {{CSSxRef("-webkit-line-clamp")}} {{non-standard_inline}} -
- -
- -

仕様書

+## 仕様書 - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Overflow', '#propdef-overflow', 'overflow')}}{{Spec2('CSS3 Overflow')}} -

構文を1つだけでなく1つまたは2つのキーワードに変更した

-
{{SpecName('CSS2.1', 'visufx.html#overflow', 'overflow')}}{{Spec2('CSS2.1')}}初回定義
仕様書状態備考
+ {{SpecName('CSS3 Overflow', '#propdef-overflow', 'overflow')}} + {{Spec2('CSS3 Overflow')}} +

構文を 1 つだけでなく 1 つまたは 2 つのキーワードに変更した

+
+ {{SpecName('CSS2.1', 'visufx.html#overflow', 'overflow')}} + {{Spec2('CSS2.1')}}初回定義
-

関連情報

+## 関連情報 - +- スクロールバーの外見を制御する {{CSSxRef("scrollbar-width")}} および {{CSSxRef("scrollbar-color")}} プロパティ +- [スクロール可能なオーバーフローのデバッグ](/ja/docs/Tools/Page_Inspector/How_to/Debug_Scrollable_Overflow)の方法 -- cgit v1.2.3-54-g00ecf