From 3d9261a2d289b53f7d437439e7e74f5a9350bbb2 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 2 Feb 2022 01:11:31 +0900 Subject: CSS Overflow のプロパティの記事を更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/-webkit-line-clamp/index.html | 110 ---------------- files/ja/web/css/-webkit-line-clamp/index.md | 110 ++++++++++++++++ files/ja/web/css/overflow-x/index.html | 139 --------------------- files/ja/web/css/overflow-x/index.md | 139 +++++++++++++++++++++ files/ja/web/css/overflow-y/index.html | 144 --------------------- files/ja/web/css/overflow-y/index.md | 144 +++++++++++++++++++++ files/ja/web/css/overflow/index.html | 166 ------------------------- files/ja/web/css/overflow/index.md | 166 +++++++++++++++++++++++++ 8 files changed, 559 insertions(+), 559 deletions(-) delete mode 100644 files/ja/web/css/-webkit-line-clamp/index.html create mode 100644 files/ja/web/css/-webkit-line-clamp/index.md delete mode 100644 files/ja/web/css/overflow-x/index.html create mode 100644 files/ja/web/css/overflow-x/index.md delete mode 100644 files/ja/web/css/overflow-y/index.html create mode 100644 files/ja/web/css/overflow-y/index.md delete mode 100644 files/ja/web/css/overflow/index.html create mode 100644 files/ja/web/css/overflow/index.md diff --git a/files/ja/web/css/-webkit-line-clamp/index.html b/files/ja/web/css/-webkit-line-clamp/index.html deleted file mode 100644 index fee9ec1687..0000000000 --- a/files/ja/web/css/-webkit-line-clamp/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: '-webkit-line-clamp' -slug: Web/CSS/-webkit-line-clamp -tags: - - '-webkit-line-clamp' - - CSS - - CSS Property - - Non-standard - - recipe:css-property -browser-compat: css.properties.-webkit-line-clamp -translation_of: Web/CSS/-webkit-line-clamp ---- -
{{CSSRef}}
- -

-webkit-line-clamp は CSS のプロパティで、{{Glossary("block container", "ブロックコンテナー")}}のコンテンツを指定した行数に制限することができます。

- -

{{cssxref("display")}} プロパティに -webkit-box もしくは -webkit-inline-box が設定されており、かつ {{cssxref("box-orient")}} プロパティに vertical が設定されている組み合わせのときのみ使用できます。

- -

ほとんどの場合、 {{cssxref("overflow")}} に hidden を設定できます。そうしなければコンテンツはクリップされませんが、省略記号は指定した行数の後に表示されます。

- -

アンカー要素に適用したとき、切り捨てがテキストの途中で行われる場合があるかもしれませんが、必ずしも末尾で切り捨てが行われるとは限りません。

- -
-

メモ: このプロパティは元々 WebKit ブラウザでは実装されていますが、いくつかの問題があります。レガシーサポートのために標準化されました。 CSS Overflow Module Level 3 の仕様では、このプロパティを置き換えて問題を回避することを目的として {{cssxref("line-clamp")}} プロパティが定義されています。

-
- -

構文

- -
/* キーワード値 */
--webkit-line-clamp: none;
-
-/* <integer> 値 */
--webkit-line-clamp: 3;
--webkit-line-clamp: 10;
-
-/* グローバル値 */
--webkit-line-clamp: inherit;
--webkit-line-clamp: initial;
--webkit-line-clamp: unset;
-
- -
-
none
-
コンテンツの行数を制限しません。
-
{{cssxref("integer")}}
-
コンテンツを制限する行数を指定します。 0 より大きい値でなければなりません。
-
- -

公式定義

- -

{{CSSInfo}}

- -

形式文法

- -{{CSSSyntax}} - -

例

- -

段落の切り捨て

- -

HTML

- -
<p>
-  In this example the <code>-webkit-line-clamp</code> property is set to <code>3</code>, which means the text is clamped after three lines.
-  An ellipsis will be shown at the point where the text is clamped.
-</p>
- -

CSS

- -
p {
-  width: 300px;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 3;
-  overflow: hidden;
-}
- -

結果

- -

{{EmbedLiveSample("Truncating_a_paragraph", "100%", "100")}}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS3 Overflow", "#propdef--webkit-line-clamp", "-webkit-line-clamp")}}{{Spec2("CSS3 Overflow")}}初回定義
- -

ブラウザーの互換性

- -

{{Compat}}

- -

関連情報

