From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/css/overflow-inline/index.html | 141 ++++++++++++++++++++++++++++ 1 file changed, 141 insertions(+) create mode 100644 files/ja/web/css/overflow-inline/index.html (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 new file mode 100644 index 0000000000..cef446a46c --- /dev/null +++ b/files/ja/web/css/overflow-inline/index.html @@ -0,0 +1,141 @@ +--- +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")}}

+ +

関連情報

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