diff options
Diffstat (limited to 'files')
| -rw-r--r-- | files/ja/web/css/css_columns/handling_content_breaks_in_multicol/index.md | 76 |
1 files changed, 35 insertions, 41 deletions
diff --git a/files/ja/web/css/css_columns/handling_content_breaks_in_multicol/index.md b/files/ja/web/css/css_columns/handling_content_breaks_in_multicol/index.md index d1a397801f..b6b345cb1f 100644 --- a/files/ja/web/css/css_columns/handling_content_breaks_in_multicol/index.md +++ b/files/ja/web/css/css_columns/handling_content_breaks_in_multicol/index.md @@ -1,5 +1,5 @@ --- -title: 段組みにおける内容の分割の扱い +title: 段組みにおける内容物の分割の扱い slug: Web/CSS/CSS_Columns/Handling_content_breaks_in_multicol tags: - CSS @@ -8,67 +8,61 @@ tags: - レイアウト translation_of: Web/CSS/CSS_Columns/Handling_content_breaks_in_multicol --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p class="summary">段組みレイアウトでは段ボックス間で、ページ付きメディアのページ間と同様に内容が分割されます。どちらのコンテキストでも、 CSS 断片化仕様書のプロパティを用いて、どのように内容を分割するかを制御します。このガイドでは、段組みで断片化がどのように動作するかを見てみます。</p> +段組みレイアウトでは、段ボックス間で、ページ付きメディアのページ間と同様に内容が分割されます。どちらのコンテキストでも、 CSS 断片化仕様書のプロパティを用いて、どのように内容を分割するかを制御します。このガイドでは、段組みで断片化がどのように動作するかを見てみます。 -<h2 id="Fragmentation_basics" name="Fragmentation_basics">断片化の基本</h2> +## 断片化の基本 -<p><a href="https://www.w3.org/TR/css-break-3/">CSS Fragmentation specification</a> は、断片化コンテナー間、または <em>fragmentainer</em> の間でどのように内容を分割するかを詳述しています。段組みでは、 fragmentainer は段ボックスです。</p> +[CSS Fragmentation specification](https://www.w3.org/TR/css-break-3/) は、断片化コンテナー (_fragmentainer_) 間でどのように内容を分割するかを詳述しています。段組みでは、断片化コンテナーは段ボックスです。 -<p>段ボックスは他のマークアップを含むことができ、できれば分割したくない場所がたくさんあります。例えば、ふつうは画像のキャプションは参照する画像と別な段に分割されないほうが望ましく、見出しが段の最後にあるのも変です。断片化プロパティはこれをいくらか制御するための方法を提供します。</p> +段ボックスは他のマークアップを含むことができ、できれば分割したくない場所がたくさんあります。例えば、ふつうは画像のキャプションは参照する画像と別な段に分割されないほうが望ましく、見出しが段の最後にあるのも変です。断片化プロパティはこれをいくらか制御するための方法を提供します。 -<p>分割を制御したくなる場所は様々なものがあります。</p> +分割を制御する可能性がある場所には、様々なものがあります。 -<ul> - <li>例えば figure 要素の内部などの、ボックス内での分割。</li> - <li>上記の見出しの例のような、ボックスの前後の分割。</li> - <li>行間の分割。</li> -</ul> +- ボックス内での分割。例えば、 figure 要素の内部など。 +- ボックスの前後の分割。上記の見出しの例など。 +- 行間の分割。 -<h2 id="Breaks_inside_boxes" name="Breaks_inside_boxes">ボックス内での分割</h2> +## ボックス内での分割 -<p>ボックス内での分割を制御するには、 {{cssxref("break-inside")}} プロパティを使用します。このプロパティは以下の値を取ります。</p> +ボックス内での分割を制御するには、 {{cssxref("break-inside")}} プロパティを使用します。このプロパティは以下の値を取ります。 -<ul> - <li><code>auto</code></li> - <li><code>avoid</code></li> - <li><code>avoid-page</code></li> - <li><code>avoid-column</code></li> - <li><code>avoid-region</code></li> -</ul> +- `auto` +- `avoid` +- `avoid-page` +- `avoid-column` +- `avoid-region` -<p>以下の例では、 break-inside を figure 要素に適用して、キャプションが画像から分割されることを防ぎます。</p> +以下の例では、 break-inside を figure 要素に適用して、キャプションと画像が分割されることを防ぎます。 -<p>{{EmbedGHLiveSample("css-examples/multicol/fragmentation/break-inside.html", '100%', 800)}}</p> +{{EmbedGHLiveSample("css-examples/multicol/fragmentation/break-inside.html", '100%', 800)}} -<h2 id="Breaks_before_and_after_boxes" name="Breaks_before_and_after_boxes">ボックスの前後の分割</h2> +## ボックスの前後の分割 -<p>{{cssxref("break-before")}} および {{cssxref("break-after")}} プロパティを使用して、要素の前後の分割を制御します。段組みのコンテキストでは、以下の値を取ります。</p> +{{cssxref("break-before")}} および {{cssxref("break-after")}} プロパティを使用して、要素の前後の分割を制御します。段組みのコンテキストでは、以下の値を取ります。 -<ul> - <li>auto</li> - <li>avoid</li> - <li>avoid-column</li> - <li>column</li> -</ul> +- auto +- avoid +- avoid-column +- column -<p>次の例では、 <code>h2</code> 要素の前で強制的に改段しています。</p> +次の例では、 `h2` 要素の前で強制的に改段しています。 -<p>{{EmbedGHLiveSample("css-examples/multicol/fragmentation/break-before.html", '100%', 800)}}</p> +{{EmbedGHLiveSample("css-examples/multicol/fragmentation/break-before.html", '100%', 800)}} -<h2 id="Breaks_between_lines" name="Breaks_between_lines">行間での分割</h2> +## 行間での分割 -<p>{{cssxref("orphans")}} および {{cssxref("widows")}} プロパティも便利です。 orphans プロパティは、断片の末尾に残る行数を制御します。 widows プロパティは、断片の先頭に残る行数を制御します。</p> +{{cssxref("orphans")}} および {{cssxref("widows")}} プロパティも便利です。 orphans プロパティは、断片の末尾に残る行数を制御します。 widows プロパティは、断片の先頭に残る行数を制御します。 -<p><code>orphans</code> および <code>widows</code> プロパティは整数値を取り、断片のそれぞれ末尾および先頭の行数に残す行数を表します。なお、これらのプロパティは段落などのブロックコンテナー内でのみ動作します。ブロックの行数が値で指定された数より少なかった場合、すべての行が一緒に保持されます。</p> +`orphans` および `widows` プロパティは整数値を取り、断片のそれぞれ末尾および先頭の行数に残す行数を表します。なお、これらのプロパティは段落などのブロックコンテナー内でのみ動作します。ブロックの行数が値で指定された数より少なかった場合、すべての行が一緒に保持されます。 -<p>以下の例では、 <code>orphans</code> プロパティを用いて段の末尾に残す行数を制御しています。値を変更すると、内容を分割する効果を確認できます。</p> +以下の例では、 `orphans` プロパティを用いて段の末尾に残す行数を制御しています。値を変更すると、内容を分割する効果を確認できます。 -<p>{{EmbedGHLiveSample("css-examples/multicol/fragmentation/orphans.html", '100%', 800)}}</p> +{{EmbedGHLiveSample("css-examples/multicol/fragmentation/orphans.html", '100%', 800)}} -<h2 id="When_things_don’t_work_as_expected" name="When_things_don’t_work_as_expected">期待通りに動作しない場合</h2> +## 期待通りに動作しない場合 -<p>内容の量が少なく、様々な方法で分割を制御しようとしている場合や、複数の要素があり、内容をどこかで分割する必要がある場合、常に意図する結果が得られるとは限りません。断片化の使用はある程度まで、常にブラウザーに対する提案であり、可能であればその方法で分割が制御されます。</p> +内容の量が少なく、様々な方法で分割を制御しようとしている場合や、複数の要素があり、内容をどこかで分割する必要がある場合、常に意図する結果が得られるとは限りません。断片化の使用はある程度まで、常にブラウザーに対する提案であり、可能であればその方法で分割が制御されます。 -<p>上記に加えて、これらのプロパティーに対するブラウザーの対応は若干まばらです。ここ MDN の個別のプロパティページにおける互換性データ表は、どのブラウザーがどの機能に対応しているかを確認するのに便利かもしれません。多くの場合、分割が制御できないフォールバックにより、美しくない分割が発生することが次善の策であり、レイアウトが崩れるよりましです。</p> +上記に加えて、これらのプロパティーに対するブラウザーの対応は若干まばらです。ここ MDN の個別のプロパティページにおける互換性データ表は、どのブラウザーがどの機能に対応しているかを確認するのに便利かもしれません。多くの場合、分割が制御できない代替策により、美しくなく分割されることが次善の策であり、レイアウトが崩れるよりましです。 |