ウェブページは印刷できて当然だ、自分で @media print を書いて確かめた

最近、紙に印刷した文章をよく読んでいる。ノート PC で読むのも嫌いではないが、印刷した文書に書き込みながら読むほうが集中できる。ホワイトボードと印刷した文書を前に座っていると、なんだか重要なことをしている気分になれるのもいい。そこで今、自分が書いたコンテンツをこの媒体で楽しんでもらうにはどうすればいいか、考えているところだ。

幸いなことに、少し前まで Web デザインは印刷文書を主要な対象にしていた。CTRL-P を押して、今日はプリンタドライバが機嫌よく動いてくれることを祈れば、どんな Web ページでも印刷できる。 自分の Web ページで試してみた。何もしなくてもそこそこの印刷結果になるだろうと、甘く考えていた。

少なくとも内容はすべて見えるものの、出来はひどかった。文字は 2 段階ほど大きすぎ、ヘッダーは印刷すると見苦しく、リンクは白黒だとひどく灰色に見える。まったく受け入れられない。

印刷できるようにする

2026-10-26 追記: これは書いておくべきだろう。lobste.rs と HN の両方で、明らかな見落としを指摘するフィードバックをもらったため、すでにほぼ全面的に変わっている。今はスタイルシートをできる限り簡素化しているところだ。感謝。

幸い、Web コミュニティには先述のとおり HTML ページを印刷するという関心があった。CSS には印刷される内容だけを対象にスタイルを指定できるセレクタがあり、これが役に立つ。現在のこのページ向けの印刷関連のスニペットはこうなっている:

.onlyPrint {
  display: none;
}

@media print {
  .noPrint {
    display: none;
  }

  .onlyPrint {
    display: inline;
  }

  p,
  ol {
    font-size: 12pt;
  }

  h3, h4 {
    font-size: 13pt;
  }

  h2 {
    font-size: 14pt;
  }

  h1 {
    font-size: 16pt;
  }

  .giallo {
    border: 3px solid black;
  }

  .giallo-l {
    font-size: 11pt;
  }

  a {
    color: black !important;
  }
}

このスニペットの効果は、CTRL-P を押すかこのページの印刷ボタンを押せば確認できる。これが私にとって何をしているかを順に挙げる:

1. onlyPrint をクラスとして付けると、印刷された文書にだけ表示される要素にできる。今は副題に小さな著者表記を付けるのに使っている。
2. noPrint は印刷された Web サイトから何かを取り除くために使う。ヘッダーに付けている。印刷すると正直かなり見苦しいからだ。
3. 印刷用のフォントサイズ調整は非常に重要だ。このサイトで使っている可変スケールのテキストは、紙の上ではひどい見た目になる。12pt はまずまず受け入れられているサイズなので、これで十分だろう。見出しを少し大きくするのも理にかなっている。
4. giallo の調整はコードブロック向けだ。正直に言って、多少調整してもコードブロックが依然として一番見苦しい。ひとまとまりのまま出力されてページの境界をまたいで分割されないでほしいのだが、解決策を知っている人がいたらぜひ教えてほしい。
5. 青いリンクはサイト上では気に入っているが、グレースケールではひどく見える。ほかのテキストと同じ色にするのがちょうどいい。

この CSS から使いたいコードがあれば自由に持っていってほしい。手元に囲い込むつもりはない。印刷のことを考えている Web ページがもっと増えたらいいと、個人的には思っている。

なぜこれをやるべきか

自分のサイトをこの方法で最適化してみて、印刷を優先しない人の気持ちがわかった。印刷時に隠すべきもの、見せるべきものを正しく振り分けるだけで、午前中のそこそこの時間が溶けた。うちのサイトはそこまで複雑じゃない。そもそも、日常的にウェブページを印刷する人がどれだけいるのかも疑わしい。自分一人かもしれない。

それでも、サイトの中身がテキストだけなら、読者に好きな媒体でテキストを読んでもらえるようにするのは悪い話じゃない。デジタルという媒体は自由度が高い。良いソフトウェアへの道は、エンジニアからユーザーへのささやかな親切で舗装されている。いつか誰かがこの親切に気づいて笑ってくれるかもしれない。一瞬だけだとしても。それだけの価値はある。

---

追記 2026-10-26: 投稿したところ、この記事が HN と lobste.rs のトップページに載ったと友人から連絡をもらった。面白い！　CSS にいくつか欠陥があることも今になって指摘されたが、この記事をきっかけにこの媒体を少し真剣に考えてくれる人が一人でも増えればと思う。読んでくれた皆さん、ありがとう！