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-inline/index.md | 142 +++++++++++++----------------- 1 file changed, 62 insertions(+), 80 deletions(-) (limited to 'files/ja/web/css/overflow-inline') diff --git a/files/ja/web/css/overflow-inline/index.md b/files/ja/web/css/overflow-inline/index.md index 1fd41684cc..c98f87432e 100644 --- a/files/ja/web/css/overflow-inline/index.md +++ b/files/ja/web/css/overflow-inline/index.md @@ -4,22 +4,22 @@ slug: Web/CSS/overflow-inline tags: - CSS - CSS ボックスモデル - - CSS Property - - Reference - - 'recipe:css-property' + - CSS プロパティ + - リファレンス + - recipe:css-property +browser-compat: css.properties.overflow-inline translation_of: Web/CSS/overflow-inline --- -
{{CSSRef}}
+{{CSSRef}} -

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

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

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

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

構文

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

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

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

値

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

公式定義

+## 公式定義 -

{{cssinfo}}

+{{cssinfo}} -

形式文法

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

例

+## 例 -

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

+

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

-

HTML

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

CSS

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

結果

+#### 結果 -
-

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

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

仕様書

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

ブラウザーの互換性

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

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

+{{Compat}} -

関連情報

+## 関連情報 - +- 関連する CSS プロパティ: {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{Cssxref("overflow")}}, {{Cssxref("overflow-block")}}, {{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