diff options
author | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2022-02-02 00:24:21 +0900 |
---|---|---|
committer | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2022-02-08 23:10:37 +0900 |
commit | d18d16fa0b96a7bcb99a0f0444424bb0a39385cc (patch) | |
tree | a3116e7027b14a6014b484d86e86ba98cf62c4b7 /files/ja/web/css | |
parent | cbef2b38855ba42ade47d43838d0c56b921d3ef1 (diff) | |
download | translated-content-d18d16fa0b96a7bcb99a0f0444424bb0a39385cc.tar.gz translated-content-d18d16fa0b96a7bcb99a0f0444424bb0a39385cc.tar.bz2 translated-content-d18d16fa0b96a7bcb99a0f0444424bb0a39385cc.zip |
2021/08/13 時点の英語版に同期
Diffstat (limited to 'files/ja/web/css')
-rw-r--r-- | files/ja/web/css/css_overflow/index.md | 117 |
1 files changed, 55 insertions, 62 deletions
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 --- -<p>{{CSSRef}}</p> +{{CSSRef}} -<p><strong>CSS Overflow</strong> モジュールは、視覚メディアにおけるスクロール可能なオーバーフローの処理に関連した CSS の機能を含んでいます。 CSS では、ボックスの内容がボックスの辺の 1 つ以上を越えてはみ出した場合にオーバーフローが発生します。</p> +**CSS オーバーフロー**モジュールは、視覚メディアにおけるスクロール可能なオーバーフローの処理に関連した CSS の機能を含んでいます。 CSS では、ボックスの内容がボックスの辺の 1 つ以上を越えてはみ出した場合にオーバーフローが発生します。 -<h2 id="Ink_overflow_and_scrollable_overflow" name="Ink_overflow_and_scrollable_overflow">インクオーバーフローとスクロール可能なオーバーフロー</h2> +## インクオーバーフローとスクロール可能なオーバーフロー -<p>CSS で遭遇する可能性のあるオーバーフローには、2 つの種類があります。1つ目は<strong>インクオーバーフロー</strong>と呼んでいます。これは、ボックスシャドウ、境界画像、テキスト装飾、張り出したグリフ、アウトラインなど、レイアウトに影響を与えない、あるいはスクロール可能なオーバーフロー領域を拡張しない描画効果のオーバーフローです。</p> +CSS で遭遇する可能性のあるオーバーフローには、2 つの種類があります。 1 つ目は**インクオーバーフロー**と呼んでいます。これは、ボックスシャドウ、境界画像、テキスト装飾、張り出した文字、アウトラインなど、レイアウトに影響を与えない、あるいはスクロール可能なオーバーフロー領域を拡張しない描画効果のオーバーフローです。 -<p>CSS で時に管理しなければならないオーバーフローを<strong>スクロール可能なオーバーフロー</strong>と呼んでいます。これは、ボックスの外に現れるコンテンツで、スクロール機構を提供する必要があります。オーバーフローのプロパティは、コンテンツがボックスからオーバーフローしたときに何が起こるかを制御する方法です。</p> +CSS で時に管理しなければならないオーバーフローを**スクロール可能なオーバーフロー**と呼んでいます。これは、ボックスの外に現れるコンテンツで、スクロール機構を提供する必要があります。オーバーフローのプロパティは、コンテンツがボックスからオーバーフローしたときに何が起こるかを制御する方法です。 -<h2 id="Basic_example" name="Basic_example">基本的な例</h2> +## 基本的な例 -<p>次のインタラクティブなデモでは、 <code>overflow</code> プロパティの値を変更すると、高さが固定されているボックスのオーバーフローの処理方法がどのように変わるかを示しています。</p> +次のインタラクティブなデモでは、 `overflow` プロパティの値を変更すると、高さが固定されているボックスのオーバーフローの処理方法がどのように変わるかを示しています。 -<div>{{EmbedInteractiveExample("pages/css/overflow.html")}}</div> +{{EmbedInteractiveExample("pages/css/overflow.html")}} -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> +## リファレンス -<h2 id="Reference" name="Reference">リファレンス</h2> +### CSS プロパティ -<h3 id="CSS_properties" name="CSS_properties">CSS プロパティ</h3> +- {{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}} -<div class="index"> -<ul> - <li>{{CSSxRef("overflow")}}</li> - <li>{{CSSxRef("overflow-block")}}</li> - <li>{{CSSxRef("overflow-inline")}}</li> - <li>{{CSSxRef("overflow-x")}}</li> - <li>{{CSSxRef("overflow-y")}}</li> - <li>{{CSSxRef("text-overflow")}}</li> - <li>{{CSSxRef("block-overflow")}} {{experimental_inline}}</li> - <li>{{CSSxRef("line-clamp")}} {{experimental_inline}}</li> - <li>{{CSSxRef("max-lines")}} {{experimental_inline}}</li> - <li>{{CSSxRef("continue")}} {{experimental_inline}}</li> -</ul> -</div> +### 標準外のプロパティ -<h3 id="Non-standard_properties" name="Non-standard_properties">標準外のプロパティ</h3> +- {{CSSxRef("-webkit-line-clamp")}} {{non-standard_inline}} -<div class="index"> -<ul> - <li>{{CSSxRef("-webkit-line-clamp")}} {{non-standard_inline}}</li> -</ul> -</div> - -<h2 id="Specifications" name="Specifications">仕様書</h2> +## 仕様書 <table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Overflow', '#propdef-overflow', 'overflow')}}</td> - <td>{{Spec2('CSS3 Overflow')}}</td> - <td> - <p>構文を1つだけでなく1つまたは2つのキーワードに変更した</p> - </td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'visufx.html#overflow', 'overflow')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>初回定義</td> - </tr> - </tbody> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td> + {{SpecName('CSS3 Overflow', '#propdef-overflow', 'overflow')}} + </td> + <td>{{Spec2('CSS3 Overflow')}}</td> + <td> + <p>構文を 1 つだけでなく 1 つまたは 2 つのキーワードに変更した</p> + </td> + </tr> + <tr> + <td> + {{SpecName('CSS2.1', 'visufx.html#overflow', 'overflow')}} + </td> + <td>{{Spec2('CSS2.1')}}</td> + <td>初回定義</td> + </tr> + </tbody> </table> -<h2 id="See_also" name="See_also">関連情報</h2> +## 関連情報 -<ul> - <li>スクロールバーの外見を制御する {{CSSxRef("scrollbar-width")}} および {{CSSxRef("scrollbar-color")}} プロパティ</li> -</ul> +- スクロールバーの外見を制御する {{CSSxRef("scrollbar-width")}} および {{CSSxRef("scrollbar-color")}} プロパティ +- [スクロール可能なオーバーフローのデバッグ](/ja/docs/Tools/Page_Inspector/How_to/Debug_Scrollable_Overflow)の方法 |