diff options
Diffstat (limited to 'files/ja/web/css/overflow-inline/index.md')
| -rw-r--r-- | files/ja/web/css/overflow-inline/index.md | 142 |
1 files changed, 62 insertions, 80 deletions
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 --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><strong><code>overflow-inline</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、内容がボックスのインライン方向の先頭および末尾方向の端をはみ出した時に、どのように表示するかを設定します。これは表示なし、スクロールバー付き、内容をはみ出させるの何れかになります。</p> +**`overflow-inline`** は [CSS](/ja/docs/Web/CSS) のプロパティで、内容がボックスのインライン方向の先頭および末尾方向の端をはみ出した時に、どのように表示するかを設定します。これは表示なし、スクロールバー付き、内容をはみ出させるの何れかになります。 -<div class="note"> -<p><code>overflow-inline</code> プロパティは、文書の書字方向に応じて、 {{Cssxref("overflow-y")}} または {{Cssxref("overflow-x")}} に対応します。</p> -</div> +> **Note:** `overflow-inline` プロパティは、文書の書字方向に応じて、 {{Cssxref("overflow-y")}} または {{Cssxref("overflow-x")}} に対応します。 -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 -<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */ +```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; -</pre> +``` -<p><code>overflow-inline</code> プロパティは、以下の値の一覧のうち一つのキーワードで指定します。</p> +`overflow-inline` プロパティは、以下の値の一覧のうち一つのキーワードで指定します。 -<h3 id="Values" name="Values">値</h3> +### 値 -<dl> - <dt><code>visible</code></dt> - <dd>内容は切り取られず、パディングボックスのインライン方向の先頭と末尾の辺よりも外側に表示される可能性があります。</dd> - <dt><code>hidden</code></dt> - <dd>インライン方向にパディングボックスに合わせる必要がある場合は、内容を切り取ります。スクロールバーは表示されません。</dd> - <dt><code>scroll</code></dt> - <dd>インライン方向にパディングボックスに合わせる必要がある場合は、内容を切り取ります。ブラウザーは内容が実際に切り取られるかどうかにかかわらず、スクロールバーを表示します。 (これは内容が変化したときにスクロールバーが表示されたり非表示になったりすることを防ぎます。) プリンターははみ出す内容を印刷するかもしれません。</dd> - <dt><code>auto</code></dt> - <dd>ユーザーエージェントに依存します。内容がパディングボックス内に収まる場合は <code>visible</code> と同じように表示されますが、新しいブロック整形コンテキストを生成します。内容があふれる場合、デスクトップブラウザーはスクロールバーを表示します。</dd> -</dl> +- `visible` + - : 内容は切り取られず、パディングボックスのインライン方向の先頭と末尾の辺よりも外側に表示される可能性があります。 +- `hidden` + - : インライン方向にパディングボックスに合わせる必要がある場合は、内容を切り取ります。スクロールバーは表示されません。 +- `scroll` + - : インライン方向にパディングボックスに合わせる必要がある場合は、内容を切り取ります。ブラウザーは内容が実際に切り取られるかどうかにかかわらず、スクロールバーを表示します。 (これは内容が変化したときにスクロールバーが表示されたり非表示になったりすることを防ぎます。) プリンターははみ出す内容を印刷するかもしれません。 +- `auto` + - : ユーザーエージェントに依存します。内容がパディングボックス内に収まる場合は `visible` と同じように表示されますが、新しいブロック整形コンテキストを生成します。内容があふれる場合、デスクトップブラウザーはスクロールバーを表示します。 -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> +## 公式定義 -<p>{{cssinfo}}</p> +{{cssinfo}} -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> +## 形式文法 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="Setting_inline_overflow_behavior" name="Setting_inline_overflow_behavior">インライン方向のはみ出し動作の設定</h3> +<h3 id="Setting_inline_overflow_behavior">インライン方向のはみ出し動作の設定</h3> -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html notranslate"><ul> - <li><code>overflow-inline:hidden</code> — ボックスの外側のテキストを隠す - <div id="div1"> +```html +<ul> + <li><code>overflow-inline:hidden</code> — ボックスの外側のテキストを隠す + <div id="div1"> ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ - </div> - </li> + </div> + </li> - <li><code>overflow-inline:scroll</code> — 常にスクロールバーを表示 - <div id="div2"> + <li><code>overflow-inline:scroll</code> — 常にスクロールバーを表示 + <div id="div2"> ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ - </div> - </li> + </div> + </li> - <li><code>overflow-inline:visible</code> — 必要に応じてテキストをボックスの外に表示 - <div id="div3"> + <li><code>overflow-inline:visible</code> — 必要に応じてテキストをボックスの外に表示 + <div id="div3"> ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ - </div> - </li> + </div> + </li> - <li><code>overflow-inline:auto</code> — 多くのブラウザーでは <code>scroll</code> と同じ - <div id="div4"> + <li><code>overflow-inline:auto</code> — 多くのブラウザーでは <code>scroll</code> と同じ + <div id="div4"> ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ - </div> - </li> -</ul> -</pre> + </div> + </li> +</ul> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css notranslate">#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;} -</pre> +``` -<h4 id="Result" name="Result">結果</h4> +#### 結果 -<figure> -<p>{{EmbedLiveSample("Setting_inline_overflow_behavior", "100%", "270")}}</p> -</figure> +{{EmbedLiveSample("Setting_inline_overflow_behavior", "100%", "270")}} -<h2 id="Specifications" name="Specifications">仕様書</h2> +## 仕様書 -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Overflow', '#propdef-overflow-inline', 'overflow-inline')}}</td> - <td>{{Spec2('CSS3 Overflow')}}</td> - <td></td> - </tr> - </tbody> -</table> +{{Specifications}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +## ブラウザーの互換性 -<p>{{Compat("css.properties.overflow-inline")}}</p> +{{Compat}} -<h2 id="See_also" name="See_also">関連情報</h2> +## 関連情報 -<ul> - <li>関連する CSS プロパティ: {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{Cssxref("overflow")}}, {{Cssxref("overflow-block")}}, {{Cssxref("overflow-x")}}, {{Cssxref("overflow-y")}}, {{Cssxref("clip")}}, {{Cssxref("display")}}</li> - <li><a href="/ja/docs/Web/CSS/CSS_Logical_Properties">CSS 論理プロパティ</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Writing_Modes">書字方向</a></li> -</ul> +- 関連する 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) |