cman.jp > WEBページ作成TOP > CSSリファレンス > 「特定の名前を付けてページを定義」
WEBページ作成
広告
@page,page,size「ページのスタイル指定」
「@page」は、印刷時のページに関する指定をします。余白や縦横の配置、1枚に縮小出力、複数枚に分割出力するかなどを指定します。
「page」は、「@page」の指定内容につけられた名前を指定して、「@page」の指定内容を要素に適用します。
「size」は、「@page」内でページサイズと縦横の配置を指定します。
| CSS Ver. | 適用要素 | 継承 |
|---|---|---|
| 3.0 *1 | ブロック要素 *2 | しない |
*2 size は、@page 内
広告
@page,page,sizeの指定方法
| 構文 | |
|---|---|
|
@page ページ名{size ; margin ;}; page : auto | ページ名; size : [length]{1,2} | auto | [[page-size] || [ portrait | landscape]]; |
|
| プロパティ/設定値 | 意味 |
| @page ページ名{size; margin;}; |
・ページ名 = page プロパティに指定するページ名 ・size = ページのサイズを指定。下記 size プロパティ参照 ・margin = ページのマージン（margin,margin-bottom,margin-left,margin-right,margin-top）を指定する。 |
| デフォルト：「タグ毎のスタイル初期値」を参照 | |
| page : auto; | ブラウザに依存 |
| page : ページ名; | @page に指定したページ名 |
| デフォルト：「タグ毎のスタイル初期値」を参照 | |
| size : auto; | ブラウザに依存 |
| size : length; |
１個、または、スペースで区切って２個指定可能。 １個指定は、幅と高さが同じ値になる。２個指定は、１個目が幅、２個目が高さになる。 |
| size : page-size; |
ページサイズを下記のいずれか１つを指定。 A5，A4，A3，B5，B4，letter，legal ，ledger のいずれか１つ |
| size : portrait; | 縦長に配置。page-size の指定がない場合、ページサイズはブラウザに依存。 |
| size : landscape; | 横長に配置。page-size の指定がない場合、ページサイズはブラウザに依存。 |
| デフォルト：「タグ毎のスタイル初期値」を参照 | |
@page,page,size のサンプル
<style type="text/css">
.common div{
font-family : "メイリオ", sans-serif;
width : 290px;
border : 2px solid #6495ed;
background : #e7e7ff;
padding : 10px;
}
div.cssTitle {
margin-top : 10px;
background : #6495ed;
color : #fff;
font-weight : bold;
}
.@page pagename{
size : A4 portrait;
margin : 10px;
}
.page1{
page : pagename;
}
<!-- html -->
<div class="common">
<div class="cssTitle">size : A4 portrait;</div>
<div class="page1">
Ａ４で縦長に配置で出力。 ～ Ａ４で縦長に配置で出力。
</div>
</div>
size : A4 portrait;
Ａ４で縦長に配置で出力。
Ａ４で縦長に配置で出力。
Ａ４で縦長に配置で出力。
Ａ４で縦長に配置で出力。
Ａ４で縦長に配置で出力。
Ａ４で縦長に配置で出力。
Ａ４で縦長に配置で出力。
Ａ４で縦長に配置で出力。
Ａ４で縦長に配置で出力。
Ａ４で縦長に配置で出力。
Ａ４で縦長に配置で出力。
Ａ４で縦長に配置で出力。
Ａ４で縦長に配置で出力。
Ａ４で縦長に配置で出力。
Ａ４で縦長に配置で出力。
Ａ４で縦長に配置で出力。
Ａ４で縦長に配置で出力。
Ａ４で縦長に配置で出力。
Ａ４で縦長に配置で出力。
Ａ４で縦長に配置で出力。
Ａ４で縦長に配置で出力。
Ａ４で縦長に配置で出力。
Ａ４で縦長に配置で出力。
Ａ４で縦長に配置で出力。
Ａ４で縦長に配置で出力。
Ａ４で縦長に配置で出力。
Ａ４で縦長に配置で出力。
Ａ４で縦長に配置で出力。
Ａ４で縦長に配置で出力。
Ａ４で縦長に配置で出力。
| 関連するCSS(STYLE) | |
|---|---|
| page-break-after | 改ページの位置：ボックス後 |
| size | ページサイズを定義 |
| orphans | 前ページの末尾に最小限必要な行数 |
| widows | 次ページの先頭に最小限必要な行数 |
| page-break-before | 改ページの位置：ボックス前 |
| page-break-inside | 改ページの位置：ボックス内 |
広告