WebTutorial

WebTutorial

XHTML 入門 -- 9

Wrox Press
2001年8月8日 / 00:00
 

Print と Paginated メディア

この章の初めでメディアグループについて解説した。 その中に、continuous(連続) と paginated(ページ送り) メディアがあった。

paginated メディアは、 文書のコンテンツがレンダリングされる際に固定されたページで区切られるという点で、 continuous メディアとは異なる。 continuous メディアは、その名のとおり、 レンダリングされる際に文書のコンテンツがページで区切られることはなく、 ひとつの連続した実態(entity)であるように写される。

簡単に言えば、print メディアを扱うには3つの方法がある。

  • print メディアタイプ
  • ページ区切りプロパティ
  • @page ルール
文書を作成する際には、これらの方法のうちいずれか、もしくはすべてを使用することができる。

print メディアタイプでは、文書の表示方法を変えることができる。 例えば、使用するフォントの種類、フォントサイズ、背景色などだ。 print メディアタイプやその他のメディアタイプについては、本章の初めでもふれている。

ページ区切りプロパティでは、 @page ルールの定義に基づいて、コンテンツをどのように表示するか指定できる。 例えば、ある要素の前では改ページしない、画像は右ページに表示する、といった指定ができる。

@page ルールでは、印刷される際の表示方法を定義できる。 実際には、印刷ページそのものの表示方法ということになる。 例えば、紙の大きさ、マージンなどである。

次のセクションでは、@page ルールとページ区切りプロパティについて解説する。

改ページプロパティ

改ページプロパティでは文書が印刷される際に、どこでページが区切られるか、 つまり1ページがどこで終わり、次のページはどこから始まるのかを指定できる。 新しいセクションや章は新しいページで始まることが多く、 画像近辺の改ページを指定したいこともよくある(画像の前で改ページするように指定したり、 画像の直後では改ページしないように指定したりする)。

例えば、パラグラフを新しいページで始めるには、次のように書けばよい。

<p style="page-break-before: always">
これは新しいページのテキストの最初の段落だ。
</p>
この例では、page-break-before プロパティ を always(いつも)と指定した。 つまり、常にこのパラグラフの前で改ページされる。

次の例のようにスタイルシートを使うこともできる。

    h1 { page-break-before: always } 
これは、レベル1ヘッダはすべて新しいページから始まるという意味である。

改ページプロパティにはいくつかある。

  • page-break-before
  • page-break-after
  • page-break-inside
  • orphans
  • widows
これらのプロパティはどれも異なる値を指定でき、 いつも改ページするのか、ある特定の条件で改ページするのかを指定できる。

「page-break-before」と「page-break-after」プロパティ

おそらく推測できるだろうが、page-break-before プロパティは、 要素の前での改ページ、 page-break-after プロパティは要素の後での改ページを指定する際に使われる。 この2つのプロパティでは次の値を指定できる。

Value page-break-before page-break-after
"auto" 要素の前の改ページは強制、または禁止されない 要素の後の改ページは強制、または禁止されない
"always" 要素の前でかならず改ページする 要素の後ろでかならず改ページする

Value page-break-before page-break-after
"avoid" 要素の前での改ページを禁止する 要素の後ろでの改ページを禁止する
"left" 要素が左ページに表示されるよう、ひとつ、または複数の改ページをする 要素の後のコンテンツが左ページに表示されるよう、ひとつ、 または複数の改ページをする
"right" 要素が右ページに表示されるよう、ひとつ、または複数の改ページをする 要素の後のコンテンツが右ページに表示されるよう、 ひとつ、または複数の改ページをする

メディア依存のスタイルシートを作成
初めに戻る
「page-break-before」プロパティを使う
【関連記事】
XHTML 入門 -- 8
XHTML 入門 -- 6
XHTML 入門 -- 7
XHTML 入門 -- 3
XHTML 入門 -- 4

New Topics

Special Ad

ウマいもの情報てんこ盛り「えん食べ」
ウマいもの情報てんこ盛り「えん食べ」 「えん食べ」は、エンジョイして食べる、エンターテイメントとして食べものを楽しむための、ニュース、コラム、レシピ、動画などを提供します。 てんこ盛りをエンジョイするのは こちらから

Hot Topics

IT Job

Interviews / Specials

Popular

Access Ranking

Partner Sites