- - diff --git a/files/ja/web/css/-webkit-line-clamp/index.md b/files/ja/web/css/-webkit-line-clamp/index.md new file mode 100644 index 0000000000..fee9ec1687 --- /dev/null +++ b/files/ja/web/css/-webkit-line-clamp/index.md @@ -0,0 +1,110 @@ +--- +title: '-webkit-line-clamp' +slug: Web/CSS/-webkit-line-clamp +tags: + - '-webkit-line-clamp' + - CSS + - CSS Property + - Non-standard + - recipe:css-property +browser-compat: css.properties.-webkit-line-clamp +translation_of: Web/CSS/-webkit-line-clamp +--- +
{{CSSRef}}
+ +

-webkit-line-clamp は CSS のプロパティで、{{Glossary("block container", "ブロックコンテナー")}}のコンテンツを指定した行数に制限することができます。

+ +

{{cssxref("display")}} プロパティに -webkit-box もしくは -webkit-inline-box が設定されており、かつ {{cssxref("box-orient")}} プロパティに vertical が設定されている組み合わせのときのみ使用できます。

+ +

ほとんどの場合、 {{cssxref("overflow")}} に hidden を設定できます。そうしなければコンテンツはクリップされませんが、省略記号は指定した行数の後に表示されます。

+ +

アンカー要素に適用したとき、切り捨てがテキストの途中で行われる場合があるかもしれませんが、必ずしも末尾で切り捨てが行われるとは限りません。

+ +
+

メモ: このプロパティは元々 WebKit ブラウザでは実装されていますが、いくつかの問題があります。レガシーサポートのために標準化されました。 CSS Overflow Module Level 3 の仕様では、このプロパティを置き換えて問題を回避することを目的として {{cssxref("line-clamp")}} プロパティが定義されています。

+
+ +

構文

+ +
/* キーワード値 */
+-webkit-line-clamp: none;
+
+/* <integer> 値 */
+-webkit-line-clamp: 3;
+-webkit-line-clamp: 10;
+
+/* グローバル値 */
+-webkit-line-clamp: inherit;
+-webkit-line-clamp: initial;
+-webkit-line-clamp: unset;
+
+ +
+
none
+
コンテンツの行数を制限しません。
+
{{cssxref("integer")}}
+
コンテンツを制限する行数を指定します。 0 より大きい値でなければなりません。
+
+ +

公式定義

+ +

{{CSSInfo}}

+ +

形式文法

+ +{{CSSSyntax}} + +

例

+ +

段落の切り捨て

+ +

HTML

+ +
<p>
+  In this example the <code>-webkit-line-clamp</code> property is set to <code>3</code>, which means the text is clamped after three lines.
+  An ellipsis will be shown at the point where the text is clamped.
+</p>
+ +

CSS

+ +
p {
+  width: 300px;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  overflow: hidden;
+}
+ +

結果

+ +

