[CRON] sync translated content

3 files changed, 658 insertions, 0 deletions

diff --git a/files/ja/conflicting/web/api/credentialscontainer/create/index.html b/files/ja/conflicting/web/api/credentialscontainer/create/index.html
new file mode 100644
index 0000000000..7203131ea6
--- /dev/null
+++ b/files/ja/conflicting/web/api/credentialscontainer/create/index.html
@@ -0,0 +1,105 @@
+---
+title: PublicKeyCredentialCreationOptions.excludeCredentials
+slug: conflicting/Web/API/CredentialsContainer/create
+tags:
+  - API
+  - Property
+  - PublicKeyCredentialCreationOptions
+  - Reference
+  - Web Authentication API
+  - WebAuthn
+  - プロパティ
+translation_of: Web/API/PublicKeyCredentialCreationOptions/excludeCredentials
+original_slug: Web/API/PublicKeyCredentialCreationOptions/excludeCredentials
+---
+<div>{{APIRef("Web Authentication API")}}{{securecontext_header}}</div>
+
+<p><strong><code>excludeCredentials</code></strong> は {{domxref("PublicKeyCredentialCreationOptions")}} 辞書の任意のプロパティであり、指定されたユーザーに既に存在する公開鍵の記述子を要素に持つ {{jsxref("Array")}} オブジェクトです。これは既存のユーザーに新しい認証情報を生成することを避けたい場合、パーティのサーバーから提供されます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox"><em>excludeCredentials </em>= <em>publicKeyCredentialCreationOptions</em>.excludeCredentials</pre>
+
+<h3 id="Value" name="Value">値</h3>
+
+<p>{{jsxref("Array")}} で、以下のプロパティを持つオブジェクトを要素に持ちます。</p>
+
+<dl>
+ <dt><code>type</code></dt>
+ <dd>文字列で、生成された公開鍵の認証情報の種類を表します。この文書の執筆時点 (2019年3月) では、 "<code>public-key</code>" のみが使用可能です。</dd>
+ <dt><code>id</code></dt>
+ <dd>{{domxref("BufferSource")}} で、既存の公開鍵の認証情報の識別子 ({{domxref("PublicKeyCredential.rawId")}}) に一致します。子の識別子は <code>PublicKeyCredential</code> インスタンスの生成時に生成されます。</dd>
+ <dt><code>transports</code> {{optional_inline}}</dt>
+ <dd>文字列の {{jsxref("Array")}} で、クライアントと認証機器の通信方法を記述します。使用可能な文字列は次の通りです。
+ <ul>
+  <li>"<code>usb</code>": 認証機器は取り外し可能な USB 接続で接続することができます</li>
+  <li>"<code>nfc</code>": 認証機器は <a href="https://en.wikipedia.org/wiki/Near-field_communication">NFC (Near Field Communication)</a> を通して使用することができます</li>
+  <li>"<code>ble</code>": 認証機器は <a href="https://en.wikipedia.org/wiki/Bluetooth_Low_Energy">BLE (Bluetooth Low Energy)</a> を通して使用することができます</li>
+  <li>"<code>internal</code>": 認証機器はクライアント端末の中に埋め込まれています (取り外せません)。</li>
+ </ul>
+ </dd>
+</dl>
+
+<p>認証機器がすでにそのような公開鍵認証情報の一つを含んでいる場合、クライアントは {{domxref("DOMException")}} を発生さえるか、ユーザーに新しい認証情報を生成したいかを確認するかします。</p>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<pre class="brush: js">var publicKey = {
+  excludeCredentials: [
+    {
+      type: "public-key",
+      // the id for john.doe@example.com
+      id  : new Uint8Array(26) /* this actually is given by the server */
+    },
+    {
+      type: "public-key",
+      // the id for john-doe@example.com
+      id : new Uint8Array(26) /* another id */
+    }
+  ],
+  challenge: new Uint8Array(26) /* this actually is given from the server */,
+  rp: {
+    name: "Example CORP",
+    id  : "login.example.com"
+  },
+  user: {
+    id: new Uint8Array(26), /* To be changed for each user */
+    name: "jdoe@example.com",
+    displayName: "John Doe",
+  },
+  pubKeyCredParams: [ {
+    type: "public-key",
+    alg: -7 } ]
+};
+
+navigator.credentials.create({ publicKey })
+  .then(function (newCredentialInfo) {
+    // send attestation response and client extensions
+    // to the server to proceed with the registration
+    // of the credential
+  }).catch(function (err) {
+     console.error(err);
+  });</pre>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">状態</th>
+   <th scope="col">備考</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('WebAuthn','#dom-publickeycredentialcreationoptions-excludecredentials','excludeCredentials')}}</td>
+   <td>{{Spec2('WebAuthn')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat("api.PublicKeyCredentialCreationOptions.excludeCredentials")}}</p>
diff --git a/files/ja/conflicting/web/api/credentialscontainer/create_18148a708412fc42b1affe2f08eab270/index.html b/files/ja/conflicting/web/api/credentialscontainer/create_18148a708412fc42b1affe2f08eab270/index.html
new file mode 100644
index 0000000000..42f3cdcdfa
--- /dev/null
+++ b/files/ja/conflicting/web/api/credentialscontainer/create_18148a708412fc42b1affe2f08eab270/index.html
@@ -0,0 +1,147 @@
+---
+title: PublicKeyCredentialCreationOptions
+slug: >-
+  conflicting/Web/API/CredentialsContainer/create_18148a708412fc42b1affe2f08eab270
+tags:
+  - API
+  - Dictionary
+  - PublicKeyCredentialCreationOptions
+  - Reference
+  - Web Authentication API
+  - WebAuthn
+translation_of: Web/API/PublicKeyCredentialCreationOptions
+original_slug: Web/API/PublicKeyCredentialCreationOptions
+---
+<div>{{APIRef("Web Authentication API")}}{{securecontext_header}}</div>
+
+<p><code><strong>PublicKeyCredentialCreationOptions</strong></code> は <a href="/ja/docs/Web/API/Web_Authentication_API">Web Authentication API</a> の辞書で、 {{domxref("CredentialsContainer.create()","navigators.credentials.create()")}} で {{domxref("PublicKeyCredential")}} を生成するために渡されるオプションを保持します。</p>
+
+<h2 id="Properties" name="Properties">プロパティ</h2>
+
+<dl>
+ <dt>{{domxref("PublicKeyCredentialCreationOptions.rp")}}</dt>
+ <dd>資格情報の生成のリクエスト元を示すオブジェクトです。</dd>
+ <dt>{{domxref("PublicKeyCredentialCreationOptions.user")}}</dt>
+ <dd>資格情報が生成されるユーザーアカウントを示すオブジェクトです。</dd>
+ <dt>{{domxref("PublicKeyCredentialCreationOptions.challenge")}}</dt>
+ <dd>{{domxref("BufferSource")}} 型で、証明書利用者のサーバーによって生成され、<a href="https://en.wikipedia.org/wiki/Challenge%E2%80%93response_authentication">暗号チャレンジ</a>として使用されるものです。この値は認証プロバイダーによって署名され、署名は {{domxref("AuthenticatorAssertionResponse.signature")}} の一部として送り返されます。</dd>
+ <dt>{{domxref("PublicKeyCredentialCreationOptions.pubKeyCredParams")}}</dt>
+ <dd>{{jsxref("Array")}} 型で、資格情報に要求される機能を指定する要素の配列です。暗号化署名の操作で使用される種類とアルゴリズムを含みます。この配列は設定の降順で並べ替えられます。</dd>
+ <dt>{{domxref("PublicKeyCredentialCreationOptions.timeout")}} {{optional_inline}}</dt>
+ <dd>数値のヒントで、取得操作が完了するまで呼び出し元が待機する時間をミリ秒単位で表します。このヒントは、ブラウザーによって上書きされる場合があります。</dd>
+ <dt>{{domxref("PublicKeyCredentialCreationOptions.excludeCredentials")}} {{optional_inline}}</dt>
+ <dd>{{jsxref("Array")}} で、既存の資格情報の記述子の配列です。これは、すでに資格情報を持つ既存のユーザーが新しい公開鍵資格情報を生成することを防ぐために、認証者によって提供されます。</dd>
+ <dt>{{domxref("PublicKeyCredentialCreationOptions.authenticatorSelection")}} {{optional_inline}}</dt>
+ <dd>生成操作で使用可能な認証機器を絞り込む条件をプロパティに持つオブジェクトです。</dd>
+ <dt>{{domxref("PublicKeyCredentialCreationOptions.attestation")}} {{optional_inline}}</dt>
+ <dd>{{jsxref("String")}} で、認証結果を (認証機器の元が) 送信する方法を示します。</dd>
+ <dt>{{domxref("PublicKeyCredentialCreationOptions.extensions")}} {{optional_inline}}</dt>
+ <dd>複数のクライアント拡張機能の入力を持つオブジェクトです。これらの拡張機能は、追加の処理を要求するために使用されます (例えば、従来の FIDO API 資格情報を処理、認証端末上でのテキストの要求など)。</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">メソッド</h2>
+
+<p>なし。</p>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<pre class="brush: js;">// some examples of COSE algorithms
+const cose_alg_ECDSA_w_SHA256 = -7;
+const cose_alg_ECDSA_w_SHA512 = -36;
+
+var createCredentialOptions = {
+    // Format of new credentials is publicKey
+    publicKey: {
+        // Relying Party
+        rp: {
+            name: "Example CORP",
+            id: "login.example.com",
+            icon: "https://login.example.com/login.ico"
+        },
+        // Cryptographic challenge from the server
+        challenge: new Uint8Array(26),
+        // User
+        user: {
+            id: new Uint8Array(16),
+            name: "john.p.smith@example.com",
+            displayName: "John P. Smith",
+        },
+        // Requested format of new keypair
+        pubKeyCredParams: [{
+            type: "public-key",
+            alg: cose_alg_ECDSA_w_SHA256,
+        }],
+        // Timeout after 1 minute
+        timeout: 60000,
+        // Do not send the authenticator's origin attestation
+        attestation: "none",
+        extensions: {
+          uvm: true,
+          exts: true
+        },
+        // Filter out authenticators which are bound to the device
+        authenticatorSelection:{
+          authenticatorAttachment: "cross-platform",
+          requireResidentKey: true,
+          userVerification: "preferred"
+        },
+        // Exclude already existing credentials for the user
+        excludeCredentials: [
+          {
+            type: "public-key",
+            // the id for john.doe@example.com
+            id  : new Uint8Array(26) /* this actually is given by the server */
+          },
+          {
+            type: "public-key",
+            // the id for john-doe@example.com
+            id : new Uint8Array(26) /* another id */
+          }
+        ]
+    }
+};
+
+// Create the new credential with the options above
+navigator.credentials.create(createCredentialOptions)
+  .then(function (newCredentialInfo) {
+    var attestationResponse = newCredentialInfo.response;
+    var clientExtensionsOutputs = newCredentialInfo.getClientExtensionsResults();
+
+    // Send the response to the relying party server
+    // it will verify the content and integrity before
+    // creating a new credential
+
+  }).catch(function (err) {
+    // Deal with any error properly
+    console.error(err);
+  });;
+</pre>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">状態</th>
+   <th scope="col">備考</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('WebAuthn','#dictdef-publickeycredentialcreationoptions', 'PublicKeyCredentialCreationOptions dictionary')}}</td>
+   <td>{{Spec2('WebAuthn')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat("api.PublicKeyCredentialCreationOptions")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{domxref("PublicKeyRequestOptions")}}: 公開鍵を受け取る操作のオプションを提供する辞書</li>
+</ul>
diff --git a/files/ja/conflicting/web/css/media_queries/using_media_queries/index.html b/files/ja/conflicting/web/css/media_queries/using_media_queries/index.html
new file mode 100644
index 0000000000..fa90c0bda0
--- /dev/null
+++ b/files/ja/conflicting/web/css/media_queries/using_media_queries/index.html
@@ -0,0 +1,406 @@
+---
+title: メディア
+slug: conflicting/Web/CSS/Media_Queries/Using_media_queries
+tags:
+  - CSS
+  - Example
+  - Guide
+  - Intermediate
+  - NeedsMarkupWork
+  - NeedsUpdate
+  - Web
+  - ガイド
+  - 中級者
+translation_of: Web/Progressive_web_apps/Responsive/Media_types
+original_slug: Web/Progressive_web_apps/Responsive/Media_types
+---
+<div>{{QuickLinksWithSubpages("/ja/docs/Web/Progressive_web_apps/Responsive/")}}</div>
+
+<p class="summary">これは <a href="/ja/docs/Web/Guide/CSS/Getting_Started">CSS の第一歩</a>チュートリアル第14章で、第1部の最終章です。このチュートリアルの多くのページでは、 CSS プロパティや値と、そのコンテンツを表示する方法を指定するための使い方に焦点を当てていました。</p>
+
+<h2 class="clearLeft" id="Information_Media" name="Information_Media">メディアについて</h2>
+
+<p>CSS の目的は、コンテンツがどのようにユーザーに表示されるのかを指定することです。この表示には複数の表現形式をとることができます。</p>
+
+<p>例えば、おそらくあなたはこれをディスプレイ付きの端末で読んでいるでしょう。しかし、大画面に映して多くの人に読んでもらいたいと思うこともありますし、印刷したいと思ってう場合もあるでしょう。これらの様々なメディアには、それぞれ異なる特性があります。 CSS はメディアの種類に応じてコンテンツを提示する機能を持っています。</p>
+
+<p>あるメディア種別に特有の規則を定義するには、 {{CSSxRef("@media")}} に続けてメディア種別を記述し、さらに続けて波括弧の中に規則を記述します。</p>
+
+<div class="tuto_example">
+<h4 class="tuto_type" id="Example" name="Example">例</h4>
+
+<p>あるウェブサイトの文書に、主要なサイトメニューを含むナビゲーション領域が設けられているとします。</p>
+
+<p>マークアップ言語では、ナビゲーション領域の親要素は <strong>id</strong> <code>nav-area</code> を持っています ({{HTMLVersionInline(5)}} では、これは <strong>id</strong> 属性を持つ {{HTMLElement("div")}} 要素での代わりに、{{HTMLElement("nav")}} 要素でマークアップできます)。</p>
+
+<p>文書を印刷するときにはナビゲーション領域は無意味ですから、この CSS (下記) では、文書を印刷する際にはナビゲーション領域を削除します。</p>
+
+<pre class="brush:css">@media print {
+  #nav-area {display: none;}
+  }
+</pre>
+</div>
+
+<p>よく知られたメディア種別には次のようなものがあります。</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>screen</code></td>
+   <td>端末のカラーディスプレイ</td>
+  </tr>
+  <tr>
+   <td><code>print</code></td>
+   <td>ページ単位に印刷されるメディア</td>
+  </tr>
+  <tr>
+   <td style="padding-right: 1em;"><code>projection</code></td>
+   <td>プロジェクター</td>
+  </tr>
+  <tr>
+   <td><code>all</code></td>
+   <td>すべてのメディア (既定値)</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="tuto_details">
+<h4 class="tuto_type" id="More_details" name="More_details">より詳しく</h4>
+
+<p>ある規則の集合にメディア種別を定義する方法は、他にもあります。</p>
+
+<p>文書のマークアップ言語によっては、スタイルシートが文書にリンクされたときに、メディア種別を定義できるものがあります。例えば、 HTML では <code>LINK</code> 要素の <code>media</code> 属性を使ってメディア種別を指定することができます。</p>
+
+<p>CSS ではスタイルシートの初めに {{CSSxRef("@import")}} を使って、 URL から他のスタイルシートを読み込むことができ、オプションとしてメディア種別を指定することができます。</p>
+
+<p>これらは、様々なメディア種別のスタイル付け規則を異なるファイルに分離する方法です。</p>
+
+<p>メディア種別の完全な説明は、 CSS 仕様書の <a href="http://www.w3.org/TR/CSS21/media.html">Media</a> をご覧ください。</p>
+
+<p>{{CSSxRef("display")}} プロパティのその他の利用例は、このチュートリアルの後で登場する <a href="/ja/docs/Web/Guide/CSS/Getting_Started/XML_data">XML データ</a> のページにあります。</p>
+</div>
+
+<h3 id="Printing" name="Printing">印刷</h3>
+
+<p>CSS には、印刷や、一般のページ付けされたメディアに特有の対応があります。</p>
+
+<p>{{CSSxRef("@page")}} 規則で、ページマージンを設定できます。両面印刷には、マージンを <code>@page:left</code> と <code>@page:right</code> で別々に指定できます。</p>
+
+<p>印刷メディアでは通常、インチ (<code>in</code>) や ポイント (<code>pt</code> = 1/72 inch)、センチメートル (<code>cm</code>) や ミリメートル (<code>mm</code>) など、適切な単位を使います。フォントの大きさにあわせるために em (<code>em</code>) を使ったり、パーセント値 (<code>%</code>) を使ったりするのも同様に適切です。</p>
+
+<p>ページ境界における文書の内容の分割方法を、 {{CSSxRef("page-break-before")}}, {{CSSxRef("page-break-after")}}, {{CSSxRef("page-break-inside")}} プロパティを使って制御することができます。</p>
+
+<div class="tuto_example">
+<h4 class="tuto_type" id="Example_2" name="Example_2">例</h4>
+
+<p>次の規則はページの四辺の余白を1インチに設定します。</p>
+
+<pre class="brush:css">@page {margin: 1in;}
+</pre>
+
+<p>次の規則は、すべての <small>H1</small> 要素が確実に新しいページで始まるようにします。</p>
+
+<pre class="brush:css">h1 {page-break-before: always;}
+</pre>
+</div>
+
+<div class="tuto_details">
+<h4 class="tuto_type" id="More_details_2" name="More_details_2">さらに詳しく</h4>
+
+<p>ページ付メディアへの CSS の対応の詳細は、 CSS 仕様書の <a href="http://www.w3.org/TR/CSS21/page.html">Paged media</a> をご覧ください。</p>
+
+<p>CSS の他の機能と同様に、印刷はブラウザーの選択とその設定に依存します。例えば、 Mozilla ブラウザーでは、印刷用に既定の余白、ヘッダー、フッターが用意されています。印刷される書式を完全に制御することはできないことを覚えておいてください。印刷時にすべてのユーザーのブラウザーの選択や設定を予測することは不可能です。</p>
+</div>
+
+<h3 id="User_interfaces" name="User_interfaces">ユーザーインターフェイス</h3>
+
+<p>CSS は、コンピューターのディスプレイのようなユーザーインターフェイスを持つ端末のために、特別なプロパティを持っています。これらのプロパティは、ユーザーが作業するインターフェイスの近哲の表示方法を動的に変更することができます。</p>
+
+<p>5つの特別なセレクターがあります。</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><strong>セレクター</strong></td>
+   <td><strong>選択対象</strong></td>
+  </tr>
+  <tr>
+   <td><code>E{{CSSxRef(":hover")}}</code></td>
+   <td>ポインターが上にあるすべての E 要素</td>
+  </tr>
+  <tr>
+   <td><code>E{{CSSxRef(":focus")}}</code></td>
+   <td>キーボードフォーカスを持つすべての E 要素</td>
+  </tr>
+  <tr>
+   <td><code>E{{CSSxRef(":active")}}</code></td>
+   <td>現在のユーザーの行動に関係する E 要素</td>
+  </tr>
+  <tr>
+   <td><code>E{{CSSxRef(":link")}}</code></td>
+   <td>ユーザーが未訪問の URL へのハイパーリンクのある E 要素</td>
+  </tr>
+  <tr>
+   <td><code>E{{CSSxRef(":visited")}}</code></td>
+   <td>ユーザーが訪問済みの URL へのハイパーリンクのある E 要素</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>注: </strong>:visited セレクターで獲得できる情報は {{gecko("2.0")}} で制限されました。詳細については<a href="/ja/docs/Web/CSS/Privacy_and_the_:visited_selector">プライバシーと :visited セレクター</a>をご覧ください。</p>
+</div>
+
+<p>{{CSSxRef("cursor")}} プロパティは、ポインターの形を定義します。よく使われる形は以下のとおりです。マウスを以下のリストの項目上に置いて、あなたのブラウザーで実際に使われるポインターの形を見てみてください。</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <td><strong>セレクター</strong></td>
+   <td><strong>選択対象</strong></td>
+  </tr>
+ </thead>
+ <tbody>
+  <tr style="cursor: pointer;">
+   <td><code>pointer</code></td>
+   <td>リンクを示します</td>
+  </tr>
+  <tr style="cursor: wait;">
+   <td><code>wait</code></td>
+   <td>プログラムが入力を受け付けられないことを示します</td>
+  </tr>
+  <tr style="cursor: progress;">
+   <td><code>progress</code></td>
+   <td>プログラムが動作しているが、入力が受付可能であることを示します</td>
+  </tr>
+  <tr style="cursor: default;">
+   <td><code>default</code></td>
+   <td>既定値 (通常は矢印)</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{CSSxRef("outline")}} プロパティは、キーボードフォーカスを表すためによく使われる輪郭を作ります。その値は {{CSSxRef("border")}} プロパティに似ていますが、特定の辺だけには定義できない点が異なります。</p>
+
+<p>ユーザーインターフェイスの他のいくつかの機能は、通常の方法で、属性を使って提供されます。例えば、利用不能、もしくは読み取り専用の要素は <strong>disabled</strong> 属性または <strong>readonly</strong> 属性を持ちます。セレクターは、他の属性と同じく、 <code>[disabled]</code> や <code>[readonly]</code> のように角括弧を使ってこれらの属性を定義することができます。</p>
+
+<div class="tuto_example">
+<h4 class="tuto_type" id="Example_3" name="Example_3">例</h4>
+
+<p>次の規則は、ユーザー操作に対し、動的に変化するようなボタンのスタイルを定義します。</p>
+
+<pre class="brush:css">.green-button {
+  background-color:#cec;
+  color:#black;
+  border:2px outset #cec;
+  padding: 5px 10px;
+  }
+
+.green-button[disabled] {
+  background-color:#cdc;
+  color:#777;
+  }
+
+.green-button:active, .green-button.active {
+  border-style: inset;
+  }
+</pre>
+
+<pre class="brush:html">&lt;table&gt;
+ &lt;tbody&gt;
+  &lt;tr&gt;
+   &lt;td&gt;&lt;button class="green-button" disabled&gt;Click me&lt;/button&gt;&lt;/td&gt;
+   &lt;td&gt;&lt;button class="green-button"&gt;Click me&lt;/button&gt;&lt;/td&gt;
+   &lt;td&gt;&lt;button class="green-button active"&gt;Click me&lt;/button&gt;&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr style="line-height:25%;"&gt;
+   &lt;td&gt;&amp;nbsp;&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr style="font-style:italic;"&gt;
+   &lt;td&gt;disabled&lt;/td&gt;
+   &lt;td&gt;normal&lt;/td&gt;
+   &lt;td&gt;active&lt;/td&gt;
+  &lt;/tr&gt;
+ &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<h4 id="Live_Sample" name="Live_Sample"><strong>ライブ例</strong></h4>
+
+<p>{{ EmbedLiveSample('User_interfaces', '', '', '', 'Web/Apps/Progressive/Responsive/Media_types') }}</p>
+
+<p>フル機能を持つボタンでは、デフォルトならボタンの周囲に濃い輪郭線を描き、キーボードフォーカスを受けるとボタン表面に点線の輪郭線を描きます。ポインターを上に置いたときのホバー効果も持っているかもしれません。</p>
+</div>
+
+<div class="tuto_details">
+<h4 class="tuto_type" id="More_details_3" name="More_details_3">さらに詳しく</h4>
+
+<p>CSS におけるユーザーインターフェイスについての詳細は、 CSS 仕様書の <a href="http://www.w3.org/TR/CSS21/ui.html">User interface</a> をご覧ください。</p>
+このチュートリアルのパートIIでは、 Mozilla のユーザーインターフェイスのためのマークアップ言語の例があります。
+
+
+</div>
+
+<h2 id="Action_Printing_a_document" name="Action_Printing_a_document">実習: 文書を印刷する</h2>
+
+<div class="note">
+<p><strong>注:</strong> CSS カウンターを使ったページ番号の印刷は Firefox でのみ動作します。仕様書では動作が定義されているか、他のブラウザーで対応するかどうかは不明確です。 <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=774830">issue filed with Chromium</a> を参照してください。</p>
+</div>
+
+<ol>
+ <li>新しい HTML 文書 <code>doc4.html</code> を作成してください。次の内容をコピー＆ペーストしてください。
+
+  <pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;Print sample&lt;/title&gt;
+    &lt;link rel="stylesheet" href="style4.css"&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;h1&gt;Section A&lt;/h1&gt;
+    &lt;p&gt;This is the first section...&lt;/p&gt;
+    &lt;h1&gt;Section B&lt;/h1&gt;
+    &lt;p&gt;This is the second section...&lt;/p&gt;
+    &lt;div id="print-head"&gt;
+      Heading for paged media
+    &lt;/div&gt;
+    &lt;div id="print-foot"&gt;
+      Page:
+    &lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+ </li>
+ <li>新しいスタイルシート <code>style4.css</code> を作成してください。次の内容をコピー＆ペーストしてください。
+  <pre class="brush:css">/*** Print sample ***/
+
+/* defaults  for screen */
+#print-head,
+#print-foot {
+  display: none;
+  }
+
+/* print only */
+@media print {
+
+h1 {
+  page-break-before: always;
+  padding-top: 2em;
+  }
+
+h1:first-child {
+  page-break-before: avoid;
+  counter-reset: page;
+  }
+
+#print-head {
+  display: block;
+  position: fixed;
+  top: 0pt;
+  left:0pt;
+  right: 0pt;
+
+  font-size: 200%;
+  text-align: center;
+  }
+
+#print-foot {
+  display: block;
+  position: fixed;
+  bottom: 0pt;
+  right: 0pt;
+
+  font-size: 200%;
+  }
+
+#print-foot:after {
+  content: counter(page);
+  counter-increment: page;
+  }
+
+} /* end print only */
+</pre>
+ </li>
+ <li>ブラウザーで文書を見てみましょう。お使いのブラウザーの既定のスタイルが使われています。</li>
+ <li>文書を印刷 (または印刷プレビュー) してください。スタイルシートは各セクションをページにわけ、各ページにヘッダーとフッターを追加します。お使いのブラウザーがカウンターをサポートしていれば、フッターにページ番号を追加します。
+  <table>
+   <tbody>
+    <tr>
+     <td>
+      <table style="border: 2px outset #3366bb; padding: 1em;">
+       <tbody>
+        <tr>
+         <td>
+          <table style="margin-right: 2em; width: 15em;">
+           <tbody>
+            <tr>
+             <td>
+              <div style="font-size: 110%; text-align: center; margin-bottom: .5em;">Heading for paged media</div>
+
+              <div style="font-size: 150%; font-weight: bold;">Section A</div>
+
+              <div style="font-size: 75%;">This is the first section...</div>
+
+              <div style="font-size: 150%; text-align: right; margin-top: 12em;">Page: 1</div>
+             </td>
+            </tr>
+           </tbody>
+          </table>
+         </td>
+        </tr>
+       </tbody>
+      </table>
+     </td>
+     <td>
+      <table style="border: 2px outset #3366bb; padding: 1em;">
+       <tbody>
+        <tr>
+         <td>
+          <table style="margin-right: 2em; width: 15em;">
+           <tbody>
+            <tr>
+             <td>
+              <div style="font-size: 110%; text-align: center; margin-bottom: .5em;">Heading for paged media</div>
+
+              <div style="font-size: 150%; font-weight: bold;">Section B</div>
+
+              <div style="font-size: 75%;">This is the second section...</div>
+
+              <div style="font-size: 150%; text-align: right; margin-top: 12em;">Page: 2</div>
+             </td>
+            </tr>
+           </tbody>
+          </table>
+         </td>
+        </tr>
+       </tbody>
+      </table>
+     </td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+</ol>
+
+<table style="background-color: #fffff4; border: 1px solid #3366bb; padding: 1em; width: 100%;">
+ <caption>
+ <h4 id="Challenges" name="Challenges"><strong>チャレンジ</strong></h4>
+ </caption>
+ <tbody>
+  <tr>
+   <td>印刷に特化したスタイルの規則を、別の CSS ファイルに移してください。
+    <p>リファレンスの {{CSSxRef("@import")}} のページを読み、あなたの <code>style4.css</code> スタイルシートに、新しい印刷用のCSS ファイルをインポートする詳しい方法を見つけてください。</p>
+
+    <p>ポインターが上にあるときに、見出しを青く変えるようにしてください。</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p><a href="/ja/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Media">チャレンジの解答を見る。</a></p>
+
+<h2 id="What_next" name="What_next">さて次は？</h2>
+
+<p>このページに、理解しづらい点や、意見がありましたら <a href="/Talk:ja/CSS/Getting_Started/Media">Discussion</a> ページに投稿してください。</p>
+
+<p>これまでに、このチュートリアルのすべてのスタイル規則はファイル内に定義されてきました。規則とその値は固定されています。次のページでは、プログラミング言語 <strong><a href="/ja/docs/Web/Guide/CSS/Getting_Started/JavaScript">JavaScript</a></strong> を使った、規則の動的な変更方法について述べます。</p>