ページメディアのための CSS 入門
9 June 2022

Tony Graham
Antenna House, Inc.

© 2022 Antenna House, Inc.

印刷向けスタイルシートの指定<link rel="stylesheet" type="text/css" media="print" href="foo.css"><style type="text/css" media="print">…
</style>© 2022 Antenna House, Inc.

2 / 49

印刷向けスタイルシート@import url("PrintOnly.css") print; /* PrintOnly.css を使った印刷 */@media print {/* ページメディアに適用 */body {
margin: 0;
font-size: 10pt }}@media screen {/* 画面表示に適用 */body {
margin: 10%;
font-size: 12px }}body {/*
font-family: sans-serif;}© 2022 Antenna House, Inc.

すべてのメディアに適用 */3 / 49

ページ© 2022 Antenna House, Inc.

4 / 49

@page ルール@page ルールはページサイズ、マージン、マージンボックスを設定します。
@page {
size: 1920px 1080px; /* 1080p */margin: 0;
margin-bottom: 50px;}© 2022 Antenna House, Inc.

5 / 49

ページサイズ : size プロパティ• 幅と高さを指定します。
@page {
size: 210mm 297mm; ; /* ISO/JIS A4 */}• 定義済みのページサイズを使用します。
@page {
size: A4; /* ISO/JIS A4 (210mm×297mm) */}• ページの向きも設定します。
@page {
size: A4 landscape;}© 2022 Antenna House, Inc.

/* A4 landscape 横長

6 / 49(297mm×210mm) */ページマージン• margin プロパティのショートハンド：@page {
margin: 10%;}/* 上下左右のマージン それぞれページ幅の 10% */• 個々の margin プロパティ@page {/* 上下のマージンは 2cm に設定、左右のマージンは 3cm に設定 */margin-top: 2cm;
margin-bottom: 2cm;
margin-left: 3cm;
margin-right: 3cm;}

© 2022 Antenna House, Inc.

7 / 49名前付きページ@page Landscape {/* "Landscape" （横長）名前付きページ */size: A4 landscape;}@page Portrait {/* "Portrait" （縦長）名前付きページ */size: A4;}
table.WideTable {page: Landscape; /* "Landscape" 横長ページの横に大きなテーブルを配置 */}html {
page: Portrait;/* "Portrait" 縦長ページをデフォルトとして使用 */}© 2022 Antenna House, Inc.

8 / 49名前付きページ<p>Portrait page</p><table class="WideTable" border="1" style="width:100%"><tr><td>1</td>…
<td>18</td></tr></table>© 2022 Antenna House, Inc.

9 / 49:left, :right, :first ページ@page Chapter:left {margin-left: 23mm;
margin-right: 27mm;}/* 左側のページ*/@page Chapter:right {margin-left: 27mm;
margin-right: 23mm;}/* 右側のページ*/@page Chapter:first {/* 章の最初のページ *//* ページヘッダを非表示 */@top-right { content: none }@top-left { content: none }}:last と :only は Antenna House Formatter の拡張機能です。
© 2022 Antenna House, Inc.

10 / 49

ヘッダとフッタ© 2022 Antenna House, Inc.

11 / 49

ページマージンボックス© 2022 Antenna House, Inc.

12 / 49

ページマージンボックスの寸法• コンテンツのあるページマージンボックスは「生成」されます。
▪ サイズ計算に考慮されます。
• それ以外は display: none; と同様です。

© 2022 Antenna House, Inc.

13 / 49

コーナーのページマージンボックス© 2022 Antenna House, Inc.

14 / 49上下のページマージンボックス生成されたページマージンボックス間で分割された使用可能な幅です。

© 2022 Antenna House, Inc.

15 / 49

中央のページマージンボックス
中央のページマージンボックスは、常に中央寄せに配置されます。

© 2022 Antenna House, Inc.

16 / 49string-set() と string()
文書からマージンボックスに文字列を挿入します。
@page {
@top-left {content: string(Chapter);}}h1 { string-set: Chapter content(); }© 2022 Antenna House, Inc.

17 / 49string-set プロパティ• 文字列の名前付き変数を作成します。
string-set: Chapter content();• マージンボックスの content プロパティを参照します。
content: string(Chapter);• string-set のコンテンツ一覧:▪ <string>▪ <counter()>▪ <counters()>▪ <content()> – 要素の文字列の値 ::before, ::after、あるいは最初の文字▪ attr(<attr-name>) – 属性値▪ -ah-attr-from(...) – 祖先要素からの属性© 2022 Antenna House, Inc.

18 / 49string() 関数• 名前付き string を文書にコピーします。
@top-right {/* 右側のページヘッダのタイトル。*/
content: string(Chapter);}• string をページ上で複数回設定する場合：@page Index:right {@top-left {content: string(IndexTerm, first);}}@top-right {content: string(IndexTerm, last);}© 2022 Antenna House, Inc.

19 / 49

running 要素を挿入する• running() はフローから要素を取り除きます。
.slide:not(#slide0) h1 {position: running(Title);
font: 900 150%/1em "Minion Pro", serif;
font-weight: 100;
font-size: 75px;
height: 100px;
padding-top: 0;
margin: 0;
background: transparent;-ah-display-align: center;}•element() はマージンボックスに挿入されます。
@top-left {content: element(Title);}© 2022 Antenna House, Inc.

20 / 49

ページ数• 現在のページ – counter(page)• 総ページ数– counter(pages)@bottom-center {content: counter(page) " / " counter(pages);
font-size: 0.5em;
color: #c6d0db;}© 2022 Antenna House, Inc.

21 / 49

裁ち落としとトンボ© 2022 Antenna House, Inc.

22 / 49

裁ち落としとトンボの用語© 2022 Antenna House, Inc.

23 / 49

裁ち落としを作成
margin に負の値を使います。
@top-left {margin-top: -3mm;
padding-top: 3mm;
margin-left: -3mm;
margin-right: -3mm;}© 2022 Antenna House, Inc.

24 / 49

裁ち落としを表示
bleed: 3mm;/* 裁ち落としの長さ*/
marks: crop cross;/* トンボを表示 */-ah-crop-offset: 14mm; /* ページの端から仕上がり寸法までの距離*/-ah-printer-marks-line-color: auto;/* トンボの色 */-ah-printer-marks-line-length: 10mm;/* トンボの線の長さ*/-ah-printer-marks-line-width: 0.12mm;/* トンボの線の幅 */© 2022 Antenna House, Inc.

25 / 49不正確な仕上げを許容© 2022 Antenna House, Inc.

26 / 49

PDF© 2022 Antenna House, Inc.

27 / 49

PDF バージョン
1.3
1.4
1.5
1.6
1.7
2.0

Version© 2022 Antenna House, Inc.

Year
2000
2001
2003
2004
2008
2017

Acrobat Reader version

4.0
5.0
6.0
7.0
8
–28 / 49

PDF バリアント• PDF/X – 印刷時のデータ交換用の PDF（Exchange）• PDF/A – 長期保存用の PDF（Archiving）• PDF/E – 技術文書向けの PDF（Engineering）• PDF/VT – 可変印刷向けの PDF（Variable Transaction）• PDF/UA – ユニバーサルアクセシビリティに配慮した PDF（ UniversalAccessibility）© 2022 Antenna House, Inc.

29 / 49

タグ付き PDF
• 論理構造に関する追加情報• 個別の仕様ではない▪ 最初は PDF 1.4 仕様に含まれていた• テキストとグラフィクスを抽出できる• アクセシビリティに役立つ© 2022 Antenna House, Inc.

30 / 49

タグ付き PDF に出力するタグ名をカスタマイズ
div.TOC {page-break-before: right;
page: TOC;
-ah-pdftag: 'Sect';}© 2022 Antenna House, Inc.

31 / 49

PDF/UA – ISO 14289-1• PDF のアクセシビリティを向上させることを目的とする• コンテンツは論理的な読み順にタグ付けされなければならない• 文書の言語を指定しなければならない• 意味のある画像や注釈、数式には代替テキストを含めなければならない• 支援技術はコンテンツにアクセスさせなければならない• しおりを含めることが推奨される• 注釈やフォームやリンク、マルチメディアを含めてもよい• フォントはすべて埋め込まれなければならない© 2022 Antenna House, Inc.

32 / 49

Matterhorn Protocol（マッターホルンプロトコル）• PDF 協会によって発行• PDF が PDF/UA に準拠しない可能性のあるすべての方法のチェックリスト• 136 の失敗条件から成る 31 のチェックポイントで構成• 人の手によるレビューが必要な場合もある© 2022 Antenna House, Inc.

33 / 49

文書のプロパティ<meta name="document-title" content="The document title"/><meta name="subject" content="The document subject"/><meta name="author" content="The author"/><meta name="keywords" content="Comma, separated, keywords, list"/>© 2022 Antenna House, Inc.

34 / 49

色cmyk(0,1,0,0)
cmyk(1,0,0,0)

#F00

#F0F

#FF0#FFF
#0F0

#00F
#0FF

cmyk(0,0,1,0)© 2022 Antenna House, Inc.

35 / 49

色sRGBCMYK© 2022 Antenna House, Inc.

36 / 49

colorem { color: green; }/* 色キーワード*/em { color: #042; }/* #RGB */em { color: #003D19; }/* #RRGGBB */em { color: rgb(0, 61, 25); }/* 整数の範囲 0-255 */em { color: rgb(0%, 24%, 10%); } /* 0%-100% */em { color: #0428; }/* #RGBA */em { color: #003D1988; }/* #RRGGBBAA */em { color: rgb-icc(#Grayscale, 0.5); }/* 0.0 (黒) から 1.0 (白) */em { color: cmyk(.9, 0, .75, .83);/* 0.0-1.0 */em { color: cmyk(90%, 0%, 75%, 83%);/* 0%-100% */em { color: rgb-icc(#CMYK, .9, 0, .75, .83); /* プロファイル依存 */em { color: rgb-icc(#Separation, 'PANTONE 627 PC', 1.0); }/* 名前と色合い */em { color: rgb-icc(0, 61, 25, #Separation, 'PANTONE 627 PC', 1,90%, 0%, 75%, 83%); }/* RGB と CMYK の両方と等価 */em { color: rgb-icc(#Registration); }/* すべてのセパレーション*/© 2022 Antenna House, Inc.

37 / 49

®
PANTONE スポットカラー
em { color: rgb-icc(#Separation, 'PANTONE 627 PC', 1.0); }/* 名前と色合い*/em { color: rgb-icc(#Separation, 'PANTONE 627 PC', 0.5); }/* 色合い 0.0 から 1.0*/em { color: rgb-icc(#Separation, 'PANTONE 627 PC', 50%); }/* 色合い 0% から 100%*/em { color: rgb-icc(#Separation, 'PANTONE 627 PC'); }/* 色合い 1.0 と想定*/
em { color: rgb-icc(#Separation, 'PANTONE 627 PC',1, 90%, 0%, 75%, 83%); } /* CMYK と等価 */em { color: rgb-icc(0, 61, 25, #Separation, 'PANTONE 627 PC'); }/* RGG と等価*/
em { color: rgb-icc(0, 61, 25, #Separation, 'PANTONE 627 PC', 1,90%, 0%, 75%, 83%); }/* RGB と CMYK の両方と等価*/

0.00.1© 2022 Antenna House, Inc.

0.2

0.3

0.4

0.5

0.6

0.7
38 / 49

0.8

0.9

1.0

セパレーションプレート© 2022 Antenna House, Inc.

39 / 49

画面とページの相違• 分割• フロート• ナビゲーション• 左右のページ• 印刷本© 2022 Antenna House, Inc.

40 / 49

分割© 2022 Antenna House, Inc.

41 / 49

ページでも分割© 2022 Antenna House, Inc.

42 / 49

ナビゲーション• ヘッダとフッタ• 目次• インデックス© 2022 Antenna House, Inc.

43 / 49

左右のページ© 2022 Antenna House, Inc.

44 / 49

印刷本• 市場/目的に合わせたページサイズ▪ オフィス文書▪ 車の取扱い説明書▪ ペーパーバック本• 裁ち落とし• 見開きページ• 製本綴じ• 裏ページの透け感© 2022 Antenna House, Inc.

45 / 49

本の綴じ方© 2022 Antenna House, Inc.

46 / 49

見開きページ© 2022 Antenna House, Inc.

47 / 49

裏ページの透け感© 2022 Antenna House, Inc.

48 / 49

完全なチュートリアルを入手する
https://www.antenna.co.jp/AHF/ahf_publication/index.html#CSSPrint© 2022 Antenna House, Inc.

49 / 49