CSS印刷：初学者全面指南
こんにちは、将来のCSSマエストロたち！今日は、CSS印刷の fascinante な世界に飛び込みます。あなたの近所の親切なコンピュータ教師として、この旅に連れて行くのを楽しみにしています。コードを一行も書いたことがない人も心配しないでください - とても基本的なところから始めて、少しずつ進めていきます。で、コーヒー（またはお好みでティー）を一杯取り、始めましょう！
CSS印刷 - プリントスタイルシートの使用
ウェブページを印刷しようとして、画面に表示されるものと全く異なるものが印刷されたことがありますか？那就是 print style sheets が救助に来ます！それは、あなたのウェブコンテンツを印刷友善の形式に変える魔法の呪文のようなものです。
簡単な例から始めましょう：
<head>
<link rel="stylesheet" type="text/css" href="screen.css" media="screen">
<link rel="stylesheet" type="text/css" href="print.css" media="print">
</head>このスニペットでは、ブラウザに画面と印刷それぞれに異なるスタイルシートを使うよう指示しています。media 属性が私たちの秘密の武器です。ページを画面で表示する際には screen.css を使用しますが、印刷ボタンを押すと、バン！print.css が接管します。
CSS印刷 - メディアクエリと @page 指令の使用
さあ、メディアクエリと @page ルールでゲームをレベルアップしましょう。これは CSS 印刷の dynamique ペアです！
@media print {
body {
font-size: 12pt;
color: #000;
background-color: #fff;
}
@page {
margin: 1in;
}
}このコードは、「ブラウザよ、印刷する際には文字を12ptに、白地に黒文字にして、四方1インチの余白を設定してくれ」と言っています。@media print は私たちのメディアクエリで、@page はページレイアウトを設定します。
CSS印刷 - 印刷リクエストの検出
あなたのウェブページが誰かが印刷しようとしていることを知ることができると素晴らしいでしょう？実はできます！以下の方法で：
window.addEventListener('beforeprint', function() {
console.log('印刷中...');
});
window.addEventListener('afterprint', function() {
console.log('印刷完了');
});この JavaScript スニペットは、印刷開始と終了のときに私たちに囁く小さなスパイのようなものです。最後の瞬間の調整に非常に便利です！
CSS印刷 - @page 指令の使用
@page ルールは、印刷されたページをコントロールする魔法の杖のようなものです。実際に見てみましょう：
@page {
size: A4;
margin: 0;
}
@page :first {
margin-top: 2cm;
}ここでは、すべてのページをA4サイズにして余白を0に設定し、最初のページには特別に2cmの余白を与えます。まるでコンテンツのために赤地毯を敷くようなものです！
CSS印刷 - @media クエリの使用
@media を前に見ましたが、もう少し深く掘り下げてみましょう：
@media print {
.no-print {
display: none;
}
a[href^="http"]:after {
content: " (" attr(href) ")";
}
}このスニペットは、no-print クラスを持つ要素を非表示にし、外部リンクの後にURLを追加します。まるでお手伝いがあなたのウェブページを印刷のために整頓してくれるようなものです！
CSS印刷 - afterprint イベントの使用
先ほどの小さな JavaScript スパイを思い出してください。それを仕事に使いましょう：
window.addEventListener('afterprint', function() {
document.body.style.backgroundColor = 'lightblue';
alert('印刷が楽しめたことを願っています！');
});このコードは、印刷後背景色をライトブルーに変更し、親切なメッセージを表示します。まるでお客様に感謝の気持ちを伝える小さなお手紙のようです！
CSS印刷 - 外部スタイルシートへのリンク
最後に、外部印刷スタイルシートをリンクする方法を復習しましょう：
<link rel="stylesheet" type="text/css" href="print.css" media="print">この行は、印刷友善なウェブページへのgolden ticketです。print.css という名前のファイルを作成し、印刷スタイルを追加して、それで十分です！
| 方法 | 説明 | 例 |
|---|---|---|
| プリントスタイルシート | 印刷メディア用の別のCSSファイル | <link rel="stylesheet" type="text/css" href="print.css" media="print"> |
| メディアクエリ | 印刷時に適用されるCSSルール | @media print { body { font-size: 12pt; } } |
| @page 指令 | ページ固有のプロパティをコントロール | @page { margin: 1in; } |
| 印刷リクエストの検出 | 印刷を試みることを検知する JavaScript | window.addEventListener('beforeprint', function() { ... }); |
| afterprint イベント | 印刷後にコードを実行 | window.addEventListener('afterprint', function() { ... }); |
そして、ここまでが、CSS印刷の世界への最初の一歩です！練習は完璧を生みますので、実験を恐れずにやってみてください。谁知道呢?あなたは印刷スタイルシートのピカソになるかもしれません！次回まで、お楽しみに！ハッピーコーディング！
Credits: Image by storyset