Sample lesson

無料サンプルレッスン：
CSS：紙に残す案内の設計

画面のメニューを印刷時だけ外し、集合場所や持ち物を紙へ残す無料レッスンです。初稿の適用範囲を直し、印刷プレビューと通常表示の両方で合格条件を確かめます。

1. ゴール：紙だけで必要な案内を読める

画面用の操作を印刷から外し、集合条件と持ち物を紙へ残します。CSSのセレクターが読める人向けです。エディター、ブラウザーの印刷プレビュー、練習用フォルダを用意してください。

編集部が作った架空の散策案内を使います。実在の催しではありません。紙への実出力ができない場合は、プレビューのみの確認と明記します。

2. 課題：消すものと残すものを先に書く

画面には「集合場所」「持ち物」へ移るメニューを残し、印刷時だけ省きます。紙には催し名、11月15日10時、公園の東入口、入口の説明、持ち物、雨天中止の条件を残してください。

提出物はHTMLファイルと、画面・印刷の二つの確認記録です。A4縦・倍率100%など、プレビューに使った設定も書きます。ページ数を減らすことより、必要な情報を読めることを優先してください。

3. 初稿：条件の外でメニューを隠している

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

この初稿を入れると、画面からメニューが消え、印刷では本文も消えます。印刷時に不要なものを消すつもりが、適用する条件と対象の両方を取り違えています。

4. レビュー例：適用範囲と情報を照合する

メニューのdisplay: noneを@media printの内側へ移します。通常画面でリンクが戻ることを再確認します。
mainを非表示にする指定は外します。印刷で催し名から雨天条件まで残ることを確認します。
「集合場所はこちら」だけを残すと紙では行き先が分かりません。東入口と、その位置の説明を本文に書きます。

参考：MDNの印刷用CSS（2026年10月27日確認）。印刷でも通常のCSSの優先順位が働くため、消えない場合は適用元を調べます。これは編集部のレビュー例です。

5. 修正版：画面と印刷の規則を分ける

次をprint-practice.htmlとして保存します。印刷プレビューを開く前に、通常画面の二つのリンクを操作してください。

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>散策案内の印刷練習</title>
<style>
body { margin: 1rem; font-family: sans-serif; line-height: 1.8; }
main { max-width: 42rem; margin-inline: auto; }
.screen-navigation { padding: 1rem; background: #fff0dd; }
a:focus-visible { outline: 3px solid #174ea6; outline-offset: 3px; }
@media print {
  .screen-navigation { display: none; }
  body { margin: 0; color: #000; background: #fff; }
  main { max-width: none; }
}
</style>
</head>
<body>
<main>
<nav class="screen-navigation" aria-label="ページ内案内"><a href="#meeting">集合場所</a> <a href="#packing">持ち物</a></nav>
<h1>川辺の散策（架空の練習）</h1>
<h2 id="meeting">集合場所</h2>
<p>11月15日10時、公園の東入口に集合します。</p>
<p>東入口は、図書室の向かい側です。</p>
<h2 id="packing">持ち物</h2>
<p>飲み物、帽子、歩きやすい靴をご用意ください。</p>
<p>雨の場合は中止です。当日の案内を出発前に確認してください。</p>
</main>
</body>
</html>