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/overflow-x/index.html | 139 --------------------------------- files/ja/web/css/overflow-x/index.md | 139 +++++++++++++++++++++++++++++++++ 2 files changed, 139 insertions(+), 139 deletions(-) delete mode 100644 files/ja/web/css/overflow-x/index.html create mode 100644 files/ja/web/css/overflow-x/index.md (limited to 'files/ja/web/css/overflow-x') 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")}}

+ +

関連情報

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