@page @規則 で使われる CSS:first 疑似クラスは、印刷文書の最初のページを表します。

/* 印刷時に最初のページを選択 */
@page :first {
  margin-left: 50%;
  margin-top: 50%;
}

メモ: この疑似クラスを使用してすべての CSS プロパティを変更できるわけではありません。変更できるのは文書のマージン、 orphanswidows、 ページ区切りのみです。さらに、マージンを定義するときには絶対的な長さの単位のみしか使用できません。他のすべてのプロパティは無視されます。

構文

:first

HTML

<p>最初のページです。</p>
<p>2枚目のページです。</p>
<button>印刷</button>

CSS

@page :first {
  margin-left: 50%;
  margin-top: 50%;
}

p {
  page-break-after: always;
}

JavaScript

document.querySelector("button").onclick = function () {
  window.print();
}

結果

[印刷]ボタンを押すと、例を印刷します。最初のページの言葉は中央付近に印刷されますが、他のページのコンテンツは既定の位置に印刷されます。

仕様書

仕様書 策定状況 コメント
CSS Paged Media Module Level 3
:first の定義
草案 変更なし。
CSS Level 2 (Revision 1)
:first の定義
勧告 初回定義。

ブラウザー実装状況

 

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome ? Edge 完全対応 ありFirefox 未対応 なしIE 完全対応 8Opera 完全対応 9.2Safari ? WebView Android ? Chrome Android ? Edge Mobile 完全対応 ありFirefox Android 未対応 なしOpera Android ? Safari iOS ? Samsung Internet Android ?

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明

 

関連項目

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, ethertank, sosleepy
最終更新者: mfuji09,