From 9094ecd14413c4222d1440026ca33627e099ca4b Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 2 Feb 2022 01:38:16 +0900 Subject: 2021/08/13 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/overflow-x/index.md | 145 ++++++++++++++--------------------- 1 file changed, 59 insertions(+), 86 deletions(-) (limited to 'files/ja/web/css') diff --git a/files/ja/web/css/overflow-x/index.md b/files/ja/web/css/overflow-x/index.md index 29e7d447c8..902b646df2 100644 --- a/files/ja/web/css/overflow-x/index.md +++ b/files/ja/web/css/overflow-x/index.md @@ -3,26 +3,23 @@ title: overflow-x slug: Web/CSS/overflow-x tags: - CSS - - CSS Box Model - - CSS Property - - CSS プロパティ - CSS ボックスモデル - - Reference - - overflow - - 'recipe:css-property' + - CSS プロパティ + - リファレンス + - recipe:css-property +browser-compat: css.properties.overflow-x translation_of: Web/CSS/overflow-x --- -
{{CSSRef}}
- -

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

+{{CSSRef}} -
{{EmbedInteractiveExample("pages/css/overflow-x.html")}}
+**`overflow-x`** は [CSS](/ja/docs/Web/CSS) のプロパティで、ブロックレベル要素の内容が左右の境界からあふれた場合、どのように表示するのかを設定します。表示しないか、スクロールバーを表示するか、あふれさせるかを設定できます。 - +{{EmbedInteractiveExample("pages/css/overflow-x.html")}} -

構文

+## 構文 -
/* キーワード値 */
+```css
+/* キーワード値 */
 overflow-x: visible;
 overflow-x: hidden;
 overflow-x: clip;
@@ -32,64 +29,61 @@ overflow-x: auto;
 /* グローバル値 */
 overflow-x: inherit;
 overflow-x: initial;
+overflow-x: revert;
 overflow-x: unset;
-
+``` + +`overflow-x` プロパティは、以下の値の一覧のうち一つのキーワードで指定します。 + +### 値 -

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` と同じように表示されますが、新しいブロック整形文脈を生成します。内容があふれる場合、デスクトップブラウザーはスクロールバーを表示します。 -

値

+## 公式定義 -
-
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 と同じように表示されますが、新しいブロック整形文脈を生成します。内容があふれる場合、デスクトップブラウザーはスクロールバーを表示します。
-
+{{CSSInfo}} -

形式文法

+## 形式文法 {{csssyntax}} -

例

+## 例 -

HTML

+### HTML -
<ul>
-  <li><code>overflow-x:hidden</code> — ボックスの外側のテキストを隠す
-    <div id="div1">
-      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
-    </div>
-  </li>
+```html
+
+ - overflow-x:auto — 多くのブラウザーでは scroll と同じ +
+ + +``` -

CSS

+### CSS -
#div1, #div2, #div3, #div4 {
+```css
+#div1, #div2, #div3, #div4 {
   border: 1px solid black;
   width:  250px;
   margin-bottom: 12px;
@@ -99,41 +93,20 @@ overflow-x: unset;
 #div2 { overflow-x: scroll;}
 #div3 { overflow-x: visible;}
 #div4 { overflow-x: auto;}
-
- -

結果

+``` -
-

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

-
+### 結果 -

仕様書

+{{EmbedLiveSample("Examples", "100%", "270")}} - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Overflow', '#propdef-overflow-x', 'overflow-x')}}{{Spec2('CSS3 Overflow')}}
+## 仕様書 -

{{cssinfo}}

+{{Specifications}} -

ブラウザーの互換性

+## ブラウザーの互換性 -

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

+{{Compat}} -

関連情報

+## 関連情報 - +- 関連する CSS プロパティ: {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{Cssxref("overflow")}}, {{Cssxref("overflow-y")}}, {{Cssxref("clip")}}, {{Cssxref("display")}} -- cgit v1.2.3-54-g00ecf