【CSS Modules】widowsプロパティの使い方
widowsプロパティの使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
widowsプロパティは、ページ分割されるコンテンツにおいて、ブロック要素の先頭行が次ページや次カラムの冒頭に単独で孤立してしまうのを防ぐための最低行数を保持するプロパティです。このプロパティは、特に印刷時や複数カラムレイアウトなど、内容が複数のボックスに分割されて表示される場合にその効果を発揮します。
設定できる値は正の整数値で、これはブロック要素が分割される際に、次ページや次カラムの先頭に表示されるべき最低行数を指定します。例えば、widows: 3;と設定した場合、ある段落がページ分割される際、その段落の冒頭の行が次ページや次カラムに送られることになったとき、最低でも3行がまとまって表示されるように調整されます。これにより、行がたった1行だけ孤立して表示されるような、視覚的に不自然な状況を回避し、テキストの可読性を向上させることができます。
もし、指定された行数よりも少ない行数しか次ページや次カラムに送られない場合、CSSエンジンは分割位置を調整し、指定された行数が常にまとまって表示されるようにするか、あるいはそのブロック要素全体を次ページや次カラムに送るなどの処理を行います。このプロパティは、ブロック要素の末尾行が前ページや前カラムに孤立するのを防ぐorphansプロパティと対をなすもので、これらを適切に利用することで、より整頓されたレイアウトを実現することが可能です。
公式リファレンス: widows
構文(syntax)
1widows: <integer>;
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません