印刷すると不要なメニューを省く：紙に残す本文を先に決めよう

会場への案内を印刷したら、各ページへのメニューが大きく紙面を占めていた。印刷すると不要なメニューを省く前に、紙を持って出かける人が何を必要とするかを決めましょう。今回は画面用のナビゲーションだけを外す小さな練習です。

題材は架空の地域散策ページです。集合場所と持ち物を残し、サイト内の別ページへ移るメニューを印刷対象から除きます。既存サイト全体の印刷仕様を一度に作る課題ではありません。

紙だけを見て行動できる情報を残す

まず本文から集合場所、集合時刻、持ち物を選びます。「集合場所はこちら」というリンクだけでは、紙上で行き先を開けません。今回の本文には場所の説明そのものを書きます。重要な条件がメニュー内にしかない場合は、非表示にする前に本文へ残してください。

ロゴやヘッダーも一括で消すと、何の案内を印刷したか分からなくなることがあります。ページのタイトルは残し、消す対象を名前で限定します。「上の方は全部不要」と位置だけで判断しないことが、最初の確認点です。

画面用のメニューに専用のクラスを付ける

以下は練習用ページのbody内へ置く断片です。リンク先は同じページ内にあり、別ファイルは必要ありません。実際の集合条件として使わず、印刷比較の原稿として扱ってください。

<nav class="screen-navigation" aria-label="ページ内案内">
  <a href="#meeting">集合場所</a>
  <a href="#packing">持ち物</a>
</nav>
<main>
  <h1>川辺の散策案内</h1>
  <h2 id="meeting">集合場所</h2>
  <p>10時に公園の東入口へ集合します。</p>
  <h2 id="packing">持ち物</h2>
  <p>飲み物と帽子をお持ちください。</p>
</main>

専用のクラスを付けるのは、本文や別の案内まで巻き込まないためです。実際のサイトへ移す際には、同じクラスがほかの要素に使われていないかを調べてから適用します。

非表示の指定をprintの中に置く

CSSには次の指定を加えます。@mediaは条件に応じてスタイルを適用する仕組みで、ここでは印刷用のprintを条件にしています。

@media print {
  .screen-navigation { display: none; }
}

このdisplay指定を条件の外へ置くと、通常の画面でもメニューが消えます。画面で見え、印刷時だけ消えるという二つの状態をセットで確かめます。MDNの印刷用CSSの説明にも、画面と印刷でスタイルを変える方法が示されています。

printの中でもCSSの優先順位は働きます。期待どおり消えない場合は、対象のクラスと競合する指定を調べましょう。理由が分からないまま強い指定を足す前に、CSSの適用元を調べる記事の手順で原因を絞ります。

プレビューでは、消した部分より残った本文を読む

ブラウザーの印刷プレビューを開き、メニューがないことを見たら、次にタイトルから持ち物まで読みます。集合条件が残っているか、途中で切れていないか、文字と背景の組み合わせで読めなくなっていないかを確認します。

一枚に収めるためだけに文字を極端に小さくする必要はありません。長い原稿なら複数ページになることもあります。用紙や余白などの印刷設定を記録し、別の設定でも必ず同じ改ページになるとは扱わないでください。

印刷の前後で、本文とメニューの残り方を比べる

最初に通常表示で二つのリンクが使えるかを試し、次にプレビューで本文が残るかを照合します。最後にプレビューを閉じ、画面用メニューが表示されていることをもう一度確認しましょう。

紙への出力を試せなければ、プレビューだけ確認したと記録します。無料レッスンの練習ページでも、消した要素と残した情報を各一行書き出し、必要な案内まで消えていないことを完成条件にしてください。