【CSS Modules】orphansプロパティの使い方
orphansプロパティの使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
orphansプロパティは、CSSにおいて、印刷物やページングメディアでコンテンツが表示される際、段落などのブロック要素がページや段の途中で改ページされる場合の、行の表示ルールを制御するためのプロパティです。具体的には、このプロパティは、改ページが発生したときに新しいページの先頭に「孤立して」残ってしまう行の最小数を指定します。
例えば、長い段落がページの終わりで途切れてしまい、残りの数行が次のページの先頭に表示されることがあります。このとき、次のページの先頭に表示される行が少なすぎると、文章の流れが不自然に見え、読みにくくなる場合があります。orphansプロパティに整数値を設定することで、指定した行数よりも少ない行数が新しいページの先頭に孤立して表示されることを防ぎます。これにより、不自然な改ページによる段落の分断を避け、コンテンツの可読性と視覚的な連続性を向上させることができます。
このプロパティは、特にレポートや書籍、オンラインドキュメントの印刷プレビューなど、改ページが頻繁に発生するコンテンツで重要な役割を果たします。通常、orphans: 2;のように設定され、少なくとも2行がページの先頭に残るようにすることで、見た目のバランスを保ちます。この設定は、ユーザーがコンテンツをスムーズに読み進めるための配慮であり、印刷結果の品質を高めるために利用されます。
公式リファレンス: orphans
構文(syntax)
1orphans: <integer>;
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません