From 3749b3f9c22c5ca41293cf770cfb6aab216e3ead Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 17 Nov 2021 02:16:00 +0900 Subject: CSS 論理的プロパティに関するその他のプロパティを更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/11/16 時点の英語版に同期 --- files/ja/web/css/overflow-block/index.md | 143 +++++++++++++------------------ 1 file changed, 61 insertions(+), 82 deletions(-) (limited to 'files/ja/web/css/overflow-block') diff --git a/files/ja/web/css/overflow-block/index.md b/files/ja/web/css/overflow-block/index.md index 8d96ac1593..b7ea4bd612 100644 --- a/files/ja/web/css/overflow-block/index.md +++ b/files/ja/web/css/overflow-block/index.md @@ -4,22 +4,22 @@ slug: Web/CSS/overflow-block tags: - CSS - CSS ボックスモデル - - CSS Property - - Reference - - 'recipe:css-property' + - CSS プロパティ + - リファレンス + - recipe:css-property +browser-compat: css.properties.overflow-block translation_of: Web/CSS/overflow-block --- -

{{CSSRef}}

+{{CSSRef}} -

overflow-block は CSS プロパティで、内容がブロックの先頭およびブロックの末尾の端をあふれた時にどのように表示するかを設定します。これは表示なし、スクロールバー付き、内容をはみ出させる、のいずれかになります。

+**`overflow-block`** は [CSS](/ja/docs/Web/CSS) プロパティで、内容がブロックの先頭およびブロックの末尾の端をあふれた時にどのように表示するかを設定します。これは表示なし、スクロールバー付き、内容をはみ出させる、のいずれかになります。 -
-

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

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

構文

+## 構文 -
/* キーワード値 */
+```css
+/* キーワード値 */
 overflow-block: visible;
 overflow-block: hidden;
 overflow-block: scroll;
@@ -28,67 +28,67 @@ overflow-block: auto;
 /* グローバル値 */
 overflow-block: inherit;
 overflow-block: initial;
+overflow-block: revert;
 overflow-block: unset;
-
+``` -

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

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

値

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

公式定義

+## 公式定義 -

{{CSSInfo}}

+{{CSSInfo}} -

形式文法

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

例

+

例

-

HTML

+### HTML -
<ul>
-  <li><code>overflow-block:hidden</code> — ボックスの外側のテキストを隠す
-  <div id="div1">
+```html
+
+ + + +``` -

CSS

+### CSS -
#div1,
+```css
+#div1,
 #div2,
 #div3,
 #div4 {
@@ -101,43 +101,22 @@ overflow-block: unset;
 #div2 { overflow-block: scroll; margin-bottom: 120px;}
 #div3 { overflow-block: visible; margin-bottom: 120px;}
 #div4 { overflow-block: auto; margin-bottom: 120px;}
-
+``` -

結果

+### 結果 -
-

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

-
+{{EmbedLiveSample("Examples", "100%", "780")}} -

仕様書

+## 仕様書 - - - - - - - - - - - - - - - -
仕様書状態備考
{{ SpecName('CSS3 Overflow', '#propdef-overflow-block', 'overflow-block') }}{{ Spec2('CSS3 Overflow') }}
+{{Specifications}} -
{{cssinfo}}
+## ブラウザーの互換性 -

ブラウザーの互換性

+{{Compat}} -

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

+## 関連情報 -

関連情報

- - +- 関連する CSS プロパティ: {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{Cssxref("overflow")}}, {{Cssxref("overflow-inline")}}, {{Cssxref("overflow-x")}}, {{Cssxref("overflow-y")}}, {{Cssxref("clip")}}, {{Cssxref("display")}} +- [CSS 論理プロパティ](/ja/docs/Web/CSS/CSS_Logical_Properties) +- [書字方向](/ja/docs/Web/CSS/CSS_Writing_Modes) -- cgit v1.2.3-54-g00ecf