【完全ガイド】A4サイズ印刷用のHTMLページ作成：初心者でも簡単にできる！

2024-04-02

A4サイズのHTMLページを作成する方法

準備

まず、以下のファイルを用意します。

index.html：HTMLファイル
style.css：CSSファイル

HTMLファイル

index.htmlファイルには、以下のコードを記述します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>A4サイズのHTMLページ</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>A4サイズのHTMLページ</h1>
  <p>ここにコンテンツを記述します</p>
</body>
</html>

このコードは、基本的なHTMLページの構造を定義しています。

CSSファイル

@media print {
  body {
    margin: 0;
    padding: 0;
    font-size: 12pt;
    line-height: 1.5;
  }

  * {
    box-sizing: border-box;
  }

  h1 {
    font-size: 18pt;
    margin-top: 0;
  }

  p {
    margin: 10px 0;
  }
}

このコードは、印刷時に以下の設定を適用します。

余白を0にする
フォントサイズを12ptにする
行間を1.5にする
ボックスサイズをborder-boxにする
pの余白を上下10pxにする

印刷

上記の設定を適用すると、A4サイズのページにコンテンツが収まるように印刷されます。

補足

上記のコードは基本的な例です。必要に応じて、自由にカスタマイズしてください。
印刷時にヘッダーやフッターを表示したい場合は、HTMLファイルにheader要素やfooter要素を追加してください。
ページ番号を表示したい場合は、CSSファイルに@counterルールを使用してください。

A4サイズのHTMLページのサンプルコード

HTMLファイル (index.html)

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>A4サイズのHTMLページ</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>A4サイズのHTMLページ</h1>
  <p>ここにコンテンツを記述します</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
  <p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
</body>
</html>

CSSファイル (style.css)

@media print {
  body {
    margin: 0;
    padding: 0;
    font-size: 12pt;
    line-height: 1.5;
  }

  * {
    box-sizing: border-box;
  }

  h1 {
    font-size: 18pt;
    margin-top: 0;
  }

  p {
    margin: 10px 0;
  }
}

このコードを参考に、A4サイズのHTMLページを作成してみてください。

A4サイズのHTMLページを作成する他の方法

印刷用CSSフレームワークを使用する

mpdfやPrinceXMLなどの印刷用CSSフレームワークを使用すると、簡単にA4サイズのHTMLページを作成することができます。これらのフレームワークは、印刷時に自動的にページサイズを調整したり、ヘッダーやフッターを追加したりすることができます。

JavaScriptを使用して、印刷時にページサイズを調整したり、ヘッダーやフッターを追加したりすることができます。ただし、JavaScriptを使用するには、プログラミングの知識が必要です。

オンラインツールを使用する

各方法のメリットとデメリット

方法	メリット	デメリット
印刷用CSSフレームワーク	簡単	フレームワークの学習が必要
JavaScript	柔軟性が高い	プログラミングの知識が必要
オンラインツール	コードを書かずに作成できる	機能が限定されている

A4サイズのHTMLページを作成するには、いくつかの方法があります。どの方法を選択するかは、あなたのニーズとスキルレベルによって異なります。

html css printing