{{EmbedLiveSample("Truncating_a_paragraph", "100%", "100")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS3 Overflow", "#propdef--webkit-line-clamp", "-webkit-line-clamp")}}{{Spec2("CSS3 Overflow")}}初回定義
+ +

ブラウザーの互換性

+ +

{{Compat}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/overflow-x/index.html b/files/ja/web/css/overflow-x/index.html deleted file mode 100644 index 29e7d447c8..0000000000 --- a/files/ja/web/css/overflow-x/index.html +++ /dev/null @@ -1,139 +0,0 @@ ---- -title: overflow-x -slug: Web/CSS/overflow-x -tags: - - CSS - - CSS Box Model - - CSS Property - - CSS プロパティ - - CSS ボックスモデル - - Reference - - overflow - - 'recipe:css-property' -translation_of: Web/CSS/overflow-x ---- -
{{CSSRef}}
- -

overflow-x は CSS のプロパティで、ブロックレベル要素の内容が左右の境界からあふれた場合、どのように表示するのかを設定します。表示しないか、スクロールバーを表示するか、あふれさせるかを設定できます。

- -
{{EmbedInteractiveExample("pages/css/overflow-x.html")}}
- - - -

構文

- -
/* キーワード値 */
-overflow-x: visible;
-overflow-x: hidden;
-overflow-x: clip;
-overflow-x: scroll;
-overflow-x: auto;
-
-/* グローバル値 */
-overflow-x: inherit;
-overflow-x: initial;
-overflow-x: unset;
-
- -

overflow-x プロパティは、以下の値の一覧のうち一つのキーワードで指定します。

- -

値

- -
-
visible
-
内容は切り取られず、パディングボックスの左右の辺よりも外側に表示される可能性があります。 {{cssxref("overflow-y")}} が hidden, scroll, auto のいずれかであり、このプロパティが visible である場合は、暗黙に auto に計算します。
-
hidden
-
水平方向にパディングボックスに合わせる必要がある場合は、内容を切り取ります。スクロールバーは表示されません。
-
clip {{experimental_inline}}
-
hidden のように、内容が要素のパディングボックスで切り取られます。 clip と hidden の違いは、 clip キーワードはプログラムによるスクロールも含め、すべてのスクロールを禁止することです。ボックスはスクロールコンテナーにならず、新しい整形コンテキストを開始しません。新しい整形コンテキストを始めるのであれば、 {{cssxref("display", "display: flow-root", "#flow-root")}} を使用して実現することができます。
-
scroll
-
水平方向にパディングボックスに合わせる必要がある場合は、内容を切り取ります。ブラウザーは内容が実際に切り取られるかどうかにかかわらず、スクロールバーを表示します。 (これは内容が変化したときにスクロールバーが表示されたり非表示になったりすることを防ぎます。) プリンターははみ出す内容を印刷するかもしれません。
-
auto
-
ユーザーエージェントに依存します。内容がパディングボックス内に収まる場合は visible と同じように表示されますが、新しいブロック整形文脈を生成します。内容があふれる場合、デスクトップブラウザーはスクロールバーを表示します。
-
- -

形式文法

- -{{csssyntax}} - -

例

- -

HTML

- -
<ul>
-  <li><code>overflow-x:hidden</code> — ボックスの外側のテキストを隠す
-    <div id="div1">
-      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
-    </div>
-  </li>
-
-  <li><code>overflow-x:scroll</code> — 常にスクロールバーを表示
-    <div id="div2">
-      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
-    </div>
-  </li>
-
-  <li><code>overflow-x:visible</code> — 必要に応じてテキストをボックスの外に表示
-    <div id="div3">
-      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
-    </div>
-  </li>
-
-  <li><code>overflow-x:auto</code> — 多くのブラウザーでは <code>scroll</code> と同じ
-    <div id="div4">
-      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
-    </div>
-  </li>
-</ul>
-
- -

CSS

- -
#div1, #div2, #div3, #div4 {
-  border: 1px solid black;
-  width:  250px;
-  margin-bottom: 12px;
-}
-
-#div1 { overflow-x: hidden;}
-#div2 { overflow-x: scroll;}
-#div3 { overflow-x: visible;}
-#div4 { overflow-x: auto;}
-
- -

結果

- -
-

{{EmbedLiveSample("Examples", "100%", "270")}}

-
- -

仕様書

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

{{cssinfo}}

- -

ブラウザーの互換性

- -

{{Compat("css.properties.overflow-x")}}

- -

関連情報

- - diff --git a/files/ja/web/css/overflow-x/index.md b/files/ja/web/css/overflow-x/index.md new file mode 100644 index 0000000000..29e7d447c8 --- /dev/null +++ b/files/ja/web/css/overflow-x/index.md @@ -0,0 +1,139 @@ +--- +title: overflow-x +slug: Web/CSS/overflow-x +tags: + - CSS + - CSS Box Model + - CSS Property + - CSS プロパティ + - CSS ボックスモデル + - Reference + - overflow + - 'recipe:css-property' +translation_of: Web/CSS/overflow-x +--- +
{{CSSRef}}
+ +

overflow-x は CSS のプロパティで、ブロックレベル要素の内容が左右の境界からあふれた場合、どのように表示するのかを設定します。表示しないか、スクロールバーを表示するか、あふれさせるかを設定できます。

+ +
{{EmbedInteractiveExample("pages/css/overflow-x.html")}}
+ + + +

構文

+ +
/* キーワード値 */
+overflow-x: visible;
+overflow-x: hidden;
+overflow-x: clip;
+overflow-x: scroll;
+overflow-x: auto;
+
+/* グローバル値 */
+overflow-x: inherit;
+overflow-x: initial;
+overflow-x: unset;
+
+ +

overflow-x プロパティは、以下の値の一覧のうち一つのキーワードで指定します。

+ +

値

+ +
+
visible
+
内容は切り取られず、パディングボックスの左右の辺よりも外側に表示される可能性があります。 {{cssxref("overflow-y")}} が hidden, scroll, auto のいずれかであり、このプロパティが visible である場合は、暗黙に auto に計算します。
+
hidden
+
水平方向にパディングボックスに合わせる必要がある場合は、内容を切り取ります。スクロールバーは表示されません。
+
clip {{experimental_inline}}
+
hidden のように、内容が要素のパディングボックスで切り取られます。 clip と hidden の違いは、 clip キーワードはプログラムによるスクロールも含め、すべてのスクロールを禁止することです。ボックスはスクロールコンテナーにならず、新しい整形コンテキストを開始しません。新しい整形コンテキストを始めるのであれば、 {{cssxref("display", "display: flow-root", "#flow-root")}} を使用して実現することができます。
+
scroll
+
水平方向にパディングボックスに合わせる必要がある場合は、内容を切り取ります。ブラウザーは内容が実際に切り取られるかどうかにかかわらず、スクロールバーを表示します。 (これは内容が変化したときにスクロールバーが表示されたり非表示になったりすることを防ぎます。) プリンターははみ出す内容を印刷するかもしれません。
+
auto
+
ユーザーエージェントに依存します。内容がパディングボックス内に収まる場合は visible と同じように表示されますが、新しいブロック整形文脈を生成します。内容があふれる場合、デスクトップブラウザーはスクロールバーを表示します。
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

HTML

+ +
<ul>
+  <li><code>overflow-x:hidden</code> — ボックスの外側のテキストを隠す
+    <div id="div1">
+      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
+    </div>
+  </li>
+
+  <li><code>overflow-x:scroll</code> — 常にスクロールバーを表示
+    <div id="div2">
+      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
+    </div>
+  </li>
+
+  <li><code>overflow-x:visible</code> — 必要に応じてテキストをボックスの外に表示
+    <div id="div3">
+      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
+    </div>
+  </li>
+
+  <li><code>overflow-x:auto</code> — 多くのブラウザーでは <code>scroll</code> と同じ
+    <div id="div4">
+      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
+    </div>
+  </li>
+</ul>
+
+ +

CSS

+ +
#div1, #div2, #div3, #div4 {
+  border: 1px solid black;
+  width:  250px;
+  margin-bottom: 12px;
+}
+
+#div1 { overflow-x: hidden;}
+#div2 { overflow-x: scroll;}
+#div3 { overflow-x: visible;}
+#div4 { overflow-x: auto;}
+
+ +

結果

+ +
+

{{EmbedLiveSample("Examples", "100%", "270")}}

+
+ +

仕様書

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

{{cssinfo}}

+ +

ブラウザーの互換性

+ +

{{Compat("css.properties.overflow-x")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/overflow-y/index.html b/files/ja/web/css/overflow-y/index.html deleted file mode 100644 index 0f6b49cdae..0000000000 --- a/files/ja/web/css/overflow-y/index.html +++ /dev/null @@ -1,144 +0,0 @@ ---- -title: overflow-y -slug: Web/CSS/overflow-y -tags: - - CSS - - CSS Property - - CSS プロパティ - - CSS ボックスモデル - - Reference - - overflow - - 'recipe:css-property' -translation_of: Web/CSS/overflow-y ---- -
{{CSSRef}}
- -

overflow-y は CSS のプロパティで、ブロックレベル要素の内容が上下の境界からあふれた場合、どのように表示するのかを設定します。表示しないか、スクロールバーを表示するか、あふれさせるかを設定できます。

- -
{{EmbedInteractiveExample("pages/css/overflow-y.html")}}
- - - -

構文

- -
/* キーワード値 */
-overflow-y: visible;
-overflow-y: hidden;
-overflow-y: clip;
-overflow-y: scroll;
-overflow-y: auto;
-
-/* グローバル値 */
-overflow-y: inherit;
-overflow-y: initial;
-overflow-y: unset;
-
- -

overflow-y プロパティは、以下の値の一覧のうち一つのキーワードで指定します。

- -

{{cssxref("overflow-x")}} が hidden, scroll, auto であり、このプロパティが visible (既定値) である場合は、暗黙的に auto と計算されます。

- -

値

- -
-
visible
-
内容は切り取られず、パディングボックスの上下の辺よりも外側に表示される可能性があります。
-
hidden
-
垂直方向にパディングボックスに合わせる必要がある場合は、内容を切り取ります。スクロールバーは表示されません。
-
clip {{experimental_inline}}
-
hidden と同様に、コンテンツは要素のパディングボックスに合わせて切り取られます。 clip と hidden の違いは、 clip キーワードがプログラム的なスクロールも含め、すべてのスクロールを禁止することです。ボックスはスクロールコンテナーにはならず、新しい整形コンテキストを始めることもありません。新しい整形コンテキストを始めたいのであれば、 {{cssxref("display", "display: flow-root", "#flow-root")}} を使用して実現することができます。
-
scroll
-
垂直方向にパディングボックスに合わせる必要がある場合は、内容を切り取ります。ブラウザーは内容が実際に切り取られるかどうかにかかわらず、スクロールバーを表示します。 (これは内容が変化したときにスクロールバーが表示されたり非表示になったりすることを防ぎます。) プリンターははみ出す内容を印刷するかもしれません。
-
auto
-
ユーザーエージェントに依存します。内容がパディングボックス内に収まる場合は visible と同じように表示されますが、新しいブロック整形コンテキストを生成します。内容があふれる場合、デスクトップブラウザーはスクロールバーを表示します。
-
- -

形式文法

- -{{csssyntax}} - -

例

- -

HTML

- -
<ul>
-  <li><code>overflow-y:hidden</code> — ボックスの外側のテキストを隠す
-  <div id="div1">
-    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-    </div>
-  </li>
-
-  <li><code>overflow-y:scroll</code> — 常にスクロールバーを表示
-  <div id="div2">
-    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-    </div>
-  </li>
-
-  <li><code>overflow-y:visible</code> — 必要に応じてテキストをボックスの外に表示
-  <div id="div3">
-    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-    </div>
-  </li>
-
-  <li><code>overflow-y:auto</code> — 多くのブラウザーでは <code>scroll</code> と同じ
-  <div id="div4">
-    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-    </div>
-  </li>
-</ul>
-
-
- -

CSS

- -
#div1,
-#div2,
-#div3,
-#div4 {
-  border: 1px solid black;
-  width:  250px;
-  height: 100px;
-}
-
-#div1 { overflow-y: hidden; margin-bottom: 12px;}
-#div2 { overflow-y: scroll; margin-bottom: 12px;}
-#div3 { overflow-y: visible; margin-bottom: 120px;}
-#div4 { overflow-y: auto; margin-bottom: 120px;}
-
- -

結果

- -
-

{{EmbedLiveSample("Example", "100%", "780")}}

-
- -

仕様書

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

ブラウザーの互換性

- -

{{Compat("css.properties.overflow-y")}}

- -

関連情報

- - diff --git a/files/ja/web/css/overflow-y/index.md b/files/ja/web/css/overflow-y/index.md new file mode 100644 index 0000000000..0f6b49cdae --- /dev/null +++ b/files/ja/web/css/overflow-y/index.md @@ -0,0 +1,144 @@ +--- +title: overflow-y +slug: Web/CSS/overflow-y +tags: + - CSS + - CSS Property + - CSS プロパティ + - CSS ボックスモデル + - Reference + - overflow + - 'recipe:css-property' +translation_of: Web/CSS/overflow-y +--- +
{{CSSRef}}
+ +

overflow-y は CSS のプロパティで、ブロックレベル要素の内容が上下の境界からあふれた場合、どのように表示するのかを設定します。表示しないか、スクロールバーを表示するか、あふれさせるかを設定できます。

+ +
{{EmbedInteractiveExample("pages/css/overflow-y.html")}}
+ + + +

構文

+ +
/* キーワード値 */
+overflow-y: visible;
+overflow-y: hidden;
+overflow-y: clip;
+overflow-y: scroll;
+overflow-y: auto;
+
+/* グローバル値 */
+overflow-y: inherit;
+overflow-y: initial;
+overflow-y: unset;
+
+ +

overflow-y プロパティは、以下の値の一覧のうち一つのキーワードで指定します。

+ +

{{cssxref("overflow-x")}} が hidden, scroll, auto であり、このプロパティが visible (既定値) である場合は、暗黙的に auto と計算されます。

+ +

値

+ +
+
visible
+
内容は切り取られず、パディングボックスの上下の辺よりも外側に表示される可能性があります。
+
hidden
+
垂直方向にパディングボックスに合わせる必要がある場合は、内容を切り取ります。スクロールバーは表示されません。
+
clip {{experimental_inline}}
+
hidden と同様に、コンテンツは要素のパディングボックスに合わせて切り取られます。 clip と hidden の違いは、 clip キーワードがプログラム的なスクロールも含め、すべてのスクロールを禁止することです。ボックスはスクロールコンテナーにはならず、新しい整形コンテキストを始めることもありません。新しい整形コンテキストを始めたいのであれば、 {{cssxref("display", "display: flow-root", "#flow-root")}} を使用して実現することができます。
+
scroll
+
垂直方向にパディングボックスに合わせる必要がある場合は、内容を切り取ります。ブラウザーは内容が実際に切り取られるかどうかにかかわらず、スクロールバーを表示します。 (これは内容が変化したときにスクロールバーが表示されたり非表示になったりすることを防ぎます。) プリンターははみ出す内容を印刷するかもしれません。
+
auto
+
ユーザーエージェントに依存します。内容がパディングボックス内に収まる場合は visible と同じように表示されますが、新しいブロック整形コンテキストを生成します。内容があふれる場合、デスクトップブラウザーはスクロールバーを表示します。
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

HTML

+ +
<ul>
+  <li><code>overflow-y:hidden</code> — ボックスの外側のテキストを隠す
+  <div id="div1">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </div>
+  </li>
+
+  <li><code>overflow-y:scroll</code> — 常にスクロールバーを表示
+  <div id="div2">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </div>
+  </li>
+
+  <li><code>overflow-y:visible</code> — 必要に応じてテキストをボックスの外に表示
+  <div id="div3">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </div>
+  </li>
+
+  <li><code>overflow-y:auto</code> — 多くのブラウザーでは <code>scroll</code> と同じ
+  <div id="div4">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </div>
+  </li>
+</ul>
+
+
+ +

CSS

+ +
#div1,
+#div2,
+#div3,
+#div4 {
+  border: 1px solid black;
+  width:  250px;
+  height: 100px;
+}
+
+#div1 { overflow-y: hidden; margin-bottom: 12px;}
+#div2 { overflow-y: scroll; margin-bottom: 12px;}
+#div3 { overflow-y: visible; margin-bottom: 120px;}
+#div4 { overflow-y: auto; margin-bottom: 120px;}
+
+ +

結果

+ +
+

{{EmbedLiveSample("Example", "100%", "780")}}

+
+ +

仕様書

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

ブラウザーの互換性

+ +

{{Compat("css.properties.overflow-y")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/overflow/index.html b/files/ja/web/css/overflow/index.html deleted file mode 100644 index bbfc3d8ec4..0000000000 --- a/files/ja/web/css/overflow/index.html +++ /dev/null @@ -1,166 +0,0 @@ ---- -title: overflow -slug: Web/CSS/overflow -tags: - - CSS - - CSS プロパティ - - CSS 基本ボックスモデル - - Reference - - overflow - - クリッピング - - スクロール - - レイアウト -translation_of: Web/CSS/overflow ---- -
{{CSSRef}}
- -

CSS の overflow プロパティは、要素の内容が多すぎてブロック整形コンテキストに収まらない場合にどうするかを設定します。これは {{cssxref("overflow-x")}} および {{cssxref("overflow-y")}} の一括指定です。

- -
{{EmbedInteractiveExample("pages/css/overflow.html")}}
- - - -

選択肢としては、クリッピング、スクロールバーの表示、コンテナーの外側にはみ出して周囲の領域に表示するものがあります。

- -

値を (既定値の) visible 以外の値に指定すると、新たなブロック整形コンテキストを生成します。これは技術的な理由で必要なものです。そうでなければ、もしスクロールする要素に浮動要素が交差している時、スクロールするごとに強制的に折り返し処理をやり直すことになり、スクロール操作が遅くなる原因になるからです。

- -

overflow の効果を得るには、ブロックレベルコンテナーに高さ (height または max-height) を設定するか、 white-space を nowrap に設定することが必要です。

- -
-

メモ: 一方の軸をvisible (既定値) に設定して、もう一方を他の値に設定すると、 visible は auto として動作する結果になります。

-
- -
-

メモ: JavaScript の {{domxref("Element.scrollTop")}} プロパティは、 overflow が hidden に設定されている場合でも HTML 要素をスクロールさせるために使うことができます。

-
- -

構文

- -
/* キーワード値 */
-overflow: visible;
-overflow: hidden;
-overflow: clip;
-overflow: scroll;
-overflow: auto;
-overflow: hidden visible;
-
-/* グローバル値 */
-overflow: inherit;
-overflow: initial;
-overflow: unset;
-
- -

overflow プロパティは、以下の値の一覧のうち一つまたは二つのキーワードで指定します。二つのキーワードが指定された場合、最初の値が overflow-x で、二つ目の値が overflow-y になります。それ以外の場合、 overflow-x および overflow-y は同じ値に設定されます。

- -

値

- -
-
visible
-
内容はクリッピングされず、パディングボックスの外側に表示されることがあります。
-
hidden
-
内容は、必要に応じてパディングボックスに合わせて切り取られます。スクロールバーは表示されず、ユーザーがスクロールできるようにするための対応 (ドラッグやスクロールホイールによる方法) もありません。内容はプログラム的に (例えば、 {{domxref("HTMLElement.offsetLeft", "offsetLeft")}} のようなプロパティの値を設定する方法などで) スクロールすることができますので、要素はスクロールコンテナーになります。
-
clip
-
hidden と同様に、コンテンツは要素のパディングボックスに合わせて切り取られます。 clip と hidden の違いは、 clip キーワードがプログラム的なスクロールも含め、すべてのスクロールを禁止することです。ボックスはスクロールコンテナーにはならず、新しい整形コンテキストを始めることもありません。新しい整形コンテキストを始めたいのであれば、 {{cssxref("display", "display: flow-root", "#flow-root")}} を使用して実現することができます。
-
scroll
-
内容は、必要に応じてパディングボックスに合わせて切り取られます。コンテンツが変化したときに、スクロールバーが現れたり消えたりするのを防ぐため、ブラウザーは内容がクリッピングされるかどうかに関わらず、スクロールバーを常に表示します。プリンターはあふれた部分の内容を印刷する可能性があります。
-
auto
-
{{Glossary("user agent", "ユーザーエージェント")}}に依存します。内容がパディングボックス内に収まる場合は visible と同じように表示されますが、新しいブロック整形コンテキストを生成します。デスクトップブラウザーは内容があふれる場合、スクロールバーを表示します。
-
- -
-
overlay {{deprecated_inline}}
-
auto と同じ動作をしますが、場所を取る代わりに内容の先頭にスクロールバーを表示します。 WebKit ベース (例えば Safari) 及び Blink ベース (例えば Chrome 又は Opera) のブラウザーでのみ対応しています。
-
- -

Mozilla 拡張

- -
-
-moz-scrollbars-none {{obsolete_inline}}[1]
-
代わりに overflow:hidden を使ってください。
-
-moz-scrollbars-horizontal {{deprecated_inline}}[1]
-
{{Cssxref("overflow-x")}} および {{Cssxref("overflow-y")}} を使用してください。
-
-moz-scrollbars-vertical {{deprecated_inline}}[1]
-
{{Cssxref("overflow-x")}} および {{Cssxref("overflow-y")}} を使用してください
-
-moz-hidden-unscrollable {{non-standard_inline}}
-
内部使用、テーマ向けです。 XML のルート要素と <html>、 <body> が、矢印キーとマウスホイールでスクロールすることを禁止します。
-
- -

[1] Firefox 63 において、この機能は機能設定に隠されています。 about:config の中で layout.css.overflow.moz-scrollbars.enabled を true に設定してください。

- -

形式文法

- -{{csssyntax}} - -

例

- -
p {
-  width: 12em;
-  height: 6em;
-  border: dotted;
-  overflow: visible; /* content is not clipped */
-}
-
- -

visible (既定)
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

- -
p { overflow: hidden; /* スクロールバー表示なし */ }
-
- -

overflow: hidden
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

- -
p { overflow: scroll; /* 常にスクロールバーを表示 */ }
-
- -

overflow: scroll
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

- -
p { overflow: auto; /* 必要に応じてスクロールバーを追加 */ }
-
- -

overflow: auto
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

- -

仕様書

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

キーワードを一つだけではなく一つまたは二つで利用できるように構文を変更

-
{{SpecName('CSS3 Box', '#propdef-overflow', 'overflow')}}{{Spec2('CSS3 Box')}}変更なし
{{SpecName('CSS2.1', 'visufx.html#overflow', 'overflow')}}{{Spec2('CSS2.1')}}初回定義
- -

{{cssinfo}}

- -

ブラウザーの対応

- -

{{Compat("css.properties.overflow")}}

- -

関連情報

- - diff --git a/files/ja/web/css/overflow/index.md b/files/ja/web/css/overflow/index.md new file mode 100644 index 0000000000..bbfc3d8ec4 --- /dev/null +++ b/files/ja/web/css/overflow/index.md @@ -0,0 +1,166 @@ +--- +title: overflow +slug: Web/CSS/overflow +tags: + - CSS + - CSS プロパティ + - CSS 基本ボックスモデル + - Reference + - overflow + - クリッピング + - スクロール + - レイアウト +translation_of: Web/CSS/overflow +--- +
{{CSSRef}}
+ +

CSS の overflow プロパティは、要素の内容が多すぎてブロック整形コンテキストに収まらない場合にどうするかを設定します。これは {{cssxref("overflow-x")}} および {{cssxref("overflow-y")}} の一括指定です。

+ +
{{EmbedInteractiveExample("pages/css/overflow.html")}}
+ + + +

選択肢としては、クリッピング、スクロールバーの表示、コンテナーの外側にはみ出して周囲の領域に表示するものがあります。

+ +

値を (既定値の) visible 以外の値に指定すると、新たなブロック整形コンテキストを生成します。これは技術的な理由で必要なものです。そうでなければ、もしスクロールする要素に浮動要素が交差している時、スクロールするごとに強制的に折り返し処理をやり直すことになり、スクロール操作が遅くなる原因になるからです。

+ +

overflow の効果を得るには、ブロックレベルコンテナーに高さ (height または max-height) を設定するか、 white-space を nowrap に設定することが必要です。

+ +
+

メモ: 一方の軸をvisible (既定値) に設定して、もう一方を他の値に設定すると、 visible は auto として動作する結果になります。

+
+ +
+

メモ: JavaScript の {{domxref("Element.scrollTop")}} プロパティは、 overflow が hidden に設定されている場合でも HTML 要素をスクロールさせるために使うことができます。

+
+ +

構文

+ +
/* キーワード値 */
+overflow: visible;
+overflow: hidden;
+overflow: clip;
+overflow: scroll;
+overflow: auto;
+overflow: hidden visible;
+
+/* グローバル値 */
+overflow: inherit;
+overflow: initial;
+overflow: unset;
+
+ +

overflow プロパティは、以下の値の一覧のうち一つまたは二つのキーワードで指定します。二つのキーワードが指定された場合、最初の値が overflow-x で、二つ目の値が overflow-y になります。それ以外の場合、 overflow-x および overflow-y は同じ値に設定されます。

+ +

値

+ +
+
visible
+
内容はクリッピングされず、パディングボックスの外側に表示されることがあります。
+
hidden
+
内容は、必要に応じてパディングボックスに合わせて切り取られます。スクロールバーは表示されず、ユーザーがスクロールできるようにするための対応 (ドラッグやスクロールホイールによる方法) もありません。内容はプログラム的に (例えば、 {{domxref("HTMLElement.offsetLeft", "offsetLeft")}} のようなプロパティの値を設定する方法などで) スクロールすることができますので、要素はスクロールコンテナーになります。
+
clip
+
hidden と同様に、コンテンツは要素のパディングボックスに合わせて切り取られます。 clip と hidden の違いは、 clip キーワードがプログラム的なスクロールも含め、すべてのスクロールを禁止することです。ボックスはスクロールコンテナーにはならず、新しい整形コンテキストを始めることもありません。新しい整形コンテキストを始めたいのであれば、 {{cssxref("display", "display: flow-root", "#flow-root")}} を使用して実現することができます。
+
scroll
+
内容は、必要に応じてパディングボックスに合わせて切り取られます。コンテンツが変化したときに、スクロールバーが現れたり消えたりするのを防ぐため、ブラウザーは内容がクリッピングされるかどうかに関わらず、スクロールバーを常に表示します。プリンターはあふれた部分の内容を印刷する可能性があります。
+
auto
+
{{Glossary("user agent", "ユーザーエージェント")}}に依存します。内容がパディングボックス内に収まる場合は visible と同じように表示されますが、新しいブロック整形コンテキストを生成します。デスクトップブラウザーは内容があふれる場合、スクロールバーを表示します。
+
+ +
+
overlay {{deprecated_inline}}
+
auto と同じ動作をしますが、場所を取る代わりに内容の先頭にスクロールバーを表示します。 WebKit ベース (例えば Safari) 及び Blink ベース (例えば Chrome 又は Opera) のブラウザーでのみ対応しています。
+
+ +

Mozilla 拡張

+ +
+
-moz-scrollbars-none {{obsolete_inline}}[1]
+
代わりに overflow:hidden を使ってください。
+
-moz-scrollbars-horizontal {{deprecated_inline}}[1]
+
{{Cssxref("overflow-x")}} および {{Cssxref("overflow-y")}} を使用してください。
+
-moz-scrollbars-vertical {{deprecated_inline}}[1]
+
{{Cssxref("overflow-x")}} および {{Cssxref("overflow-y")}} を使用してください
+
-moz-hidden-unscrollable {{non-standard_inline}}
+
内部使用、テーマ向けです。 XML のルート要素と <html>、 <body> が、矢印キーとマウスホイールでスクロールすることを禁止します。
+
+ +

[1] Firefox 63 において、この機能は機能設定に隠されています。 about:config の中で layout.css.overflow.moz-scrollbars.enabled を true に設定してください。

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +
p {
+  width: 12em;
+  height: 6em;
+  border: dotted;
+  overflow: visible; /* content is not clipped */
+}
+
+ +

visible (既定)
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

+ +
p { overflow: hidden; /* スクロールバー表示なし */ }
+
+ +

overflow: hidden
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

+ +
p { overflow: scroll; /* 常にスクロールバーを表示 */ }
+
+ +

overflow: scroll
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

+ +
p { overflow: auto; /* 必要に応じてスクロールバーを追加 */ }
+
+ +

overflow: auto
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

+ +

仕様書

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

キーワードを一つだけではなく一つまたは二つで利用できるように構文を変更

+
{{SpecName('CSS3 Box', '#propdef-overflow', 'overflow')}}{{Spec2('CSS3 Box')}}変更なし
{{SpecName('CSS2.1', 'visufx.html#overflow', 'overflow')}}{{Spec2('CSS2.1')}}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの対応

+ +

{{Compat("css.properties.overflow")}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf