<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
<style>
@media screen {
  html {
    background: #666;
  }

  .pagedjs_pages {
    display: flex;
    flex: 0;
    justify-content: center;
    flex-wrap: wrap;
    width: calc(var(--pagedjs-width));
    margin: 0 auto;
  }

  .pagedjs_page {
    margin: 5mm;
    border: 1px solid #333;
    background: #fff;
  }
}

@page {
  size: A4;
  margin: 10mm;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  line-height: 1.5;
}

.page-break {
  break-after: page;
}
</style>
<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
</head>
<body>
<h1>タイトル</h1>
<p>文章が入ります。</p>
</body>
</html>

HTMLでA4サンプルページ 1

改ページをする際は.page-breakをタグに付けます。

以下のように空divに付けると改ページの箇所がわかりやすくなります。

<h2>見出し1</h2>
<p>文章が入ります。</p>
<div class="page-break"></div>
<h2>見出し2</h2>
<p>文章が入ります。</p>

HTMLでA4サンプルページ 2

利用規約同意書を作成

実際のA4ページの完成形をイメージしやすいよう「利用規約同意書」のページを作成しました。

テキストを追加後、前述のCSSに加え、以下のようなCSSを追記して見た目を整えます。

h1 {
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid #000;
  text-align: center;
}

h2 {
  margin-top: 2rem;
}

.accept {
  margin-top: 2rem;
  padding: 1rem 2rem;
  border: 1px solid #000;
}

.accept-title {
  margin-bottom: 0.5rem;
}

.accept-date {
  margin: 0 1rem 0.5rem 0;
  text-align: right;
}

.accept-name {
  position: relative;
  width: 50%;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #000;
}

.accept-name::before {
  content: "印";
  position: absolute;
  right: 1rem;
}

完成すると下図のようになります。

これをテンプレートとしてコピーして利用すれば誰でも簡単にPDFの代わりにHTMLでA4ページを作成することができます。

利用規約同意書サンプル