HTMLを上手に改ページしてきれいに印刷する方法を現役エンジニアが解説【初心者向け】
初心者向けにHTMLを上手に改ページしてきれいに印刷する方法について解説しています。印刷時の改ページを指定するにはbreak-beforeやbreak-afterプロパティを使用します。実際に印刷した場合に改ページされているかサンプルで確認しましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
HTMLを上手に改ページしてきれいに印刷する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。
なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。
今回は、HTMLに関する内容だね！
どういう内容でしょうか？
HTMLを上手に改ページしてきれいに印刷する方法について詳しく説明していくね！
お願いします！
改ページとは
文章の途中でページを区切ることを「改ページ」と呼びます。
一般的なWebページは、1つのページが連続し、スクロールをして表示させるためページという考え方がありません。
そして、WebページでもCSSを適用することで改ページを行うことが可能です。
それに対してWordなどの文章作成ソフトで作成したドキュメントは、文章の途中でページを区切ってドキュメントをレイアウトして表示します。
改ページを設定する方法
改ページを設定するには break-before または break-after プロパティを使用します。
- break-before：現在の要素の前で改ページを行います
- break-after：現在の要素の後で改ページを行います
以前は page-break-before または page-break-after というプロパティで改ページを指定していたものの、古いプロパティとなったので break-before または break-after を使うようにしましょう。
改ページありなしで印刷して違いを見てみよう
今回のサンプルプログラムでは、改ページありなしによる印刷の違いを確認します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>sample</title>
<style>
h1 { border-bottom: 5px; }
h2 { border-bottom: 1px;}
th, td { border: solid 1px black; }
</style>
</head>
<body>
<h1>レポート１</h1>
<h2>見出１</h2>
<table>
<thead>
<tr>
<th>単価</th>
<th>数量</th>
<th>金額</th>
</tr>
</thead>
<tbody>
<tr>
<td>1,000</td>
<td>20</td>
<td>20,000</td>
</tr>
<tr>
<td>5,000</td>
<td>100</td>
<td>500,000</td>
</tr>
<tr>
<td>3,000</td>
<td>30</td>
<td>90,000</td>
</tr>
</tbody>
</table>
<div class="pagebreak"></div>
<h1>レポート２</h1>
<h2>見出２</h2>
<table>
<thead>
<tr>
<th>単価</th>
<th>数量</th>
<th>金額</th>
</tr>
</thead>
<tbody>
<tr>
<td>2,000</td>
<td>22</td>
<td>44,000</td>
</tr>
<tr>
<td>5,000</td>
<td>11</td>
<td>55,000</td>
</tr>
<tr>
<td>3,300</td>
<td>20</td>
<td>66,000</td>
</tr>
</tbody>
</table>
</body>
</html>
実行結果は以下のようになります。また印刷した結果も同様です。
次に<style> ～ </style>の間に以下のコードを追加しましょう。
.pagebreak {
break-after: page;
}
実行結果は先ほどと変わらないものの、印刷を行うと途中で改ページが行われることが確認可能です。
執筆してくれたメンター
| 太田和樹（おおたかずき）
ITベンチャー企業のPM兼エンジニア 普段は主に、Web系アプリケーション開発のプロジェクトマネージャーとプログラミング講師を行っている。 守備範囲はフロントエンド、モバイル、サーバサイド、データサイエンティストと幅広い。 その幅広い知見を生かして、複数の領域を組み合わせた新しい提案をするのが得意。 開発実績：画像認識技術を活用した駐車場混雑状況把握（実証実験）、音声認識を活用したヘルプデスク支援システム、Pepperを遠隔操作するアプリの開発、大規模基幹系システムの開発・導入マネジメント。 地方在住。仕事のほとんどをリモートオフィスで行う。通勤で消耗する代わりに趣味のDIYや家庭菜園、家族との時間を楽しんでいる。 |
HTMLを上手に改ページしてきれいに印刷する方法がよくわかりました！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、参加してみてください。
