CSS｜orphans（オーファン）・widows（ウィドー）印刷時の段落行の制御

ホームページ（ウェブサイト）制作において、画面上のデザインだけでなく、印刷プレビューやPDF出力など、紙の媒体やページ区切りが存在する環境で文書の美しさを保つことは非常に重要です。段落の途中で行が不自然に分断されてしまう現象を防ぐために使用されるのが、CSSプロパティの「widows」と「orphans」です。

「orphans（オーファン）」は、段落の最初の数行だけがページの最下部に残ってしまい、残りの行が次のページに送られてしまう現象（孤児行）を防ぐためのプロパティです。例えば、指定した数値が「3」であれば、ページの一番下には最低でも3行分が揃っていなければ改ページを行わないというルールを定義できます。

一方、「widows（ウィドー）」は、段落の最後の1行だけが次のページの最上部にポツンと取り残されてしまう現象（未亡人行）を防ぐためのプロパティです。こちらも同様に、次のページに持ち越される行数の最小値を指定することで、不自然な行の分断を防ぎます。

より専門的には、これらのプロパティを適切に設定して文書の体裁を整えることは、ユーザビリティの向上とSEO（検索エンジン最適化）において大きな意味を持ちます。レイアウトが乱れた印刷物や読みにくいページ構成は、閲覧者にストレスを与え、ホームページ（ウェブサイト）全体の信頼性を損なう原因になります。本ページでは、それぞれのプロパティの基本的な記述ルールから、多様な出力環境に対応する実践的なレイアウト制御の手法について詳しく解説します。

印刷やページ分割におけるレイアウト制御と品質向上

事業用のホームページ（ウェブサイト）において、ユーザーが情報を印刷して社内で共有したり、資料としてダウンロードしたりする場面を想定することは、質の高いサービス提供につながります。ここでは、行の分断を制御する各プロパティの具体的な効果と、適切な設定手法について解説します。

orphansを用いたページ下部での行分断防止

「orphans」プロパティを活用することで、ページの最下部に1行だけが取り残されるような見苦しいレイアウトを回避できます。文章のまとまりが途中で途切れないように制御されたページは、視覚的な美しさを保つだけでなく、読み手が内容をスムーズに理解するのを助けます。細かい部分への配慮が、ホームページ（ウェブサイト）の品質を高める要素となります。

widowsによる次ページ冒頭の孤立行回避

「widows」プロパティを設定することで、次のページの最上部に前ページの残り1行だけがポツンと表示される状態を防ぎます。特に長文のレポートや利用規約などを掲載する事業用ホームページ（ウェブサイト）において、こうした組版のルールをCSSで正しく制御することは非常に重要です。検索エンジンが直接評価する項目ではありませんが、すべての閲覧環境で優れた体験を提供することが結果としてサイトの評価につながっていきます。

orphans（オーファン）

orphans: ;

ホームページ制作（ウェブサイト制作）の際に使用するCSSプロパティ「orphans」についてのご説明です。

ホームページ制作・作成において、orphans（オーファン）は、印刷時の「改ページ時の前ページ」の最低行数を指定するプロパティです。

orphans 改ページ時の前ページの最低行数を指定

orphansは、改ページ時（印刷が複数ページにまたがって要素の途中で改ページ）の前ページの最低行数を指定します。オーファン。

orphans : 数値

前ページ最低行数を整数値で指定（初期値　2）

印刷用スタイルシート（Print CSS）におけるorphansの役割

ホームページ（ウェブサイト）の情報を印刷して共有したり、紙媒体として保管したりするニーズは、事業用途を中心に現在でも多く存在します。PDFを用意するのも有効な手段ですが、既存のWebページをそのまま印刷しても美しく読みやすいレイアウトを保つためには、印刷用スタイルシート（メディアクエリの @media print）の記述が非常に重要です。ここで力を発揮するのが、orphans（オーファン）プロパティです。

「孤児行」を防ぎ、文書の読みやすさを維持する

orphansプロパティは、段落の途中で改ページが発生した際に、「前のページ」の最後に取り残される最低行数を制御します。例えば、長文の段落があるとき、ページの下部にたった1行だけが残されて改ページされてしまうと、読者にとって非常に読みにくく、文書としての美しさが損なわれます。印刷や出版の用語では、このようにページの末尾に取り残された1行を「孤児（orphan）」と呼びます。

CSSで orphans: 3; のように数値を指定すると、もし改ページによって前のページに1〜2行しか残らないようなレイアウト計算になった場合、ブラウザは自動的に段落全体を次のページに押し出すか、改ページ位置を調整して最低でも3行が前のページに収まるように制御してくれます。

widowsプロパティとの組み合わせによるレイアウト最適化

