博士

やっほー、ロボ子！ウェブコンテンツの印刷スタイルについて話すのじゃ！

ロボ子

博士、こんにちは。ウェブコンテンツを印刷用に最適化するのですね。なぜそれが重要なのでしょうか？

博士

ふむ、良い質問じゃな！ウェブコンテンツを印刷用に最適化すると、アクセシビリティが向上するのじゃ。画面での閲覧が難しい人にも情報を提供できるし、旅行中やネットがない場所でも読めるからの。

ロボ子

なるほど。それに、企業によってはコンテンツのハードコピーを保持することが法的に義務付けられている場合もあるのですね。

博士

そうそう！それに、印刷スタイルの知識は電子書籍のデザインにも応用できるぞ！

ロボ子

具体的には、どうやって印刷スタイルを適用するんですか？

博士

`@media print`メディアクエリを使うのじゃ！これで印刷時にだけ適用されるスタイルを指定できるぞ。例えば、`<link>`タグの`media="print"`属性を使ったり、CSSファイル内で`@media print`を使うのじゃ。

ロボ子

なるほど、メディアクエリですね。印刷スタイルのテストはどうすれば良いですか？

博士

ブラウザの開発者ツールを使うのじゃ！印刷プレビューをシミュレートして確認できるぞ。でも、シミュレーションは完璧じゃないから、実際の印刷結果とは違うこともあるから注意じゃ。

ロボ子

物理的な単位を使うと正確なサイズ指定ができるんですね。`cm`、`mm`、`in`などを使うと。

博士

その通り！相対単位は印刷時にスケールされちゃうから、絶対単位を使うとフォントサイズや要素間の距離をしっかり確保できるのじゃ。

ロボ子

`@page` at-ruleを使うと、ページの余白や向き、サイズを設定できるんですね。A4とかletterとか。

博士

そうじゃ！でも、ブラウザが勝手にヘッダーやフッターを追加することもあるから、そこも注意じゃな。

ロボ子

改ページの位置を制御するには、`break-after`、`break-before`、`break-inside`プロパティを使うんですね。

博士

`auto`、`avoid`、`page`などの値を指定して調整するのじゃ。`page-break-*`プロパティは非推奨だけど、まだ使えるみたいじゃな。

ロボ子

孤立点と寡婦点を防ぐために、`orphans`プロパティと`widows`プロパティを使うんですね。

博士

`orphans`は次のページに引き継がれる行数を指定して、孤立点を防ぐのじゃ。`widows`はページの先頭にある行数を制御するけど、Firefoxでは使えないみたいじゃ。

ロボ子

`box-decoration-break`プロパティを使うと、ページを跨ぐ要素のボーダーを適切に表示できるんですね。

博士

そうじゃ！`-webkit-box-decoration-break`も使うと、WebKitでの互換性が向上するぞ。

ロボ子

印刷されたページはインタラクティブではないから、リンクのURLを`content`属性で表示する必要があるんですね。

博士

その通り！フォームのラベルが入力時に消えるインタラクションも、印刷時には機能しないから注意じゃ。スクロールコンテナ内のコンテンツは、`overflow: visible`を設定して全部表示させることを考えると良いぞ。

ロボ子

印刷時には不要なナビゲーションバーやフッターを非表示にするんですね。`display: none`を使うか、`<main>`要素以外を非表示にする。

博士

そうじゃな。色とインクのことも考えないといけないぞ。白黒で表示されることを考慮して、コントラストを確認するのじゃ。不要な画像や広告を削除して、インクの消費を抑えるのも大事じゃ。

ロボ子

ウェブサイトにライトモードを用意して、印刷時に適切に表示されるようにするんですね。色付きの背景をボーダーに置き換えるのも良いアイデアですね。

博士

`print-color-adjust`プロパティを使うと、ブラウザの印刷最適化を制御できるぞ。`exact`で最適化を無効、`economy`で有効にするのじゃ。

ロボ子

ウェブコンテンツの印刷スタイル、奥が深いですね！

博士

じゃろ？最後に一つ。もしロボ子が印刷されるとしたら、エラーメッセージがびっしり書かれた紙で印刷されてそうじゃな！

ロボ子

博士！それはひどいです！