まめわざのヘルプページが印刷に対応しました。印刷ボタンから、章・節ごとの印刷が可能です。
ここでは、ヘルプページの印刷方法の紹介のほか、ホームページの印刷対応策について考えてみます。

ヘルプページの章・節の見出しに設置された「印刷用」リンクを押すと印刷ページに移動します。
印刷ページは章・節に分かれており、必要な章・節のみを印刷できます。
また、上部の選択欄で文字サイズを変更できます。

ホームページを閲覧するブラウザ（インターネットエクスプローラーなど）には印刷機能が備わっています。
画面で見るのに最適なホームページの印刷対策はどのようなものでしょうか。ここでは大局的な視点から、4つの方法にまとめます。

ホームページをはじめて印刷する、という方は今となっては少数のはずです。
ホームページを印刷する人のほとんどが、過去に印刷した経験を持ち、画面上のページと印刷したページとの差異に落胆したことがあるでしょう。
「ホームページが印刷向けではない」あるいは「印刷したホームページは画面上と違う」ことは広く認知されていると思われます。

一方で、スマホの普及により、ホームページを手に持ったり、外に持ち出すことが可能になりました。
「手に持って読みたい」「パソコンのないところで読みたい」という理由で印刷していた人に、スマホは印刷しない選択肢を与えたと言えます。

更に、昨今のブラウザは印刷時にページを自動で縮小するなど、最低限の印刷対応を自動で行います。

以上のような理由から、印刷用ページの需要がどれほどかを考え、「印刷対策をしない」という選択肢も検討しましょう。
「印刷対策をしない」ことで、設定によっては見たままで印刷することも可能になるという思わぬ副産物もあります。

ホームページのデザイン部分を司るCSSだけを、画面用・印刷用で使い分けることが可能です。代表的な方法としては次の2つがあります。

<link rel="stylesheet" type="text/css" media="print" href="印刷用のスタイルシート.css" />　

@media only print {
印刷用のスタイル定義
}　

画面で見るページと印刷用ページが大きく異ると、困惑させてしまうデメリットがあります。
「印刷プレビュー」ボタンを押さないと印刷前に内容確認ができないIEでは特にそうです。
印刷用のCSSをオフにすることも容易ではありません。
最も手軽な方法のため、開発者が採用しやすい方法ですが、逆に最も中途半端な対策という見方もできます。この対策だけをするのであれば、「何もしない」という選択肢や、後述するサーバーサイドでのCSSの切り替えも検討しましょう。

HTMLとCSSの両方を印刷に最適化します。作成の手間がありますが、ホームページを印刷対応させたい場合はベストの選択肢と言えます。
CSSだけを印刷対応させる場合と違い、画面上のページと印刷したページの差異が少なく、印刷した方の要求を満たすことができます。

サーバーサイドスクリプトが使えるのであれば、引数によってCSSを切り替えることで、CSSを印刷対応させるだけにもかかわらず、印刷用ページを用意することも可能です。これにより、事前に中身を確認してから印刷が可能です。

<link rel="stylesheet" type="text/css" media="print" href="印刷用のスタイルシート.css" />　

<link rel="stylesheet" type="text/css" href="<?php echo $_GET["print"] ? "印刷用" : "画面用"; ?>のスタイルシート.css" />　

まめわざでは今回、選択肢3を採用し、印刷用のページでのみ「文字サイズの変更」が容易にできるようにしました。

PDFを作成することで、レイアウトや改ページの位置を完全に制御できます。
更にHTMLでは対応が難しいヘッダー・フッターも指定できます。
新しくページを作成するほどの手間がかかるため、印刷されやすいページ（アクセス・地図のページなど）だけ印刷用のPDFを用意するのがおすすめです。

ページ内の要素（タグ）に印刷用紙を超えるwidthが指定されている場合、主要なブラウザは全体を縮小して印刷します。
これは、印刷すると読みづらくなる元凶の1つであり、印刷に最適化する場合は避けなければいけません。
最も簡単なのは、レイアウトとしてwidthを使わず、リキッドレイアウト（画面幅いっぱいに広がるレイアウト）で作成することです。
また、width指定が必要が画像タグは、mmでも設定できるので、少なくともA4の短辺である210mm（余白を考慮すれば150mmほど）を超えないサイズで指定しましょう。

一方、CSSで
@page { size: A5 landscape; }
のようにすると「A5の横」で印刷することを指定できます。
この指定は多くのブラウザで無視されたり（印刷設定が優先されたり）、印刷ページの指定変更によって変更されます。よって、@page{}に依存してページを構成するのは避けましょう。

背景色・背景画像は多くのブラウザで無視されます。
ブラウザの設定によって背景色・背景画像を印刷することは可能です（特にChromeでは容易）。しかし、印刷する方に設定を求めるのは得策ではないので、「背景色・背景画像は使わない」を前提に作成するのがおすすめです。
一方、imgタグはいずれのブラウザでも印刷されるので、印刷対象の画像はimgタグで設置します。

画像の途中で改ページが入らないようにブラウザが自動で調整をしてくれます。
しかし、画像にfloatを入れたり、display:flexやtableで並列にしたりすると、この調整が効かなくなります。
画像はなるべく縦列配置で使用し、並列の際は画像のサイズをあまり大きくしない（改ページが入りづらくする）のがおすすめです。

文字色・字体はいずれも指定が可能です。
モノクロ印刷を考えれば、色に意味を持たせることは避けたほうが良いでしょう（「赤字の箇所に注目」などはやめる）。
背景に暗い色を配置し、文字色を明るい色にしている場合、背景色がなって文字が読みづらくなるため、文字色が自動補正されます。それでも依然として読みづらい場合もあるため、「背景色・背景画像は使わない」を前提に、明るい文字の色は避けましょう。

CSSによる文字の拡大は有効です。
ブラウザの拡大機能は無視されますが、印刷設定ページで文字サイズを指定できます。しかし、設定を求めることは得策ではないので、アクセシビリティに配慮した文字サイズの調整機能を提供する場合は、CSS側で行うのがおすすめです。
まめわざの印刷用ヘルプでは、選んだ文字サイズをbodyタグに適用して全体の文字サイズを変えるJavascriptを設置しています。

CSSでは、ある要素の前後に改ページを入れるpage-break-before・page-break-after、ある要素内での改ページを避けるために利用するpage-break-inside:avoidが用意されています。
しかし、印刷ページで文字を拡大することによって、改ページが意図しない場所に挿入されてしまいます。
改ページに頼らずにページを構成した方が汎用性が高まります。

「スマホからの直接印刷への対策は？」
それを考える前にスマホから直接印刷をする需要があるのか考えてみます。
まめわざでは、次の2点の理由から、スマホからの直接印刷はほとんど需要がなく、現在のところ対策は考えなくてもいいとではないかと考えています。