Gutenbergしたい（gutenberg-css）

<head>
    <!-- 本体（印刷時だけ適用） -->
    <link rel="stylesheet"
          href="https://unpkg.com/gutenberg-css@0.7.0" media="print">
    <!-- テーマ（任意） -->
    <link rel="stylesheet"
          href="https://unpkg.com/gutenberg-css@0.7.0/dist/themes/oldstyle.min.css" media="print">
</head>

Gutenbergは、ウェブページを紙に印刷するときの見た目を整えるCSSフレームワークです。

自分で@media printを書くほどではないけれど、印刷やPDF保存に最低限対応したい、というときに使います。 読み込むだけで、余白・文字サイズ・改ページなどが印刷向けに調整されます。

注釈

Gutenbergは0.7.0（2023年3月）以降更新が止まっています。 機能はシンプルなので使えますが、依存する前にメンテナンス状況を確認してください。

読み込みたい

<link rel="stylesheet"
      href="https://unpkg.com/gutenberg-css@0.7.0" media="print">

<link>にmedia="print"を付けて読み込みます。

media="print"があると、このCSSは画面表示には一切適用されず、印刷（と印刷プレビュー）のときだけ効きます。 画面のデザインを壊さずに、印刷時の見た目だけを差し替えられます。

テーマは本体に続けて、追加の<link>で読み込みます。省略してもかまいません。

<link rel="stylesheet"
      href="https://unpkg.com/gutenberg-css@0.7.0/dist/themes/oldstyle.min.css" media="print">

  • oldstyle … 明朝体・セリフ系の古典的な誌面

  • modern … サンセリフ中心のすっきりした誌面

  • book … 書籍風。左右ページで余白を変える

リンク先URLを本文に出したい

<p>詳しくは<a href="https://example.com/docs">ドキュメント</a>を参照。</p>

画面ではふつうのリンクですが、印刷すると次のように展開されます。

詳しくはドキュメント (https://example.com/docs)を参照。

紙ではリンクをクリックできないため、Gutenbergがhrefの値を本文の後ろに書き足します。 自分で書くならa[href^="http"]::after { content: " (" attr(href) ")"; }に相当します。

印刷したくない要素を隠したい（.no-print）

<nav class="no-print">...</nav>
<aside class="no-print">...</aside>
<div class="share-buttons no-print">...</div>

class="no-print"を付けた要素は、印刷時だけ非表示になります。

紙に不要なものに付けておきます。

  • グローバルナビゲーション、パンくず

  • サイドバー、広告

  • SNSシェアボタン、コメント欄

  • 「ページの先頭へ戻る」などの操作ボタン

リファレンス

参考