CSSのorphansで段落の冒頭行数を制御し、ページレイアウトを調整する方法をわかりやすく解説

.css-sample-container {
      width: 100%;
      margin: 20px 0;
      padding: 10px;
      border: 2px solid #000;
      overflow: hidden;
    }

    .css-sample-paragraph {
      font-size: 16px;
      line-height: 1.5;
      border: 1px solid #ccc;
      padding: 10px;
      max-width: 600px;
      margin: 0 auto;
    }
  

<div class="css-sample-container">
      <p class="css-sample-paragraph css-sample-orphans-2">
        ここに段落テキストが表示されます。CSSのorphansプロパティは、ページやコンテナ内で段落を分割する際に、上部に残される行数を制御します。このプロパティは、特に印刷メディアでの視認性を高めるために使用されます。
      </p>
    </div>
  

.css-sample-orphans-2 {
      orphans: 2;
    }
  

<div class="css-sample-container">
      <p class="css-sample-paragraph css-sample-orphans-3">
        ここに段落テキストが表示されます。CSSのorphansプロパティは、ページやコンテナ内で段落を分割する際に、上部に残される行数を制御します。このプロパティは、特に印刷メディアでの視認性を高めるために使用されます。
      </p>
    </div>
  

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

<div class="css-sample-container">
      <p class="css-sample-paragraph css-sample-orphans-4">
        ここに段落テキストが表示されます。CSSのorphansプロパティは、ページやコンテナ内で段落を分割する際に、上部に残される行数を制御します。このプロパティは、特に印刷メディアでの視認性を高めるために使用されます。
      </p>
    </div>
  

.css-sample-orphans-4 {
      orphans: 4;
    }