ウェブサイトは印刷可能であるべきだ

ウェブサイトは印刷可能であるべきだ

［画像: Brennen Puth氏のブログ記事のヘッダー画像］

Brennen Puth | 2026-10-24

仕事を探しています！（クリックして展開）

この記事について質問や考えがあれば、ぜひ聞かせてください！ 現在、アメリカ北東部で仕事を探しています。大学ではコンピュータサイエンスとサイバーオペレーションの学士号を取得予定です。Webアプリケーション開発やJavaでの実務経験があり、Rust、C++、Pythonなど様々な言語の経験もあります。過去の業績に興味があれば、こちらに簡単なプロジェクトリストをまとめています。または、履歴書を送付するために私に連絡してください。私の投稿を読んでくれる方なら、きっと面白いオファーをいただけるはずなので、どんな情報でも歓迎です！

最近、印刷された論文を読むことが多いです。ラップトップで読むのも好きですが、印刷された文書に書き込みをすると、より集中できます。また、ホワイトボードと印刷された文書を前にして、何か重要なことをしているという感覚に浸るのも良いものです。そこで、私が書くコンテンツを他の人がこのメディアで最大限に楽しめるようにするにはどうすれば良いか考えてきました。

幸いなことに、印刷された文書は以前、ウェブデザインの主要な焦点でした。CTRL-Pを押して、プリンタードライバーが今日協力してくれることを願えば、好きなウェブページを印刷できます。自分のウェブページでこれをテストしましたが、努力せずにまともな印刷結果が得られるだろうと愚かに考えていました。

［画像: 印刷されたウェブページのスナップショット］

素晴らしいとは言えませんでした。コンテンツはすべて見えますが、文字は2段階ほど大きすぎ、ヘッダーは印刷時にひどい見た目になり、リンクは白黒では非常に灰色に見えます。全く受け入れられません。

印刷可能にする

幸いなことに、ウェブコミュニティは以前から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は、印刷されたウェブサイトから何かを削除するために使用されます。ヘッダーは印刷形式では正直に言って非常に醜いため、これに適用しました。
3. 印刷用のフォントサイズを調整することは非常に重要です。ウェブサイトで使用している可変スケールのテキストは、印刷ページではひどい見た目になります。12ptはかなり受け入れられているサイズなので、これで十分だろうと考えました。ヘッダーには少し大きめのサイズが適切でしょう。
4. gialloの調整はコードブロック用です。正直なところ、コードブロックは調整後も最も醜い部分です。それらは1つの塊として表示され、ページ境界を越えて分割されないようにしたいのですが、これに対する解決策があれば、大いに感謝します。
5. 青いリンクは、サイトでは気に入っていますが、グレースケールではひどい見た目になります。他のテキストと同じ色にすることは問題ありません。CSSから好きなコードを自由に引用してください。私はそれに固執しません。印刷がどのように機能するかを考慮したウェブページをもっと体験できたら、個人的に嬉しいです。

なぜこれを行うべきか

私のウェブサイトをこのように最適化しようとした後、印刷を優先しない人々の気持ちに共感できます。印刷時に適切なものをすべて隠したり表示したりするのに、午前中のかなりの時間がかかりました。私のサイトはそれほど複雑ではありません。また、定期的にウェブページを印刷する人がどれだけいるか疑問です。私だけかもしれません。

それでも、あなたのウェブサイトがテキストのみで構成されている場合、人々が好きなメディアでそのテキストを体験できるようにすることは、決して悪いことではありません。デジタルメディアは多くの柔軟性を可能にします。優れたソフトウェアへの道は、ソフトウェアエンジニアからユーザーへの親切さによって舗装されています。いつか、誰かがこの親切を見つけて、たとえ一瞬であっても微笑むかもしれません。そして、それは価値があるでしょう。