CSS Paged Media: 初心者向けの包括ガイド
こんにちは、ウェブ開発者志望の皆さん！今日は、CSS Paged Mediaの魅力的な世界に飛び込みます。以前聞いたことがない場合でも心配しないでください – まずは基本から始めて、段階的に進めていきます。このチュートリアルの終わりまでに、CSSを使った素晴らしい印刷レイアウトを作成できるようになるでしょう。では、始めましょう！
CSS Paged Mediaとは？
CSS Paged Mediaは、ウェブコンテンツが印刷されたり、PDFなどのページ形式で表示されたときの見た目をコントロールするCSSの機能セットです。まるでウェブサイトにプリンター用のメイクオーバーを施すようなものです！
素晴らしいウェブサイトを作成したのに、印刷するとすべてが散らばってしまい場所が违っている...そんな経験はありませんか？それがCSS Paged Mediaが救世主的な存在になる理由です！画面以外の場でもレイアウトをコントロールできるように帮助我们します。
CSS Paged Media - 関連プロパティ
CSS Paged Mediaが魔法を起こす主要なプロパティを見てみましょう：
| プロパティ | 説明 | 例 |
|---|---|---|
| @page | ページの寸法と余白を定義 | @page { size: A4; margin: 2cm; } |
| size | ページボックスのサイズを設定 | size: 8.5in 11in; |
| marks | 文書にカットマークやクロスマークを追加 | marks: crop cross; |
| bleed | 印刷コンテンツのbledエリアを指定 | bleed: 0.5cm; |
| page-break-before | 要素の前にページブレイクをコントロール | page-break-before: always; |
| page-break-after | 要素の後ろにページブレイクをコントロール | page-break-after: avoid; |
| page-break-inside | 要素の中でページブレイクをコントロール | page-break-inside: avoid; |
これらを実際に使ってみましょう：
@page {
size: A4;
margin: 2cm;
@top-center {
content: "私の素晴らしいドキュメント";
}
@bottom-right {
content: counter(page);
}
}
h1 {
page-break-before: always;
}
table {
page-break-inside: avoid;
}この例では、A4サイズのページに2cmの余白を設定し、各ページの中央上部にヘッダーを追加し、右下にページ番号を追加しています。また、各h1が新しいページから始まるようにし、テーブルがページをまたぐことなくなるようにしています。
CSSのat-ルール
CSSのat-ルールは、CSSがどのように振る舞うべきかを指示するステートメントです。アットサイン(@)から始まり、識別子に続きます。Paged Mediaに特化したat-ルールを見てみましょう：
| At-ルール | 説明 | 例 |
|---|---|---|
| @page | ページメディアのためのページボックスを定義 | @page :first { margin-top: 10cm; } |
| @top-left | ページの左上隅にコンテンツを定義 | @top-left { content: "第1章"; } |
| @top-center | ページの中央上部にコンテンツを定義 | @top-center { content: "私の本"; } |
| @top-right | ページの右上隅にコンテンツを定義 | @top-right { content: date("yyyy-mm-dd"); } |
| @bottom-left | ページの左下隅にコンテンツを定義 | @bottom-left { content: "機密"; } |
| @bottom-center | ページの中央下部にコンテンツを定義 | @bottom-center { content: "著作権2023"; } |
| @bottom-right | ページの右下隅にコンテンツを定義 | @bottom-right { content: counter(page); } |
以下は、これらを使った例です：
@page {
@top-center {
content: "アリスの不思議な冒険";
font-family: "Times New Roman", serif;
font-size: 12pt;
}
@bottom-right {
content: "ページ " counter(page);
}
}
@page :first {
@top-center { content: none; }
@bottom-right { content: none; }
}この例では、各ページに書名のヘッダーと右下にページ番号を追加しています。また、最初のページからこれらの要素を削除して、クリーンな表紙の見た目を作成しています。
CSSの擬似クラス
擬似クラスは、要素の特別な状態を定義するために使用されます。Paged Mediaの文脈では、いくつかの便利な擬似クラスがあります：
| 擬似クラス | 説明 | 例 |
|---|---|---|
| :first | 最初のページを選択 | @page :first { margin-top: 10cm; } |
| :left | 左ページすべてを選択 | @page :left { margin-left: 4cm; } |
| :right | 右ページすべてを選択 | @page :right { margin-right: 4cm; } |
| :blank | すべての空白ページを選択 | @page :blank { @top-center { content: none; } } |
以下に、これらを使った例を示します：
@page :first {
margin-top: 10cm;
@top-center { content: none; }
@bottom-right { content: none; }
}
@page :left {
margin-left: 4cm;
margin-right: 3cm;
@top-left {
content: "アリスの不思議な冒険";
}
}
@page :right {
margin-left: 3cm;
margin-right: 4cm;
@top-right {
content: "第 " counter(chapter);
}
}この例では、最初のページ、左ページ、右ページそれぞれに異なるレイアウトを作成しています。最初のページには大きな上部余白があり、ヘッダーとフッターがありません。左ページには書名が左上隅にあり、右ページには章节番号が右上隅にあります。
結論
そして、みなさん！CSS Paged Mediaの素晴らしい世界を旅しました。ページサイズや余白の設定から、ページブレイクの制御、ヘッダーとフッターの追加まで、CSSを使った美しい印刷レイアウトを作成するためのツールを手に入れました。
実践が完璧を生むことを忘れないでください。これらのプロパティやat-ルールを自分のプロジェクトで試してみてください。印刷レイアウトに対するコントロールがどれほど大きいか驚くかもしれません！
ハッピーコーディング、そして印刷物が常に鮮明で美しいことを祈っています！
Credits: Image by storyset