「ユーザーが印刷することを前提にしたWebサイトを作りたい」

「会議用にWebページを印刷してくれって頼まれたけど、上手く印刷できない！」

と思うことはありませんか？

HTMLで作られてるWebページを印刷しようとすると、変なところで区切られてしまったり、必要なページを1枚にまとめられなかったりすることが多いでしょう。

そこで今回は、HTMLページを見たまま印刷する方法などを解説していきます。

この記事を読んでわかる内容は以下の通りです。

ブラウザ別でHTMLページをキレイに印刷する方法も紹介しますので、会議などでWebページを印刷する機会がある方は、ぜひ最後まで見てくださいね。

HTMLページを印刷用に設定する方法

作成したHTMLページをキレイに印刷できるように設定する場合、CSSを設定する必要があります。

ビジネスマンや学生・教師向けなど、会議や勉強で印刷する可能性が高いWebサイトを作成する場合は、印刷を考慮したCSSを事前に設定しておきましょう。

具体的には、以下の手順で行います。

では、それぞれの手順について詳しく解説していきます。

1.印刷専用のCSSを作成する

まずは、印刷専用のCSSを作成し、HTMLファイルで外部ファイルとして読み込みます。

既存のCSSに設定する方法もありますが、コードが長くなると、どこからどこまでが印刷用のCSSかわかりづらくなって注意しましょう。

今回は、わかりやすいように印刷専用ファイルの「print.css」を用意し、HTMLでファイルを読み込みます。

HTMLに記述するコードは以下の通りです。

<link rel="stylesheet" type="text/css" media="print" href="print.css">

通常ディスプレイ用のCSSにはmedia=”all”を指定しますが、印刷専用ファイルではmedia=”print”を指定します。

2.@media printまたは@media screenを記述する

印刷専用の「print.css」で@media printを指定します。

@media print {
  /* 印刷専用のCSSを記述 */
}

@media print内に記述されたCSSは印刷時のみ有効です。

印刷プレビュー画面の表示を調整したい場合は「@media screen」を指定し、その中にプレビュー画面用のCSSを記述します。

3.改ページを指定する

ヘッダーやフッターを表示させないように指定するなど、印刷に適応させたいスタイリングをしていきます。

特にHTMLページのままだと、おかしなところでページが切れてしまう場合が多いので、「改ページ」を指定しましょう。

改ページは文章の途中でページを区切るという意味で、本文や画像などがページにまたがってしまうのを防止することができます。

改ページを指定するには、指定したい要素に「page-break」プロパティを指定します。

section {
  page-break-after: always;/* 直後で改ページさせる */
  page-break-before: always;/* 直前で改ページさせる */
}

h1要素やp要素などで指定することも可能ですが、テキスト単体ではなく、キリが良い文章などをsectionでまとめて区切るとシンプルです。

HTMLでWebページに印刷ボタンを作ることもできる！

ブラウザーの設定からWebページを印刷することが可能です。

しかし、印刷画面を表示させるまでや印刷の設定をするのが面倒という方もいるでしょう。

そんなユーザーのために、Webページをすぐに印刷できるボタンをHTMLで設置することも可能です。

印刷ボタンは、HTMLに以下のコードを記述するだけで設置できます。

<input type="submit" value="このページを印刷する" onclick="window.print();">

「onclick=”window.print();」を指定することで、印刷プレビュー画面を開くことができるようになります。

HTMLページをキレイに印刷する方法

すでに作成されているHTMLページをキレイに印刷するには、各ブラウザーごとに設定が必要です。

では、それぞれのブラウザーごとの印刷手順を詳しく見ていきましょう。

Google Chromeの場合

Google Chrome上で開いているHTMLページをキレイに印刷するには、以下の手順で印刷します。

Google Chromeで印刷する場合は、「背景グラフィック」にチェックを入れることがポイントです。

他にも「Awesome Screenshot」という拡張機能を利用してキレイに印刷する方法もあります。

Internet Explorerの場合

Internet Explorer上で開いているHTMLページをキレイに印刷するには、以下の手順で印刷します。

HPに設置されている印刷メニューがあれば、それを利用するのがおすすめです。

Internet Explorer上で印刷する場合は、余白を調整する、横向きに設定してみるなど微調整して「印刷プレビュー画面」で確認してから印刷するのがポイントです。

紙で見たい派の人たちに優しいHTMLページの印刷仕様

「Webサイトは、パソコンやスマートフォンで確認するもの」と思っている方が多いでしょう。

しかし、年代や職種などによっては、HTMLで作成したページも紙で確認したいという方もいます。

特に、ビジネスマン向けのホームページやブログサイトなどを作成する場合は、「紙で確認したい」という方向けに印刷用の設定をしておくのがおすすめです。

会議など仕事で使う場合だけでなく、学習用のページなども印刷用に指定したり、印刷専用のボタンを用意しておくとユーザーに優しいWebサイトになりますよ。

＼プログラミングスクールを比較／