@page

/* すべてのページを対象とする */
@page {
  size: 8.5in 9in;
  margin-top: 4in;
}

/* すべての偶数ページを対象とする */
@page :left {
  margin-top: 4in;
}

/* すべての奇数ページを対象とする */
@page :right {
  size: 11in;
  margin-top: 4in;
}

/* `page: wide;` が設定されているすべてのセレクターを対象とする */
@page wide {
  size: a4 landscape;
}

@page {
  /* ページ番号を示す右上マージンボックス */
  @top-right {
    content: "ページ " counter(pageNumber);
  }
}

@page {
  @top-left {
    /* ページマージンプロパティ */
  }
}

@top-left-corner
@top-left
@top-center
@top-right
@top-right-corner
@bottom-left-corner
@bottom-left
@bottom-center
@bottom-right
@bottom-right-corner
@left-top
@left-middle
@left-bottom
@right-top
@right-middle
@right-bottom

<button>ページを印刷</button>
<article>
  <section>
    <h2>ヘッダー 1</h2>
    <p>段落 1 です。</p>
  </section>
  <section>
    <h2>ヘッダー 2</h2>
    <p>段落 2 です。</p>
  </section>
  <section>
    <h2>ヘッダー 3</h2>
    <p>段落 3 です。</p>
  </section>
</article>

const button = document.querySelector("button");

button.addEventListener("click", () => {
  window.print();
});

@page {
  size: landscape;
  margin: 2cm;
}

section {
  page-break-after: always;
  break-after: page;
}

@media print {
  button {
    display: none;
  }
}

body {
  font-family: "Helvetica", sans-serif;
  background-color: silver;
}

article {
  width: 100%;
}

section {
  display: grid;
  background-color: white;
  border-radius: 0.6rem;
  justify-items: center;
  padding: 1rem;
  width: 50%;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
  margin: 0 auto;
  margin-block-end: 1rem;
  border: 1px dashed;
}