:first

@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 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
First page pseudo-class (:first)Chrome 完全対応 18Edge 完全対応 12Firefox 未対応 なしIE 完全対応 8Opera 完全対応 9.2Safari 完全対応 6WebView Android 完全対応 4.4Chrome Android 完全対応 18Firefox Android 未対応 なしOpera Android 完全対応 10.1Safari iOS 完全対応 6Samsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
未対応  
未対応

 

関連項目