widowsプロパティの説明
CSSのwidowsプロパティは、ブロックが区切られた場合に次の行の先頭に表示される内容の最小行数を設定します。例えば、印刷時の改ページや段組みのカラムが区切られた時に、段落の途中でブロックが寸断されることがあります。そのような状態を断片化（フラグメント）と言いますが、次のページやカラムに送り込まれた断片の最小行数をwidowsで指定できます。
ウィドウ（widow）とは組版業界で使われる言葉です。段落が前のページから続いている場合に、最後の行がページの先頭に単独で現れることを意味します。
似たような機能にorphansがあります。こちらは、ページや段組みカラムの最下部に表示されるブロックの最小行数を制御します。
widowsに指定できる値
<integer>- 新しい断片の先頭に残すことができる最小行数です。正の数値のみが使用できます。初期値は
2です。
widowsの使い方とサンプルコード
widowsプロパティの構文は以下の通りです。
/* <integer>値 */
widows: 1;
widows: 2;
widows: 4;
/* グローバル値 */
widows: inherit;
widows: initial;
widows: revert;
widows: unset;
widowsの実例
それでは実際にwidowsプロパティの書き方を見ていきましょう。以下の例は、columnsプロパティによって段組み指定を行った要素にテキストを配置した場合の比較です。
widowsの値は、断片化した要素の内容が次の段に送り込まれた時に残す最小値です。ここで示す行数によって、最後の行を要素を前の段に残すか、次の段に送り込むのか調整を行えます。
resizeに対応しているブラウザであれば、コンテナの幅を変更して挙動を確認できます。右下に表示されているハンドルを掴んで、段落を狭めてみましょう。
<div class="samp_box">
<section id="item_1">
<h1>widows: 1;</h1>
<p>
【１】これは段組みが適用されたブロックレベルの要素です。
【２】段落の中で改行を行っています。これは二行目に書かれた内容です。
【３】段に区切りが発生した場合に、次の段に表示される行数を確かめてみましょう。
</p>
</section>
<section id="item_2">
<h1>widows: 2;</h1>
<p>
【１】これは段組みが適用されたブロックレベルの要素です。
【２】段落の中で改行を行っています。これは二行目に書かれた内容です。
【３】段に区切りが発生した場合に、次の段に表示される行数を確かめてみましょう。
</p>
</section>
<section id="item_3">
<h1>widows: 3;</h1>
<p>
【１】これは段組みが適用されたブロックレベルの要素です。
【２】段落の中で改行を行っています。これは二行目に書かれた内容です。
【３】段に区切りが発生した場合に、次の段に表示される行数を確かめてみましょう。
</p>
</section>
</div>
.samp_box {
overflow: auto;
padding: 0 1rem 1rem;
background-color: #eee;
resize: horizontal;
}
.samp_box > section {
overflow: auto;
margin: 1rem 0 0;
padding: 0 1rem 1rem;
background-color: #fff;
}
section > h1 {
margin: 1rem 0 0;
font-size: 1rem;
}
section > p {
margin: .5rem 0 0;
columns: 3 100px;
column-rule: 1px solid;
font-size: 0.75rem;
}
#item_1 > p {
widows: 1;
}
#item_2 > p {
widows: 2;
}
#item_3 > p {
widows: 3;
}