CSS 印刷
- @page (ページレイアウトを定義する)
- size (ページの大きさ)
- margin (マージン)
- marks (印刷の際の「トンボ」を指定)
- Seiten rechts/links und erste Seite
- page-break-before (印刷の際の改ページ指示要素の前で行う)
- page-break-after (印刷の際の改ページ指示要素の後で行う)
- orphans (最後の段落の最低行数を指定)
- widows (最初の段落の最低行数を指定)
- Benannte Seiten (指定した要素内での改ページを禁止する)
印刷に関する指定は現在検証できていません。
サンプルのページを、ブラウザーの印刷機能で、印刷プレビューをご覧にんればイメージがつかめると思います。
@page (ページレイアウトを定義する)
page 用紙設定の適用を指定
CSS２
@pageとは、改ページにまつわる処理を指定するための規則です。@pageを使用することで、ページボックスのサイズや向き、マージンなどを指定することができます。pageとは、@pageを用いて命名されたページ向けのスタイルを適用する際に用いるプロパティです。初期値はautoであり、出力先に応じて出力されます。
| 値 | 機能 |
|---|---|
| auto | 出力先の初期設定に依存 |
| 名前 | 指定した名前のボックスの設定を適用 |
適応要素 すべての要素
継承 ：する (デフォルト値 ＝auto )
例:
@page { /* Angaben zum Seitenlayout */ }
</style>
size 印刷する用紙の方向とサイズの指定
CSS2
sizeとは、ページのサイズや向きを指定するためのプロパティです。実数値に単位をつけて指定しますが、値が2つのときには縦、横の順に指定することになります。値が1つだけのときは、縦と横に同じ値を指定することになります。そのほかに、サイズは出力先にあわせて縦置きにするportrait、横置きにするlandscape、向きとサイズの双方を出力先に合わせるautoが指定できます。
| 値 | 機能 |
|---|---|
| auto | 出力先の初期設定に依存 |
| portrait | 縦向きに設定 |
| landscape | 横向きに設定 |
適応要素 すべての要素
継承 ：する (デフォルト値 ＝auto )
印刷用紙の向き用紙のサイズを指定します。
<head>
<title>size</title>
<style type="text/css">
@page { size:landscape; }
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<p>
千夜一夜物語
この長大な説話集の起源についてはいろいろな説があるが、今日ではペルシアの説話集「千物語」に由来するといわれる。アラビア語に翻訳されたのは850年ごろ。長い年月の間に、バグダットやカイロあたりの民話も加えられて、現代のような形になった。この「アラビアン・ナイト」の無削除完全版として有名なバートン版を、大場正史氏の生涯をかけた翻訳でおくる。健康なエロティシズムと強靭な精神にあふれたイスラム世界への最高の案内書
</p>
</body>
</html>
margin (マージン)
marginとは、上下左右のマージンに関する設定を一括して指定するためのプロパティです。値がひとつだけのときには全てのマージンを等しく指定しますが、値の数によって上下と左右のそれぞれを等しく指定したり、左右のみを等しく指定したり、あるいは全てのマージンに異なる値を指定できます。値は数値に単位をつけて指定、もしくは自動的に設定する際にはautoを指定します。
| 書式 | margin: <value:値> |
|---|---|
| 値 | [<length> |<percentage> | auto ]{1,4} |
| 初期値 | 未定義 |
| 適用要素 | 全ての要素 |
| 継承性 | 不可 |
marginプロパティーは、一つから四つの値を特定して要素のマージンを設定し、各値はlength・percentageまたは autoです。パーセント値は親要素の幅を参照します。負のマージンは許されます。四つの値が与えられるなら、上部・右・下部・左マージンそれぞれに、適用されます。二つか三つなら、見当たらない値は反対の側から取られます。
<head>
<title>margin (page)</title>
<style type="text/css">
@page {
size:21.0cm 14.85cm;
margin-top:1.7cm;
margin-bottom:1.4cm;
margin-left:2cm;
margin-right:2cm }
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<p>
千夜一夜物語
この長大な説話集の起源についてはいろいろな説があるが、今日ではペルシアの説話集「千物語」に由来するといわれる。アラビア語に翻訳されたのは850年ごろ。長い年月の間に、バグダットやカイロあたりの民話も加えられて、現代のような形になった。この「アラビアン・ナイト」の無削除完全版として有名なバートン版を、大場正史氏の生涯をかけた翻訳でおくる。健康なエロティシズムと強靭な精神にあふれたイスラム世界への最高の案内書
</p>
</body>
</html>
marks 印刷の際の「トンボ」を指定
CSS2
marksとは、トンボを出力するかどうかを指定するためのプロパティです。ページの設定を行う際に指定します。初期値はnoneでありトンボは出力されません。コーナートンボを出力する場合にはcrop、センタートンボを出力する場合にはcrossを指定しますが、スペースで区切って両方を同時に出力させることもできます。
| 値 | [ crop || cross ] | none | inherit |
|---|---|
| 初期値 | none |
| 適用 | ページ媒体の場合 |
| 継承 | しない |
| 値 | 機能 |
|---|---|
| crop | コーナートンボの設定 |
| cross | センタートンボの設定 |
適応要素 すべての要素
継承 ：する (デフォルト値 ＝auto )
印刷の際、上下左右、および中央のトンボを設定します。
<head>
<title>marks</title>
<style type="text/css">
@page {
size:11.3cm 19.85cm;
margin:1.7cm;
marks:cross; }
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<p>
千夜一夜物語
この長大な説話集の起源についてはいろいろな説があるが、今日ではペルシアの説話集「千物語」に由来するといわれる。アラビア語に翻訳されたのは850年ごろ。長い年月の間に、バグダットやカイロあたりの民話も加えられて、現代のような形になった。この「アラビアン・ナイト」の無削除完全版として有名なバートン版を、大場正史氏の生涯をかけた翻訳でおくる。健康なエロティシズムと強靭な精神にあふれたイスラム世界への最高の案内書
</p>
</body>
</html>
Site rights/links und erase Site
<head>
<title>Site reacts/links</title>
<style type="text/css">
@page {
size:21.0cm 14.85cm;
margin-top:1.5cm;
margin-bottom:2cm }
@page :left {
margin-left:1.5cm;
margin-right:2cm }
@page :right {
margin-left:2cm;
margin-right:1.5cm }
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<p>
千夜一夜物語
この長大な説話集の起源についてはいろいろな説があるが、今日ではペルシアの説話集「千物語」に由来するといわれる。アラビア語に翻訳されたのは850年ごろ。長い年月の間に、バグダットやカイロあたりの民話も加えられて、現代のような形になった。この「アラビアン・ナイト」の無削除完全版として有名なバートン版を、大場正史氏の生涯をかけた翻訳でおくる。健康なエロティシズムと強靭な精神にあふれたイスラム世界への最高の案内書
.</p>
</body>
</html>
page-break-before (印刷の際の改ページ指示要素の前で行う)
CSS2
page-break-beforeとは、適用された要素の直後に改ページ位置を指定するためのプロパティです。初期値はautoであり改ページの制御は行われませんが、alwaysを指定すると常に改ページされ、avoidを指定すると逆に改ページされません。また、左右両開きでどちらに位置させるかはleftやrightで指定します。
| 値 | auto | always | avoid | left | right | inherit |
|---|---|
| 初期値 | auto |
| 適用 | ブロック要素 |
| 継承 | しない |
| 値 | 機能 |
|---|---|
| auto | 何も制御しない |
| always | その位置で必ず改ページ |
| avoid | 改ページの禁止 |
| left | 左のページになるような改ページ |
| right | 右のページになるような改ページ |
適応要素 すべての要素
継承 ：する (デフォルト値 ＝auto )
印刷の際の改ページを指定します。
この属性は、指定された要素の直前で改ページします。
style="page-break-before:always">
Und die zweite Seite</h2>
page-break-after印刷の際の改ページ指示要素の後で行う
CSS2
page-break-afterとは、適用された要素の直前に改ページ位置を指定するためのプロパティです。初期値はautoであり改ページの制御は行われませんが、alwaysを指定すると常に改ページされ、avoidを指定すると逆に改ページされません。また、左右両開きでどちらに位置させるかはleftやrightで指定します。
| 値 | auto | always | avoid | left | right | inherit |
|---|---|
| 初期値 | auto |
| 適用 | ブロック要素 |
| 継承 | しない |
| 値 | 機能 |
|---|---|
| auto | 何も制御しない |
| always | その位置で必ず改ページ |
| avoid | 改ページの禁止 |
| left | 左のページになるような改ページ |
| right | 右のページになるような改ページ |
適応要素 すべての要素
継承 ：する (デフォルト値 ＝auto )
印刷の際の改ページを指定します。
この属性は指定された要素の直後で改ページします。
style="page-break-after:avoid;
height:22cm; border:
thin solid black; padding:0.5cm">Leerraum</p>
orphans 最後の段落の最低行数を指定
CSS2
orphansとは、ページに登場する最後の段落に表示する最低限の行数を指定するためのプロパティです。行数を整数で指定します。初期値は2となっています。
| 値 | <整数値> | inherit |
|---|---|
| 初期値 | 2 |
| 適用 | ブロック要素 |
| 継承 | する |
| 値 | 機能 |
|---|---|
| 数値 | 必要な行の数 |
適応要素 すべての要素
継承 ：する (デフォルト値 ＝auto )
印刷の際、最後に出現する段落の最低行数を指定します。
<head>
<title>orphans</title>
<style type="text/css">
p,blockqoute { orphans:3; }
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000">
WEB印刷
最後の段落の最低行数を指定
印刷
印刷の際、最後に出現する段落の最低行数を指定します。ブライザの印刷プレビューで確認してください
</body>
</html>
widows 最初の段落の最低行数を指定
windowsとは、ページに登場する最初の段落に表示する最低限の行数を指定するためのプロパティです。行数を整数で指定します。初期値は2となっています。
CSS2
| 値 | 機能 |
|---|---|
| 数値 | 必要な行の数 |
適応要素 すべての要素
継承 ：する (デフォルト値 ＝auto )
印刷の際、最初に出現する段落の最低行数を指定します。
<head>
<title>widows</title>
<style type="text/css">
p,blockqoute { widows:3; }
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<h1>Zu dieser Seite</h1>
<p>Auf dieser Seite gibt es Absätze.</p>
<blockquote>und Zitate</blockquote>
<p>klich getrennt!</p>
</body>
</html>
Benannte Site 指定した要素内での改ページを禁止する
CSS2
| 値 | 機能 |
|---|---|
| auto | 何も制御しない |
| avoid | 改ページの禁止 |
適応要素 すべての要素
継承 ：する (デフォルト値 ＝auto )
印刷の際の改ページを禁止します。
その属性で指定された要素内では改ページしません。
目的別属性
広告