From 75c9efb03dd63fb59adde624552b6d4d04e178d7 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 17 Nov 2021 01:34:23 +0900 Subject: CSS 論理的プロパティのその他プロパティの変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/overflow-inline/index.html | 139 ---------------------------- files/ja/web/css/overflow-inline/index.md | 139 ++++++++++++++++++++++++++++ 2 files changed, 139 insertions(+), 139 deletions(-) delete mode 100644 files/ja/web/css/overflow-inline/index.html create mode 100644 files/ja/web/css/overflow-inline/index.md (limited to 'files/ja/web/css/overflow-inline') diff --git a/files/ja/web/css/overflow-inline/index.html b/files/ja/web/css/overflow-inline/index.html deleted file mode 100644 index 2f171e18b5..0000000000 --- a/files/ja/web/css/overflow-inline/index.html +++ /dev/null @@ -1,139 +0,0 @@ ---- -title: overflow-inline -slug: Web/CSS/overflow-inline -tags: - - CSS - - CSS Box Model - - CSS Property - - Reference - - 'recipe:css-property' -translation_of: Web/CSS/overflow-inline ---- -
{{CSSRef}}
- -

overflow-inline は CSS のプロパティで、内容がボックスのインライン方向の先頭および末尾方向の端をはみ出した時に、どのように表示するかを設定します。これは表示なし、スクロールバー付き、内容をはみ出させるの何れかになります。

- -
-

overflow-inline プロパティは、文書の書字方向に応じて、 {{Cssxref("overflow-y")}} または {{Cssxref("overflow-x")}} に対応します。

-
- -

構文

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

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

- -

値

- -
-
visible
-
内容は切り取られず、パディングボックスのインライン方向の先頭と末尾の辺よりも外側に表示される可能性があります。
-
hidden
-
インライン方向にパディングボックスに合わせる必要がある場合は、内容を切り取ります。スクロールバーは表示されません。
-
scroll
-
インライン方向にパディングボックスに合わせる必要がある場合は、内容を切り取ります。ブラウザーは内容が実際に切り取られるかどうかにかかわらず、スクロールバーを表示します。 (これは内容が変化したときにスクロールバーが表示されたり非表示になったりすることを防ぎます。) プリンターははみ出す内容を印刷するかもしれません。
-
auto
-
ユーザーエージェントに依存します。内容がパディングボックス内に収まる場合は visible と同じように表示されますが、新しいブロック整形コンテキストを生成します。内容があふれる場合、デスクトップブラウザーはスクロールバーを表示します。
-
- -

公式定義

- -

{{cssinfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

インライン方向のはみ出し動作の設定

- -

HTML

- -
<ul>
-  <li><code>overflow-inline:hidden</code> — ボックスの外側のテキストを隠す
-    <div id="div1">
-      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
-    </div>
-  </li>
-
-  <li><code>overflow-inline:scroll</code> — 常にスクロールバーを表示
-    <div id="div2">
-      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
-    </div>
-  </li>
-
-  <li><code>overflow-inline:visible</code> — 必要に応じてテキストをボックスの外に表示
-    <div id="div3">
-      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
-    </div>
-  </li>
-
-  <li><code>overflow-inline: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-inline: hidden;}
-#div2 { overflow-inline: scroll;}
-#div3 { overflow-inline: visible;}
-#div4 { overflow-inline: auto;}
-
- -

結果

- -
-

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

-
- -

仕様書

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

ブラウザーの互換性

- -

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

- -

関連情報

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

overflow-inline は CSS のプロパティで、内容がボックスのインライン方向の先頭および末尾方向の端をはみ出した時に、どのように表示するかを設定します。これは表示なし、スクロールバー付き、内容をはみ出させるの何れかになります。

+ +
+

overflow-inline プロパティは、文書の書字方向に応じて、 {{Cssxref("overflow-y")}} または {{Cssxref("overflow-x")}} に対応します。

+
+ +

構文

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

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

+ +

値

+ +
+
visible
+
内容は切り取られず、パディングボックスのインライン方向の先頭と末尾の辺よりも外側に表示される可能性があります。
+
hidden
+
インライン方向にパディングボックスに合わせる必要がある場合は、内容を切り取ります。スクロールバーは表示されません。
+
scroll
+
インライン方向にパディングボックスに合わせる必要がある場合は、内容を切り取ります。ブラウザーは内容が実際に切り取られるかどうかにかかわらず、スクロールバーを表示します。 (これは内容が変化したときにスクロールバーが表示されたり非表示になったりすることを防ぎます。) プリンターははみ出す内容を印刷するかもしれません。
+
auto
+
ユーザーエージェントに依存します。内容がパディングボックス内に収まる場合は visible と同じように表示されますが、新しいブロック整形コンテキストを生成します。内容があふれる場合、デスクトップブラウザーはスクロールバーを表示します。
+
+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

インライン方向のはみ出し動作の設定

+ +

HTML

+ +
<ul>
+  <li><code>overflow-inline:hidden</code> — ボックスの外側のテキストを隠す
+    <div id="div1">
+      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
+    </div>
+  </li>
+
+  <li><code>overflow-inline:scroll</code> — 常にスクロールバーを表示
+    <div id="div2">
+      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
+    </div>
+  </li>
+
+  <li><code>overflow-inline:visible</code> — 必要に応じてテキストをボックスの外に表示
+    <div id="div3">
+      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
+    </div>
+  </li>
+
+  <li><code>overflow-inline: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-inline: hidden;}
+#div2 { overflow-inline: scroll;}
+#div3 { overflow-inline: visible;}
+#div4 { overflow-inline: auto;}
+
+ +

結果

+ +
+

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

+
+ +

仕様書

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

ブラウザーの互換性

+ +

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

+ +

関連情報

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