CSSのwidowsでページやカラムの先頭に残す最小行数を指定する方法をわかりやすく解説

widows プロパティは、段落や文章が改ページされるときに、ページの最初に残すべき行数を指定します。特にページレイアウトや印刷に関連したスタイルで使用され、孤立行（widow）を防ぐのに役立ちます。

widows プロパティの値とその効果の一覧

• 1: ページ上に1行だけ残すことを許可します。
• 2以上: ページ上に指定した行数だけ残すように強制します。

このプロパティは、ブラウザで対応されている場合、印刷メディアやページレイアウトにおいて効果を発揮しますが、ウェブ上での表示には限定的な効果(見た目は変らない)しかありません。

widowsが効かない時の原因と対策

windowsプロパティがJavaScriptのグローバルwindowオブジェクトと混同されている

windowsという名前のプロパティは、CSSの標準プロパティには存在せず、JavaScriptのグローバルwindowオブジェクトと混同されることがあります。windowはブラウザのウィンドウやタブに関する情報を持つオブジェクトであり、CSSには関係がありません。

対策: windowsを使用しようとしている場合は、正しいプロパティやJavaScriptオブジェクト（window）を使用しているか確認します。例えば、JavaScriptでブラウザウィンドウのサイズを操作したい場合はwindow.innerWidthやwindow.innerHeightを使用します。

共通するCSSコード

.css-sample-container {
  border: 1px solid black;
  padding: 10px;
  margin-bottom: 20px;
  width: 300px;
}

.css-sample-content {
  font-size: 16px;
  color: black;
}
  

widows: 1

この値は、ページの最後の行として1行のみが残ることを許可します。

HTMLコード

<div class="css-sample-container css-sample-widows-1">
  <p class="css-sample-content">長いテキストが続き、途中でページが分割される場合に、最後のページに1行だけ残ってしまうことが許されます。</p>
</div>
  

CSSコード

.css-sample-widows-1 {
  widows: 1;
}
  

表示結果

widows: 3

この値では、ページの最後の行として少なくとも3行が残るように強制します。

HTMLコード

<div class="css-sample-container css-sample-widows-3">
  <p class="css-sample-content">長いテキストが続き、途中でページが分割される場合、最後のページに少なくとも3行が残るように強制されます。</p>
</div>
  

CSSコード

.css-sample-widows-3 {
  widows: 3;
}
  

表示結果

まとめ

• widows: 1: ページの最後に1行だけが残ることを許可します。
• widows: 3: ページの最後に少なくとも3行残すことを強制します。