:first

:firstCSS擬似クラスで、@page アットルールで使用され、印刷文書の最初のページを表します。 (一般的なノードの最初の要素については :first-child を参照してください。)

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

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

構文

:first

HTML

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

CSS

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

p {
  page-break-after: always;
}

JavaScript

js
document.querySelector("button").addEventListener("click", () => {
  window.print();
});

結果

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

仕様書

Specification
CSS Paged Media Module Level 3
# left-right-first

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
First page pseudo-class (:first)

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報