--- title: orphans slug: Web/CSS/orphans tags: - CSS - CSS プロパティ - CSS 断片化 - Reference - Web translation_of: Web/CSS/orphans ---
{{CSSRef}}

orphansCSS のプロパティで、ページ、領域、最下部に表示されるブロックコンテナーの最小行数を設定します。

/* <integer> 値 */
orphans: 2;
orphans: 3;

/* Global values */
orphans: inherit;
orphans: initial;
orphans: unset;

組版において、 orphan とは段落の最初の行がページの末尾に単独で現れることです。 (段落は次のページへ続きます。)

{{cssinfo}}

構文

{{cssxref("<integer>")}}
区切りの前の新しい断片の末尾に残すことができる最小行数です。値は正の数である必要があります。

形式文法

{{csssyntax}}

HTML

<div>
  <p>これは幾らかのテキストを含む最初の段落です。</p>
  <p>これは最初の段落よりも多くのテキストを含む第二の段落です。これは widow がどの様に動作するのかを示すために用います。</p>
  <p>これは第三の段落です。これは最初の段落よりも少しだけ長いテキストを含んでいます。</p>
</div>

CSS

div {
  background-color: #8cffa0;
  height: 150px;
  columns: 3;
  orphans: 3;
}

p {
  background-color: #8ca0ff;
}

p:first-child {
  margin-top: 0;
}

結果

{{EmbedLiveSample("Example", 380, 150)}}

仕様書

仕様書 状態 備考
{{SpecName('CSS3 Fragmentation', '#widows-orphans', 'orphans')}} {{Spec2('CSS3 Fragmentation')}} orphans をページ、領域、段など、断片の種類によらず適用するように拡張
{{SpecName('CSS2.1', 'page.html#break-inside', 'orphans')}} {{Spec2('CSS2.1')}} 初回定義

ブラウザーの対応

{{Compat("css.properties.orphans")}}

関連情報