From 1f5e5c4de6791f1c512ee310fbc4f240819c7f99 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 12 Oct 2021 11:30:36 +0900 Subject: CSS ページメディアに関する文書を更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/10/11 時点の英語版に同期 --- files/ja/web/css/_colon_first/index.md | 115 ++++++++++++++------------------- 1 file changed, 48 insertions(+), 67 deletions(-) (limited to 'files/ja/web/css/_colon_first') diff --git a/files/ja/web/css/_colon_first/index.md b/files/ja/web/css/_colon_first/index.md index fd5162848a..3e320393c3 100644 --- a/files/ja/web/css/_colon_first/index.md +++ b/files/ja/web/css/_colon_first/index.md @@ -1,47 +1,49 @@ --- title: ':first' -slug: 'Web/CSS/:first' +slug: Web/CSS/:first tags: - '@page' - CSS - - CSS ページ化メディア - - Layout - - Pseudo-class + - レイアウト + - 擬似クラス - Reference - - Selector + - セレクター - Web -translation_of: 'Web/CSS/:first' +browser-compat: css.selectors.first +translation_of: Web/CSS/:first --- -
{{CSSRef}}
+{{CSSRef}} -

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

+**`:first`** は [CSS](/ja/docs/Web/CSS) の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)で、{{cssxref("@page")}} [アットルール](/ja/docs/Web/CSS/At-rule)で使用され、印刷文書の最初のページを表します。 (一般的なノードの最初の要素については {{cssxref(":first-child")}} を参照してください。) -
/* 印刷時に最初のページを選択 */
+```css
+/* 印刷時に最初のページを選択 */
 @page :first {
   margin-left: 50%;
   margin-top: 50%;
-}
+} +``` -
-

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

-
+> **Note:** この擬似クラスを使用してすべての CSS プロパティを変更できるわけではありません。変更できるのは文書のマージン、 {{cssxref("orphans")}}、{{cssxref("widows")}}、ページ区切りのみです。さらに、マージンを定義するときには[絶対的な長さ](/ja/docs/Web/CSS/length#absolute_length_units)の単位のみしか使用できません。他のすべてのプロパティは無視されます。 -

構文

+## 構文 {{csssyntax}} -

例

+

例

-

HTML

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

最初のページです。

+

2 枚目のページです。

+ +``` -

CSS

+### CSS -
@page :first {
+```css
+@page :first {
   margin-left: 50%;
   margin-top: 50%;
 }
@@ -49,52 +51,31 @@ translation_of: 'Web/CSS/:first'
 p {
   page-break-after: always;
 }
-
+``` -

JavaScript

+### JavaScript -
document.querySelector("button").addEventListener('click', () => {
+```js
+document.querySelector("button").addEventListener('click', () => {
   window.print();
 });
-
- -

結果

- -

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

- -

{{ EmbedLiveSample('Examples', '80%', '150px') }}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Paged Media', '#left-right-first', ':first')}}{{Spec2('CSS3 Paged Media')}}変更なし。
{{SpecName('CSS2.1', 'page.html#page-selectors', ':first')}}{{Spec2('CSS2.1')}}初回定義。
- -

ブラウザーの互換性

- -

{{Compat("css.selectors.first")}}

- -

関連情報

- - +``` + +### 結果 + +［印刷］ボタンを押すと、例を印刷します。最初のページの言葉は中央付近に印刷されますが、他のページのコンテンツは既定の位置に印刷されます。 + +{{ EmbedLiveSample('Examples', '80%', '150px') }} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{Cssxref("@page")}} +- ページに関する他の擬似クラス: {{Cssxref(":left")}}, {{Cssxref(":right")}} -- cgit v1.2.3-54-g00ecf