より専門的には、orphansプロパティ単独ではなく、対となる「widows（ウィドウ）」プロパティと組み合わせて指定することが推奨されます。orphansが「前のページの最後に残る行数」を制御するのに対し、widowsは「次のページの最初に送られる行数（後家行）」を制御します。

たとえば、印刷用スタイルとして以下のように指定します。

@media print {
p {
orphans: 3;
widows: 3;
}
}

このように設定することで、段落の分断がより自然な形になり、印刷物としてのクオリティが大きく向上します。ホームページ（ウェブサイト）上の視覚的なデザインだけでなく、印刷時のユーザー体験（UX）にまで気を配ることで、事業用ホームページとしての信頼性と実用性をさらに高めていくことができます。

orphans: ;

ホームページ制作・Webデザインの1ポイント

印刷されることを想定したページは通常のHTMLでのページよりもPDFファイルなどのほうが適しています。HTMLはブラウザによって少しWebデザインが異なってしまうことがありますが、画像やPDFは各要素の表現やレイアウトが固定的です。しかしながら画像は、細かなテキストが荒くなることもありますので、そういったことを避けるためにはPDFが最も良いでしょう。その場合は、PDFをサーバー上にアップロードして、URLを内部リンクで設定します。

widows（ウィドー）

widows: ;

ホームページ制作（ウェブサイト制作）の際に使用するCSSプロパティ「widows」についてのご説明です。

ホームページ制作・作成において、widows（ウィドー）は、改ページ時の次ページの最低行数を指定します。

widows 改ページ時の次ページの最低行数を指定

CSSプロパティのwidowsは、改ページ時の次ページの最低行数を指定します。ウィドー。

widows : 数値

改ページ時、次ページの最低行数を指定（整数値）（初期値　2）

印刷時のレイアウト制御とwidowsプロパティの重要性

CSSプロパティ「widows（ウィドー）」は、画面上の見栄えを整えるだけでなく、ホームページ（ウェブサイト）を紙に印刷する際のレイアウトを制御するために非常に役立ちます。事業用のホームページにおいては、ユーザーがページを印刷して手元で確認するケースも少なくありません。ここでは、より専門的にはこのwidowsプロパティをどのように活用し、印刷時のユーザビリティを高めていくかについてお伝えします。

印刷時の「孤立行」を防ぐ仕組み

長い文章を印刷した際、段落の最後の1行だけが次のページの先頭に押し出されてしまうことがあります。これをタイポグラフィの分野では「ウィドー（孤立行）」と呼びます。たった1行だけが新しいページに取り残されると、読み手が文章のつながりを把握しづらくなり、結果として資料としての読みやすさを大きく損ないます。

この問題を防ぐのがwidowsプロパティです。例えば「widows: 3;」と指定しておくと、段落がページをまたぐ際、必ず次のページに最低3行以上の文章が配置されるようにブラウザが自動調整を行います。もし3行に満たない場合は、前のページから余分に文章を押し出して、次ページの先頭にまとまった行数が表示されるようにレイアウトを計算し直します。

orphansプロパティとの併用による完全な制御

widowsが「次のページの先頭」に残る行数を指定するのに対し、「前のページの最後」に残る最低行数を指定するのが「orphans（オーファンズ）」です。段落の最初の1行だけが前のページの末尾にポツンと残ってしまう状態（オーファン）を防ぐためのものです。

印刷品質を高めるためには、このwidowsとorphansをセットで設定することが基本となります。両方に適切な数値（一般的には2〜3）を指定しておくことで、ページをまたぐ段落が不自然に分断されるのを防ぐことができます。

ホームページは画面上で閲覧されるだけでなく、印刷して共有されることも想定した設計が求められます。印刷用スタイルシート（@media print）内にこれらのプロパティを記述しておくことで、どのような環境でも美しく読みやすい状態を提供でき、事業の信頼性向上にもつながっていきます。

widows: ;

ホームページ制作・Webデザインの1ポイント

ホームページ制作やWebデザインを考える際に、色彩やレイアウトがメインとされている印象がありますが、ホームページはどちらかというとワードファイルに近い文書ファイルです。見栄えとしてのWebデザインよりも、設計という意味でのWebデザインを考慮し、ユーザビリティ・操作性やSEOなどにも工夫していく必要があります。

ホームページ（ウェブサイト）制作・作成に役立つCSS3のプロパティ一覧は
⇒css3 property reference index ホームページ制作の装飾プロパティ

ホームページのCSS・スタイルシート編集方法

ホームページ制作やホームページ修正を行う際のCSS・スタイルシート編集方法について。ホームページは基本的にHTMLで構成されています。一方、その外観・デザインを設定するのはCSS（Cascading Style Sheets）・スタイルシートです。ページの基本構成はHTMLで、レイアウトやカラーの設定といった外観面はCSSで設定されています。

ホームページのCSS・スタイルシート編集方法