blob: c3f25e6453c25992c10f3aef86518338a7f2b362 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
|
---
title: 段抜きと段の均衡
slug: Web/CSS/CSS_Columns/Spanning_Columns
tags:
- CSS
- CSS 段組みレイアウト
- Guide
- レイアウト
translation_of: Web/CSS/CSS_Columns/Spanning_Columns
---
<div>{{CSSRef}}</div>
<p class="summary">このガイドでは、段組みコンテナー内で段抜きを作成する方法、段がどのように充足されるかを制御する方法を見てみます。</p>
<div class="note">
<p>このガイドで紹介している段抜きや均衡を取る機能は、このガイドの前二章で紹介した機能ほどブラウザーの対応が進んでいないことに注意してください。</p>
</div>
<h2 id="Spanning_the_Columns" name="Spanning_the_Columns">段抜き</h2>
<p>アイテムを段抜きする場合は、 {{cssxref("column-span")}} プロパティの値を <code>all</code> に設定してください。これで、要素はすべての段にまたがります。</p>
<p>段組みコンテナーの子孫要素は、直接の子でも間接の子でも<em><ruby>段抜き<rp> (</rp><rt>spanner</rt><rp>) </rp></ruby></em>になることができます。例えば、コンテナーの中に直接含まれる見出しは段抜きになることができ、段組みコンテナーの中のセクションに含まれる見出しも同様です。</p>
<p>以下の例では、 h2 要素が <code>column-span: all</code> に設定され、すべての段に段抜きされます。</p>
<p>{{EmbedGHLiveSample("css-examples/multicol/spanning/h2-span.html", '100%', 800)}}</p>
<p>次の例では、見出しが {{HTMLElement("article")}} 要素の中にありますが、期待通りにコンテンツが段抜きになります。</p>
<p>{{EmbedGHLiveSample("css-examples/multicol/spanning/nested-h2-span.html", '100%', 800)}}</p>
<p>段抜きが導入されると、段組みの流れが中断され、段抜きの後で実際に新しい一連の段ボックスを作成して段組みが再開します。内容が段抜き要素をまたぐことはありません。</p>
<h3 id="Limitations_of_column-span" name="Limitations_of_column-span">column-span の制約</h3>
<p>現在の Level 1 仕様書では、 <code>column-span</code> に許可されている値は二つしかありません。 <code>none</code> の値は初期値で、アイテムを段抜きせず、段の中に収めます。 <code>all</code> の値はアイテムがすべての段を段抜きすることを意味します。例えばアイテムを3段中2段に段抜きすることはできません。</p>
<h3 id="Things_to_watch_out_for" name="Things_to_watch_out_for">注意すべきこと</h3>
<p>段抜き要素がマージン、パディング、境界、背景色を持つ他の要素の中にあった場合、次の例に示すように、ボックスの上端が段抜きの上に現れ、残りの部分が段抜きの下に表示されることがあります。このため、要素を段抜きにするときにはいくらか注意が必要で、このシナリオに注意する必要があります。</p>
<p>{{EmbedGHLiveSample("css-examples/multicol/spanning/mpb-span.html", '100%', 800)}}</p>
<p>加えて、コンテンツの後方に段抜き要素が現れる場合は、段組みをするのに十分なコンテンツが段抜きの後にないと、予期しない挙動または望まない挙動をすることがあります。段抜きは注意深く使用し、様々な分割点になったときに望み通りの結果が得られるかを検査してください。</p>
<h2 id="Column_Filling_and_Balancing" name="Column_Filling_and_Balancing">段の充足と均衡</h2>
<p>均衡の取れた段組みは、すべての段のコンテンツの量がほぼ同じになっているものです。充足と均衡は、コンテンツの量が提供された空間の量に一致しない場合、例えばコンテナーの高さが宣言されている場合に発生します。</p>
<p>{{cssxref("column-fill")}} の段組みでの初期値は <code>balance</code> です。 balance の値は、可能な限りすべての段で均衡を取ることを意味します。<a href="/ja/docs/Web/CSS/CSS_Pages">ページ付きメディア</a>のような断片化されたコンテキストにおいては、最後の断片のみで均衡が取られます。つまり、最後のページにおいて一連の段ボックスの均衡が取られます。</p>
<p>均衡を取るための第二の値は <code>balance-all</code> で、断片化されたコンテキストにおいて、最後の断片における段だけでなく、すべての段の均衡を取ろうとします。</p>
<p>この例には、画像とテキストを含む均衡の取れた段があります。画像は分割できないので最初の段に入り、他の段はテキストの量が同じになるように充足されます。</p>
<p>{{EmbedGHLiveSample("css-examples/multicol/balancing/balance.html", '100%', 550)}}</p>
<p> <code>column-fill</code> の他の値として <code>auto</code> があります。この場合、すべての段を同じ量で充足して高さの均衡を図るのではなく、段を順番に充足させます。以下の例では <code>column-fill</code> を <code>auto</code> に変更し、段を段組みコンテナーの高さまで順番に充足させ、最後のいくつかの段は空のままにします。</p>
<p>{{EmbedGHLiveSample("css-examples/multicol/balancing/auto.html", '100%', 550)}}</p>
<p>なお、段の均衡はすべてのブラウザーが対応しているわけではありません。対応させるブラウザーで期待通りの効果が得られるかをチェックしてください。</p>
<p>次のガイドでは、<a href="/ja/docs/Web/CSS/CSS_Columns/Handling_Overflow_in_Multicol">段組みがはみ出しをどう扱うか</a>を、段の中とコンテナーに合う数よりも多くの段ができる場合の両方について学習します。</p>
|
