diff options
Diffstat (limited to 'files/ja')
17 files changed, 932 insertions, 182 deletions
diff --git a/files/ja/learn/css/first_steps/index.html b/files/ja/learn/css/first_steps/index.html index 3a7a08cb48..b576a008e4 100644 --- a/files/ja/learn/css/first_steps/index.html +++ b/files/ja/learn/css/first_steps/index.html @@ -14,6 +14,14 @@ translation_of: Learn/CSS/First_steps <p class="summary">CSS (Cascading Style Sheets) はウェブページをスタイリングしたりレイアウトしたりするのに使われます — 例えば、文字、色、大きさを変えたり、コンテンツに余白を設けたり、複数列に分けたり、あるいはアニメーションを加えたりなど様々な装飾機能があります。このモジュールでは CSS を習得するために、どう働くかの基本とともに、構文のありかたと HTML にスタイリングを加えることを簡単な始め方を提供します。</p> +<div class="in-page-callout webdev"> +<h3 id="Looking_to_become_a_front-end_web_developer" name="Looking_to_become_a_front-end_web_developer">フロントエンドのウェブ開発者になりたいですか？</h3> + +<p>ゴールに向かって頑張るために必要な情報をまとめたコースをご用意しました。</p> + +<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">始める</a></p> +</div> + <h2 id="Prerequisites" name="Prerequisites">前提条件</h2> <p>このモジュールを始める前に、次の状態になっておくべきです。</p> diff --git a/files/ja/learn/forms/styling_html_forms/index.html b/files/ja/learn/forms/styling_html_forms/index.html index 4634665cef..71d463f0c7 100644 --- a/files/ja/learn/forms/styling_html_forms/index.html +++ b/files/ja/learn/forms/styling_html_forms/index.html @@ -199,7 +199,7 @@ legend { <p>上記のコードを HTML の body に追加します。</p> -<h3 id="Organizing_your_assets" name="Organizing_your_assets">Organizing your assets</h3> +<h3 id="Organizing_your_assets" name="Organizing_your_assets">アセットを揃える</h3> <p>ここからがおもしろいところです! コードを書き始める前に、ここでは 3 つの追加要素が必要です:</p> @@ -308,7 +308,7 @@ form { <p>テキストフィールドのスタイル設定が完了して、次は単一行および複数行のテキストフィールドの表示が同じになるよう調整しなければなりません。これは、一般的にこれらのデフォルト表示が同じでないためです。</p> -<h4 id="Tweaking_the_textareas" name="Tweaking_the_textareas">Tweaking the textareas</h4> +<h4 id="Tweaking_the_textareas" name="Tweaking_the_textareas">textareaの微調整</h4> <p>{{HTMLElement("textarea")}} 要素はデフォルトでブロック要素としてレンダリングされるようにします。ここで重要なことは、{{cssxref("resize")}} プロパティと {{cssxref("overflow")}} プロパティの 2 つです。ここでは固定サイズでデザインしているため、ユーザーが複数行のテキストフィールドをリサイズできないように <code>resize</code> プロパティを使用します。{{cssxref("overflow")}} プロパティは、ブラウザー間でのフィールドの一貫性を向上させるために使用します。これのデフォルト値が <code>auto</code> であるブラウザーと <code>scroll</code> であるブラウザーが存在します。この例では、すべてのブラウザーが <code>auto</code> になるようにするのがよいでしょう。</p> @@ -348,7 +348,8 @@ button:hover, button:focus { outline : none; background : #000; - co</pre> + color : #FFF; +}</pre> <h3 id="The_final_result" name="The_final_result">最終結果</h3> diff --git a/files/ja/learn/javascript/objects/adding_bouncing_balls_features/index.html b/files/ja/learn/javascript/objects/adding_bouncing_balls_features/index.html index 8390797c5b..79ddcd712b 100644 --- a/files/ja/learn/javascript/objects/adding_bouncing_balls_features/index.html +++ b/files/ja/learn/javascript/objects/adding_bouncing_balls_features/index.html @@ -1,5 +1,5 @@ --- -title: バウンスボールに機能を追加する +title: バウンスボールのデモに機能を追加する slug: Learn/JavaScript/Objects/Adding_bouncing_balls_features tags: - Assessment diff --git a/files/ja/learn/javascript/objects/index.html b/files/ja/learn/javascript/objects/index.html index 65df0e0ece..3985137adb 100644 --- a/files/ja/learn/javascript/objects/index.html +++ b/files/ja/learn/javascript/objects/index.html @@ -48,6 +48,6 @@ translation_of: Learn/JavaScript/Objects <h2 id="Assessments" name="Assessments">評価</h2> <dl> - <dt><a href="/ja/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">バウンスボールのデモへの機能の追加</a></dt> + <dt><a href="/ja/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">バウンスボールのデモに機能を追加する</a></dt> <dd>この評価では、前の記事のバウンスボールデモを出発点として使用し、新しい興味深い機能を追加する予定です。</dd> </dl> diff --git a/files/ja/web/api/htmlelement/beforeinput_event/index.html b/files/ja/web/api/htmlelement/beforeinput_event/index.html index 4939f3e9b8..060277ae97 100644 --- a/files/ja/web/api/htmlelement/beforeinput_event/index.html +++ b/files/ja/web/api/htmlelement/beforeinput_event/index.html @@ -2,19 +2,20 @@ title: 'HTMLElement: beforeinput イベント' slug: Web/API/HTMLElement/beforeinput_event tags: - - DOM + - API - Event - - Experimental + - HTML DOM + - HTMLElement - InputEvent - Reference - beforeinput translation_of: Web/API/HTMLElement/beforeinput_event --- -<div>{{APIRef}} {{SeeCompatTable}}</div> +<div>{{APIRef}}</div> -<p><span class="seoSummary">DOM の <strong><code>beforeinput</code></strong> イベントは、{{HTMLElement("input")}}、{{HTMLElement("select")}}、または {{HTMLElement("textarea")}} 要素の値が変更されようとしているときに発生します。 このイベントは、{{domxref("HTMLElement.contentEditable", "contenteditable")}} が有効になっている要素、および {{domxref("Document.designMode", "designMode")}} がオンになっている要素にも適用されます。</span></p> +<p>DOM の <strong><code>beforeinput</code></strong> イベントは、{{HTMLElement("input")}}、{{HTMLElement("select")}}、{{HTMLElement("textarea")}} 要素の値が変更されようとしているときに発生します。 このイベントは、{{domxref("HTMLElement.contentEditable", "contenteditable")}} が有効になっている要素、および {{domxref("Document.designMode", "designMode")}} がオンになっている要素にも適用されます。</p> -<p><code>contenteditable</code> や <code>designMode</code> の場合、イベントのターゲットは<em>編集ホスト</em>です。 これらのプロパティが複数の要素に適用された場合、編集ホストは、親が編集可能ではない直近の先祖要素になります。</p> +<p><code>contenteditable</code> や <code>designMode</code> の場合、イベントのターゲットは<strong>編集ホスト</strong>です。 これらのプロパティが複数の要素に適用された場合、編集ホストは、親が編集可能ではない直近の先祖要素になります。</p> <table class="properties"> <tbody> @@ -43,7 +44,7 @@ translation_of: Web/API/HTMLElement/beforeinput_event <td>はい</td> </tr> <tr> - <th>デフォルトのアクション</th> + <th>既定のアクション</th> <td>DOM 要素の更新</td> </tr> </tbody> @@ -51,16 +52,27 @@ translation_of: Web/API/HTMLElement/beforeinput_event <h2 id="Examples" name="Examples">例</h2> -<p>この例では、{{HtmlElement("input")}} 要素の値を変更する直前に値を記録します。</p> +<h3 id="機能の検出">機能の検出</h3> -<h3 id="HTML" name="HTML">HTML</h3> +<p>以下の関数は、 <code>beforeinput</code> に対応していれば true を返します。</p> -<pre class="brush: html"><input placeholder="テキストを入力" name="name"/> +<pre class="brush: js notranslate">function isBeforeInputEventAvailable() { + return typeof InputEvent.prototype.getTargetRanges === "function"; +} +</pre> + +<h3 id="Simple_logger" name="Simple_logger">単純なロガー</h3> + +<p>この例では、 {{HtmlElement("input")}} 要素に適用された新しい値に置き換える直前に、要素の現在の値をログに記録しています。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><input placeholder="テキストを入力" name="name"/> <p id="values"></p></pre> -<h3 id="JavaScript" name="JavaScript">JavaScript</h3> +<h4 id="JavaScript">JavaScript</h4> -<pre class="brush: js">const input = document.querySelector('input'); +<pre class="brush: js notranslate">const input = document.querySelector('input'); const log = document.getElementById('values'); input.addEventListener('beforeinput', updateValue); @@ -69,16 +81,16 @@ function updateValue(e) { log.textContent = e.target.value; }</pre> -<h3 id="Result" name="Result">結果</h3> +<h4 id="Result" name="Result">結果</h4> -<p>{{EmbedLiveSample("Examples")}}</p> +<p>{{EmbedLiveSample("Simple_logger")}}</p> -<h2 id="Specifications" name="Specifications">仕様</h2> +<h2 id="Specifications" name="Specifications">仕様書</h2> <table class="standard-table"> <tbody> <tr> - <th scope="col">仕様</th> + <th scope="col">仕様書</th> <th scope="col">状態</th> </tr> <tr> @@ -90,7 +102,7 @@ function updateValue(e) { <h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> <p>{{Compat("api.HTMLElement.beforeinput_event")}}</p> diff --git a/files/ja/web/api/xrinputsource/gripspace/index.html b/files/ja/web/api/xrinputsource/gripspace/index.html index 45e0b9a0c9..87c326186c 100644 --- a/files/ja/web/api/xrinputsource/gripspace/index.html +++ b/files/ja/web/api/xrinputsource/gripspace/index.html @@ -18,7 +18,7 @@ translation_of: Web/API/XRInputSource/gripSpace --- <div>{{securecontext_header}}{{APIRef("WebXR")}}</div> -<p class="summary"><span class="seoSummary">{{domxref("XRInputSource")}} の <strong><code>gripSpace</code></strong> 読み取り専用プロパティは、ネイティブの原点がユーザーの手（またはその一部）に保持しているように見える仮想オブジェクトのレンダリングに使用するポーズを追跡する {{domxref("XRSpace")}} を返します。</span> 例えば、ユーザーが仮想の真っ直ぐな棒を持っている場合、この <code>XRSpace</code> のネイティブの原点は、ユーザーの拳のおおよその重心にあります。</p> +<p class="summary"><span class="seoSummary">{{domxref("XRInputSource")}} の <strong><code>gripSpace</code></strong> 読み取り専用プロパティは、ネイティブの原点がユーザーの手に保持している（またはユーザーの手の一部の）ように見える仮想オブジェクトのレンダリングに使用するポーズを追跡する {{domxref("XRSpace")}} を返します。</span> 例えば、ユーザーが仮想の真っ直ぐな棒を持っている場合、この <code>XRSpace</code> のネイティブの原点は、ユーザーの拳のおおよその重心にあります。</p> <h2 id="Syntax" name="Syntax">構文</h2> diff --git a/files/ja/web/api/xrinputsource/targetraymode/index.html b/files/ja/web/api/xrinputsource/targetraymode/index.html new file mode 100644 index 0000000000..f29a2b1f9d --- /dev/null +++ b/files/ja/web/api/xrinputsource/targetraymode/index.html @@ -0,0 +1,77 @@ +--- +title: XRInputSource.targetRayMode +slug: Web/API/XRInputSource/targetRayMode +tags: + - API + - AR + - Pointing + - Property + - Ray + - Read-only + - Reference + - VR + - WebXR + - WebXR API + - WebXR Device API + - XR + - XRInputSource + - direction + - pointer + - target + - targetRayMode +translation_of: Web/API/XRInputSource/targetRayMode +--- +<p>{{APIRef("WebXR")}}{{securecontext_header}}</p> + +<p>{{domxref("XRInputSource")}} の <strong><code>targetRayMode</code></strong> 読み取り専用プロパティは、入力ソースのターゲット光線を生成する方法と、それをユーザーに提示する方法を示します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">let <em>rayMode</em> = <em>xrInputSource</em>.targetRayMode;</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>{{domxref("XRTargetRayMode")}} 列挙型から取得した {{domxref("DOMString")}}。 ターゲット光線を生成してユーザーに提示するときに使用する方法を示します。 可能な値は次のとおりです。</p> + +<p>{{page("/ja/docs/Web/API/XRTargetRayMode", "Values")}}</p> + +<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2> + +<p>入力ソースの {{domxref("XRInputSource.targetRaySpace", "targetRaySpace")}} は、ターゲット光線の位置と向きを示し、光線をレンダリングする場所を決定するために使用できます。</p> + +<h2 id="Example" name="Example">例</h2> + +<p>{{page("/ja/docs/Web/API/XRTargetRayMode", "Examples")}}</p> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('WebXR','#dom-xrinputsource-targetraymode','XRInputSource.handedness')}}</td> + <td>{{Spec2('WebXR')}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden"> +<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> +</div> + +<p>{{Compat("api.XRInputSource.handedness")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/WebXR_Device_API">WebXR Device API</a></li> + <li><a href="/ja/docs/Web/API/WebXR_Device_API/Inputs">入力と入力ソース</a></li> + <li><a href="/ja/docs/Web/WebXR%20Device%20API/Gamepads">WebXR アプリケーションでのゲームパッドの使用</a></li> +</ul> diff --git a/files/ja/web/api/xrreferencespaceevent/referencespace/index.html b/files/ja/web/api/xrreferencespaceevent/referencespace/index.html index f9cb5f0c48..c2649cd291 100644 --- a/files/ja/web/api/xrreferencespaceevent/referencespace/index.html +++ b/files/ja/web/api/xrreferencespaceevent/referencespace/index.html @@ -31,7 +31,7 @@ translation_of: Web/API/XRReferenceSpaceEvent/referenceSpace <h3 id="Value" name="Value">値</h3> -<p>An {{domxref("XRReferenceSpace")}} indicating the source of the event.</p> +<p>イベントのソースを示す {{domxref("XRReferenceSpace")}}。</p> <h2 id="Examples" name="Examples">例</h2> diff --git a/files/ja/web/api/xrreferencespacetype/index.html b/files/ja/web/api/xrreferencespacetype/index.html index d59470e742..3f55c590b3 100644 --- a/files/ja/web/api/xrreferencespacetype/index.html +++ b/files/ja/web/api/xrreferencespacetype/index.html @@ -33,7 +33,7 @@ translation_of: Web/API/XRReferenceSpaceType <h3 id="Reference_space_descriptors" name="Reference_space_descriptors">参照空間記述子</h3> -<p>参照空間のタイプを以下の表に示します。 それらの使用例と、それらを実装するために使用されるインターフェイスについての簡単な情報が含まれています。</p> +<p>参照空間のタイプを以下の表に示します。 それらのユースケースと、それらを実装するために使用されるインターフェイスについての簡単な情報が含まれています。</p> <div id="foo"> <table class="standard-table" id="value-list"> @@ -71,7 +71,7 @@ translation_of: Web/API/XRReferenceSpaceType </tr> <tr> <td><a id="viewer" name="viewer"><code>viewer</code></a></td> - <td>ネイティブの原点がビューアーの位置と方向を追跡する追跡空間。 これは、ユーザーが物理的に移動できる環境で使用し、没入型（immersive）とインライン（inline）の両方の {{domxref("XRSession")}} のすべてのインスタンスをサポートしますが、インラインセッションで最も役立ちます。 ビューアーと入力の間の距離を決定するとき、またはオフセット空間を操作するときに特に役立ちます。 そうでない場合、通常、他の参照空間タイプの1つがより頻繁に使用されます。</td> + <td>ネイティブの原点がビューアーの位置と向きを追跡する追跡空間。 これは、ユーザーが物理的に移動できる環境で使用し、没入型（immersive）とインライン（inline）の両方の {{domxref("XRSession")}} のすべてのインスタンスをサポートしますが、インラインセッションで最も役立ちます。 ビューアーと入力の間の距離を決定するとき、またはオフセット空間を操作するときに特に役立ちます。 そうでない場合、通常、他の参照空間タイプの1つがより頻繁に使用されます。</td> <td>{{domxref("XRReferenceSpace")}}</td> </tr> </tbody> diff --git a/files/ja/web/api/xrrigidtransform/index.html b/files/ja/web/api/xrrigidtransform/index.html new file mode 100644 index 0000000000..6558e44e64 --- /dev/null +++ b/files/ja/web/api/xrrigidtransform/index.html @@ -0,0 +1,98 @@ +--- +title: XRRigidTransform +slug: Web/API/XRRigidTransform +tags: + - API + - AR + - Interface + - Reality + - Reference + - Reference Space + - VR + - Virtual + - WebXR + - WebXR API + - WebXR Device API + - XR + - XRReferenceSpace + - XRRigidTransform + - augmented + - space + - transform +translation_of: Web/API/XRRigidTransform +--- +<p>{{APIRef("WebXR Device API")}}</p> + +<p><span class="seoSummary"><strong><code>XRRigidTransform</code></strong> は、位置と向きによって記述される 3D 幾何学的変換を表す <a href="/ja/docs/Web/API/WebXR_API">WebXR API</a> のインターフェイスです。</span></p> + +<p><code>XRRigidTransform</code> は、以下を含む WebXR API 全体で変換を指定するために使用されます。</p> + +<ul> + <li>{{domxref("XRReferenceSpace.getOffsetReferenceSpace", "getOffsetReferenceSpace()")}} を使用して新しい参照空間を作成するときに使用する、親参照空間を基準にしたオフセットと向き。</li> + <li>{{domxref("XRView")}} の {{domxref("XRView.transform", "transform")}}。</li> + <li>{{domxref("XRPose")}} の {{domxref("XRPose.transform", "transform")}}。</li> + <li>{{domxref("XRReferenceSpace")}} が受信した {{domxref("XRReferenceSpace.reset_event", "reset")}} イベントにある {{domxref("XRReferenceSpaceEvent")}} イベントの {{domxref("XRReferenceSpaceEvent.transform", "transform")}} プロパティ。</li> +</ul> + +<p>行列データを提供する裸の配列ではなく、これらの場所で <code>XRRigidTransform</code> を使用する利点は、<code>XRRigidTransform</code> が変換の逆の計算などを自動的に実行することです。 さらに良いことに、一度計算したらキャッシュされるため、後続の要求は大幅に高速化されます。</p> + +<h2 id="Constructor" name="Constructor">コンストラクター</h2> + +<dl> + <dt>{{domxref("XRRigidTransform.XRRigidTransform", "new XRRigidTransform()")}}</dt> + <dd>指定された位置や向きを適用する変換を表す新しい <code>XRRigidTransform</code> オブジェクトを作成します。</dd> +</dl> + +<h2 id="Properties" name="Properties">プロパティ</h2> + +<dl> + <dt>{{DOMxRef("XRRigidTransform.position")}} {{readonlyInline}} {{experimental_inline}}</dt> + <dd>変換の平行移動成分を記述する、メートルで表される3次元の点を指定する {{DOMxRef("DOMPointReadOnly")}}。 {{DOMxRef("DOMPointReadonly.w", "w")}} プロパティは常に <code>1.0</code> です。</dd> + <dt>{{DOMxRef("XRRigidTransform.orientation")}} {{readonlyInline}} {{experimental_inline}}</dt> + <dd>変換の回転成分を記述する単位クォータニオンを含む {{DOMxRef("DOMPointReadOnly")}}。 単位クォータニオンとして、その長さは常に <code>1.0</code> に正規化されます。</dd> + <dt>{{DOMxRef("XRRigidTransform.matrix")}} {{readonlyInline}} {{experimental_inline}}</dt> + <dd>16 メンバーの {{DOMxRef("Float32Array")}} の形式で変換行列を返します。 配列を使用して行列を表す方法については、<a href="/ja/docs/Web/API/XRRigidTransform/matrix#Matrix_format">行列のフォーマット</a>のセクションを参照してください。</dd> +</dl> + +<dl> + <dt>{{DOMxRef("XRRigidTransform.inverse")}} {{readonlyInline}} {{experimental_inline}}</dt> + <dd>この変換の逆である <code>XRRigidTransform</code> を返します。 つまり、元の変換によって以前に変換されたオブジェクトに適用された場合、変換が元に戻され、元のオブジェクトが返されます。</dd> +</dl> + +<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2> + +<p><code>XRRigidTransform</code> が解釈されると、位置が適用される前に、影響を受けるオブジェクトに常に向きが適用されます。</p> + +<h2 id="Example" name="Example">例</h2> + +<p>このコードスニペットは、<code>XRRigidTransform</code> を作成して、新しい参照空間を作成するときに使用する現在の参照空間に対するオフセットと向きを指定します。 次に、セッションの {{domxref("XRSession.requestAnimationFrame", "requestAnimationFrame()")}} メソッドを呼び出して、最初のアニメーションフレームコールバックを要求します。</p> + +<pre class="brush: js notranslate">xrSession.requestReferenceSpace(refSpaceType) +.then((refSpace) => { + xrReferenceSpace = refSpace; + xrReferenceSpace = xrReferenceSpace.getOffsetReferenceSpace( + new XRRigidTransform(viewerStartPosition, cubeOrientation)); + animationFrameRequestID = xrSession.requestAnimationFrame(drawFrame);</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("WebXR","#xrrigidtransform-interface","XRRigidTransform")}}</td> + <td>{{Spec2("WebXR")}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div>{{Compat("api.XRRigidTransform")}}</div> diff --git a/files/ja/web/api/xrrigidtransform/inverse/index.html b/files/ja/web/api/xrrigidtransform/inverse/index.html new file mode 100644 index 0000000000..164428f197 --- /dev/null +++ b/files/ja/web/api/xrrigidtransform/inverse/index.html @@ -0,0 +1,80 @@ +--- +title: XRRigidTransform.inverse +slug: Web/API/XRRigidTransform/inverse +tags: + - API + - AR + - Property + - Read-only + - Reality + - Reference + - VR + - Virtual + - WebXR + - WebXR API + - WebXR Device API + - XR + - XRRigidTransform + - augmented + - inverse + - transform +translation_of: Web/API/XRRigidTransform/inverse +--- +<p>{{APIRef("WebXR Device API")}}</p> + +<p><span class="seoSummary">{{domxref("XRRigidTransform")}} インターフェイスの <code><strong>inverse</strong></code> 読み取り専用プロパティは、それ自体の変換の逆である別の {{domxref("XRRigidTransform")}} オブジェクトを返します。</span> つまり、逆を明示的に生成する代わりに、<code>inverse</code> プロパティを使用して、<code>XRRigidTransform</code> の逆をいつでも取得できます。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">let <em>transformInverse</em> = <em>xrRigidTransform</em>.inverse;</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>アクセスした <code>XRRigidTransform</code> の逆を含む {{domxref("XRRigidTransform")}}。</p> + +<p>親 <code>XRRigidTransform</code> によって以前に変換されたオブジェクトに変換の逆を適用すると、常に変換が元に戻され、結果としてオブジェクトは前のポーズに戻ります。 つまり、その位置と向きの両方が以前の構成に戻ります。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>この例では、オブジェクトのモデルビュー行列は、ビュー行列を取得し、それをオブジェクトのポーズ行列で乗算することによって計算されます。</p> + +<pre class="brush: js notranslate">let modelViewMatrix = mat4.create(); + +for (let view of pose.view) { + let viewport = glLayer.getViewport(view); + gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height); + + /* ... */ + + mat4.multiply(modelViewMatrix, view.transform.inverse.matrix, objectMatrix); + gl.uniformMatrix4fv(programInfo.uniformLocations.modelViewMatrix, + false, modelViewMatrix); + + /* ... */ +} +</pre> + +<p>このレンダラーのコアコードのあらましは、ビューアーの位置と向きに基づいてオブジェクトを変換するために使用するモデルビュー行列として、その変換の逆の行列をを取ることによって、ポーズのビューがどのように表されるかを示しています。 逆の行列にオブジェクトの行列を掛けてモデルビュー行列を取得し、その情報を含むようにユニフォームを設定することで、シェーダープログラムに渡します。</p> + +<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("WebXR","#dom-xrrigidtransform-inverse","XRRigidTransform.inverse")}}</td> + <td>{{Spec2("WebXR")}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div>{{Compat("api.XRRigidTransform.inverse")}}</div> diff --git a/files/ja/web/api/xrrigidtransform/matrix/index.html b/files/ja/web/api/xrrigidtransform/matrix/index.html new file mode 100644 index 0000000000..9f4e81806f --- /dev/null +++ b/files/ja/web/api/xrrigidtransform/matrix/index.html @@ -0,0 +1,96 @@ +--- +title: XRRigidTransform.matrix +slug: Web/API/XRRigidTransform/matrix +tags: + - API + - AR + - Property + - Read-only + - Reality + - Reference + - VR + - Virtual + - WebXR + - WebXR API + - WebXR Device API + - XR + - XRRigidTransform + - augmented + - matrix + - transform +translation_of: Web/API/XRRigidTransform/matrix +--- +<p>{{APIRef("WebXR Device API")}}</p> + +<p>{{domxref("XRRigidTransform")}} の <strong><code>matrix</code></strong> 読み取り専用プロパティは、オブジェクトによって表される変換行列を返します。 そして、返された行列に列ベクトルを前乗算して、{{domxref("XRRigidTransform.orientation", "orientation")}} で指定された 3D 回転でベクトルを回転させ、{{domxref("XRRigidTransform.position", "position")}} で平行移動させることができます。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">let <em>matrix</em> = <em>xrRigidTransform</em>.matrix;</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>{{domxref("XRRigidTransform.position", "position")}} プロパティと {{domxref("XRRigidTransform.orientation", "orientation")}} プロパティで記述される 4x4 変換行列を表す 16 個のエントリーを含む {{domxref("Float32Array")}}。</p> + +<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2> + +<h3 id="Matrix_format" name="Matrix_format">行列のフォーマット</h3> + +<p>WebGL で使用されるすべての 4x4 変換行列は、16 要素の {{domxref("Float32Array")}} に格納されます。 値は、列優先の順序で配列に格納されます。 つまり、各列は上から下に向かって配列に書き込まれ、その後、1つ右側の列に移動して、次の列が配列に書き込まれます。 したがって、配列 [a0, a1, a2, ..., a13, a14, a15] の場合、行列は次のようになります。</p> + +<p><math display="block"><semantics><mrow><mo>[</mo><mtable rowspacing="0.5ex"><mtr><mtd><mi>a</mi><mo stretchy="false">[</mo><mn>0</mn><mo stretchy="false">]</mo></mtd><mtd><mi>a</mi><mo stretchy="false">[</mo><mn>4</mn><mo stretchy="false">]</mo></mtd><mtd><mi>a</mi><mo stretchy="false">[</mo><mn>8</mn><mo stretchy="false">]</mo></mtd><mtd><mi>a</mi><mo stretchy="false">[</mo><mn>12</mn><mo stretchy="false">]</mo></mtd></mtr><mtr><mtd><mi>a</mi><mo stretchy="false">[</mo><mn>1</mn><mo stretchy="false">]</mo></mtd><mtd><mi>a</mi><mo stretchy="false">[</mo><mn>5</mn><mo stretchy="false">]</mo></mtd><mtd><mi>a</mi><mo stretchy="false">[</mo><mn>9</mn><mo stretchy="false">]</mo></mtd><mtd><mi>a</mi><mo stretchy="false">[</mo><mn>13</mn><mo stretchy="false">]</mo></mtd></mtr><mtr><mtd><mi>a</mi><mo stretchy="false">[</mo><mn>2</mn><mo stretchy="false">]</mo></mtd><mtd><mi>a</mi><mo stretchy="false">[</mo><mn>6</mn><mo stretchy="false">]</mo></mtd><mtd><mi>a</mi><mo stretchy="false">[</mo><mn>10</mn><mo stretchy="false">]</mo></mtd><mtd><mi>a</mi><mo stretchy="false">[</mo><mn>14</mn><mo stretchy="false">]</mo></mtd></mtr><mtr><mtd><mi>a</mi><mo stretchy="false">[</mo><mn>3</mn><mo stretchy="false">]</mo></mtd><mtd><mi>a</mi><mo stretchy="false">[</mo><mn>7</mn><mo stretchy="false">]</mo></mtd><mtd><mi>a</mi><mo stretchy="false">[</mo><mn>11</mn><mo stretchy="false">]</mo></mtd><mtd><mi>a</mi><mo stretchy="false">[</mo><mn>15</mn><mo stretchy="false">]</mo></mtd></mtr><mtr><mtd></mtd></mtr></mtable><mo>]</mo></mrow><annotation encoding="TeX">\begin{bmatrix} a[0] & a[4] & a[8] & a[12]\\ a[1] & a[5] & a[9] & a[13]\\ a[2] & a[6] & a[10] & a[14]\\ a[3] & a[7] & a[11] & a[15]\\ \end{bmatrix}</annotation></semantics></math></p> + +<p><code>matrix</code> は最初に要求されたときに計算します。 その後は、必要になるたびに計算して速度が低下しないように、キャッシュされます。</p> + +<h3 id="Creating_the_matrix" name="Creating_the_matrix">行列の作成</h3> + +<p>このセクションでは、より高度な読者を対象として、API が指定された変換の行列を計算する方法について説明します。 それは、新しい行列を割り当て、それに 4x4 の単位行列を書き込むことから始まります。</p> + +<p><math display="block"><semantics><mrow><mo>[</mo><mtable rowspacing="0.5ex"><mtr><mtd><mn>1</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd><mtd><mn>0</mn></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>]</mo></mrow><annotation encoding="TeX">\begin{bmatrix} 1 & 0 & 0 & 0\\ 0 & 1 & 0 & 0\\ 0 & 0 & 1 & 0\\ 0 & 0 & 0 & 1 \end{bmatrix}</annotation></semantics></math></p> + +<p>これは、適用した点、ベクトル、またはオブジェクトの向きや位置を変更しない変換です。</p> + +<p>次に、このように <code>position</code> を右側の列に配置して、回転を変更せずに、各次元で指定した距離だけ座標系を変換する平行移動行列を作成します。 ここで、<code>p<sub>x</sub></code>、<code>p<sub>y</sub></code>、<code>p<sub>z</sub></code> は、{{domxref("DOMPointReadOnly")}} の <code>position</code> の <code>x</code>、<code>y</code>、<code>z</code> メンバーの値です。</p> + +<p><math display="block"><semantics><mrow><mo>[</mo><mtable rowspacing="0.5ex"><mtr><mtd><mn>1</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mi>p<sub>x</sub></mi></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd><mtd><mn>0</mn></mtd><mtd><mi>p<sub>y</sub></mi></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd><mtd><mi>p<sub>z</sub></mi></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>]</mo></mrow><annotation encoding="TeX">\begin{bmatrix} 1 & 0 & 0 & x\\ 0 & 1 & 0 & y\\ 0 & 0 & 1 & z\\ 0 & 0 & 0 & 1 \end{bmatrix}</annotation></semantics></math></p> + +<p>次に、<code>orientation</code> で指定された単位クォータニオンから列ベクトル回転行列を計算することにより、回転行列を作成します。</p> + +<p><math display="block"><semantics><mrow><mo>[</mo><mtable rowspacing="0.5ex"><mtr><mtd><mn>1</mn><mo>-</mo><mn>2</mn><mo stretchy="false">(</mo><msubsup><mi>q</mi><mi>y</mi><mn>2</mn></msubsup><mo>+</mo><msubsup><mi>q</mi><mi>z</mi><mn>2</mn></msubsup><mo stretchy="false">)</mo></mtd><mtd><mn>2</mn><mo stretchy="false">(</mo><msub><mi>q</mi><mi>x</mi></msub><msub><mi>q</mi><mi>y</mi></msub><mo>-</mo><msub><mi>q</mi><mi>z</mi></msub><msub><mi>q</mi><mi>w</mi></msub><mo stretchy="false">)</mo></mtd><mtd><mn>2</mn><mo stretchy="false">(</mo><msub><mi>q</mi><mi>x</mi></msub><msub><mi>q</mi><mi>z</mi></msub><mo>+</mo><msub><mi>q</mi><mi>y</mi></msub><msub><mi>q</mi><mi>w</mi></msub><mo stretchy="false">)</mo></mtd><mtd><mn>0</mn></mtd></mtr><mtr><mtd><mn>2</mn><mo stretchy="false">(</mo><msub><mi>q</mi><mi>x</mi></msub><msub><mi>q</mi><mi>y</mi></msub><mo>+</mo><msub><mi>q</mi><mi>z</mi></msub><msub><mi>q</mi><mi>w</mi></msub><mo stretchy="false">)</mo></mtd><mtd><mn>1</mn><mo>-</mo><mn>2</mn><mo stretchy="false">(</mo><msubsup><mi>q</mi><mi>x</mi><mn>2</mn></msubsup><mo>+</mo><msubsup><mi>q</mi><mi>z</mi><mn>2</mn></msubsup><mo stretchy="false">)</mo></mtd><mtd><mn>2</mn><mo stretchy="false">(</mo><msub><mi>q</mi><mi>y</mi></msub><msub><mi>q</mi><mi>z</mi></msub><mo>-</mo><msub><mi>q</mi><mi>x</mi></msub><msub><mi>q</mi><mi>w</mi></msub><mo stretchy="false">)</mo></mtd><mtd><mn>0</mn></mtd></mtr><mtr><mtd><mn>2</mn><mo stretchy="false">(</mo><msub><mi>q</mi><mi>x</mi></msub><msub><mi>q</mi><mi>z</mi></msub><mo>-</mo><msub><mi>q</mi><mi>y</mi></msub><msub><mi>q</mi><mi>w</mi></msub><mo stretchy="false">)</mo></mtd><mtd><mn>2</mn><mo stretchy="false">(</mo><msub><mi>q</mi><mi>y</mi></msub><msub><mi>q</mi><mi>z</mi></msub><mo>+</mo><msub><mi>q</mi><mi>x</mi></msub><msub><mi>q</mi><mi>w</mi></msub><mo stretchy="false">)</mo></mtd><mtd><mn>1</mn><mo>-</mo><mn>2</mn><mo stretchy="false">(</mo><msubsup><mi>q</mi><mi>x</mi><mn>2</mn></msubsup><mo>+</mo><msubsup><mi>q</mi><mi>y</mi><mn>2</mn></msubsup><mo stretchy="false">)</mo></mtd><mtd><mn>0</mn></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>]</mo></mrow><annotation encoding="TeX">\begin{bmatrix} 1 - 2(q_y^2 + q_z^2) & 2(q_xq_y - q_zq_w) & 2(q_xq_z + q_yq_w) & p_x\\ 2(q_xq_y + q_zq_w) & 1 - 2(q_x^2 + q_z^2) & 2(q_yq_z - q_xq_w) & p_y\\ 2(q_xq_z - q_yq_w) & 2(q_yq_z + q_xq_w) & 1 - 2(q_x^2 + q_y^2) & p_z\\ 0 & 0 & 0 & 1 \end{bmatrix}</annotation></semantics></math></p> + +<p>最終的な変換 <code>matrix</code> は、平行移動行列に回転行列を <code>(translation * rotation)</code> の順序で乗算することで計算します。 これにより、<code>matrix</code> が返す最終的な変換行列を生成します。</p> + +<p><math display="block"><semantics><mrow><mo>[</mo><mtable rowspacing="0.5ex"><mtr><mtd><mn>1</mn><mo>-</mo><mn>2</mn><mo stretchy="false">(</mo><msubsup><mi>q</mi><mi>y</mi><mn>2</mn></msubsup><mo>+</mo><msubsup><mi>q</mi><mi>z</mi><mn>2</mn></msubsup><mo stretchy="false">)</mo></mtd><mtd><mn>2</mn><mo stretchy="false">(</mo><msub><mi>q</mi><mi>x</mi></msub><msub><mi>q</mi><mi>y</mi></msub><mo>-</mo><msub><mi>q</mi><mi>z</mi></msub><msub><mi>q</mi><mi>w</mi></msub><mo stretchy="false">)</mo></mtd><mtd><mn>2</mn><mo stretchy="false">(</mo><msub><mi>q</mi><mi>x</mi></msub><msub><mi>q</mi><mi>z</mi></msub><mo>+</mo><msub><mi>q</mi><mi>y</mi></msub><msub><mi>q</mi><mi>w</mi></msub><mo stretchy="false">)</mo></mtd><mtd><mi>p<sub>x</sub></mi></mtd></mtr><mtr><mtd><mn>2</mn><mo stretchy="false">(</mo><msub><mi>q</mi><mi>x</mi></msub><msub><mi>q</mi><mi>y</mi></msub><mo>+</mo><msub><mi>q</mi><mi>z</mi></msub><msub><mi>q</mi><mi>w</mi></msub><mo stretchy="false">)</mo></mtd><mtd><mn>1</mn><mo>-</mo><mn>2</mn><mo stretchy="false">(</mo><msubsup><mi>q</mi><mi>x</mi><mn>2</mn></msubsup><mo>+</mo><msubsup><mi>q</mi><mi>z</mi><mn>2</mn></msubsup><mo stretchy="false">)</mo></mtd><mtd><mn>2</mn><mo stretchy="false">(</mo><msub><mi>q</mi><mi>y</mi></msub><msub><mi>q</mi><mi>z</mi></msub><mo>-</mo><msub><mi>q</mi><mi>x</mi></msub><msub><mi>q</mi><mi>w</mi></msub><mo stretchy="false">)</mo></mtd><mtd><mi>p<sub>y</sub></mi></mtd></mtr><mtr><mtd><mn>2</mn><mo stretchy="false">(</mo><msub><mi>q</mi><mi>x</mi></msub><msub><mi>q</mi><mi>z</mi></msub><mo>-</mo><msub><mi>q</mi><mi>y</mi></msub><msub><mi>q</mi><mi>w</mi></msub><mo stretchy="false">)</mo></mtd><mtd><mn>2</mn><mo stretchy="false">(</mo><msub><mi>q</mi><mi>y</mi></msub><msub><mi>q</mi><mi>z</mi></msub><mo>+</mo><msub><mi>q</mi><mi>x</mi></msub><msub><mi>q</mi><mi>w</mi></msub><mo stretchy="false">)</mo></mtd><mtd><mn>1</mn><mo>-</mo><mn>2</mn><mo stretchy="false">(</mo><msubsup><mi>q</mi><mi>x</mi><mn>2</mn></msubsup><mo>+</mo><msubsup><mi>q</mi><mi>y</mi><mn>2</mn></msubsup><mo stretchy="false">)</mo></mtd><mtd><mi>p<sub>z</sub></mi></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>]</mo></mrow><mrow></mrow><annotation encoding="TeX">\begin{bmatrix} 1 - 2(q_y^2 + q_z^2) & 2(q_xq_y - q_zq_w) & 2(q_xq_z + q_yq_w) & p_x\\ 2(q_xq_y + q_zq_w) & 1 - 2(q_x^2 + q_z^2) & 2(q_yq_z - q_xq_w) & p_y\\ 2(q_xq_z - q_yq_w) & 2(q_yq_z + q_xq_w) & 1 - 2(q_x^2 + q_y^2) & p_z\\ 0 & 0 & 0 & 1 \end{bmatrix}</annotation></semantics></math></p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>この例では、特定のオフセットと向きに一致するようにオブジェクトを配置するために、WebGL オブジェクトのレンダリング中に変換として使用できる行列を作成するための変換が作成されます。 次に、<code>matrix</code> を、WebGL を使用して、指定された名前に一致するオブジェクトを指定された位置と向きに配置するために指定された変換行列を使用してレンダリングするライブラリー関数に渡します。</p> + +<pre class="brush: js notranslate">let transform = new XRRigidTransform( + {x: 0, y: 0.5, z: 0.5}, + {x: 0, y: -0.5, z: -0.5, w: 1}); +drawGLObject("magic-lamp", transform.matrix); +</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("WebXR","#dom-xrrigidtransform-matrix","XRRigidTransform.matrix")}}</td> + <td>{{Spec2("WebXR")}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div>{{Compat("api.XRRigidTransform.matrix")}}</div> diff --git a/files/ja/web/api/xrrigidtransform/orientation/index.html b/files/ja/web/api/xrrigidtransform/orientation/index.html new file mode 100644 index 0000000000..951c25fff1 --- /dev/null +++ b/files/ja/web/api/xrrigidtransform/orientation/index.html @@ -0,0 +1,75 @@ +--- +title: XRRigidTransform.orientation +slug: Web/API/XRRigidTransform/orientation +tags: + - API + - AR + - Orientation + - Property + - Read-only + - Reality + - Reference + - VR + - Virtual + - WebXR + - WebXR API + - WebXR Device API + - XR + - XRRigidTransform + - augmented + - rotation +translation_of: Web/API/XRRigidTransform/orientation +--- +<p>{{APIRef("WebXR Device API")}}</p> + +<p><span class="seoSummary">{{domxref("XRRigidTransform")}} の <strong><code>orientation</code></strong> 読み取り専用プロパティは、オブジェクトによって表される変換の回転成分を指定する正規化された{{Glossary("quaternion","クォータニオン")}}（<strong><a href="https://ja.wikipedia.org/wiki/%E5%9B%9B%E5%85%83%E6%95%B0#%E5%8D%98%E4%BD%8D%E5%9B%9B%E5%85%83%E6%95%B0">単位クォータニオン</a></strong>または<strong>ベルソル</strong>とも呼ばれます）を含む {{DOMxRef("DOMPointReadOnly")}} です。</span> 長さが正確に 1.0 メートルではないクォータニオンを指定すると、正規化されます。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">let <em>orientation</em> = <em>xrRigidTransform</em>.orientation;</pre> + +<h3 id="Value" name="Value">Value</h3> + +<p>変換の向き成分を提供する単位クォータニオンを含む {{domxref("DOMPointReadOnly")}} オブジェクト。 単位クォータニオンとして、返されるクォータニオンの長さは常に 1.0 メートルです。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>地面から 2 メートル離れた位置に、真上を向くように配置された参照空間を作成するには、次のようにします。</p> + +<pre class="brush: js notranslate">xrReferenceSpace = refSpace.getOffsetReferenceSpace( + new XRRigidTransform({y: -2}, {x: 0.0, y: 1.0, z: 0.0, w: 1.0}); +); +</pre> + +<p>ここで指定されている単位クォータニオンは [0.0, 1.0, 0.0, 1.0] であり、オブジェクトが y 軸に沿って直接向いている必要があることを示します。</p> + +<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("WebXR","#dom-xrrigidtransform-orientation","XRRigidTransform.orientation")}}</td> + <td>{{Spec2("WebXR")}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div>{{Compat("api.XRRigidTransform.orientation")}}</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/WebXR_Device_API/Movement_and_motion">移動、向き、モーション</a></li> + <li><a href="https://ja.wikipedia.org/wiki/%E5%9B%9B%E5%85%83%E6%95%B0#%E5%8D%98%E4%BD%8D%E5%9B%9B%E5%85%83%E6%95%B0">単位クォータニオン</a></li> + <li><a href="https://en.wikipedia.org/wiki/Quaternions_and_spatial_rotation">クォータニオンと空間回転</a>（英語）</li> +</ul> diff --git a/files/ja/web/api/xrrigidtransform/position/index.html b/files/ja/web/api/xrrigidtransform/position/index.html new file mode 100644 index 0000000000..fa15870672 --- /dev/null +++ b/files/ja/web/api/xrrigidtransform/position/index.html @@ -0,0 +1,102 @@ +--- +title: XRRigidTransform.position +slug: Web/API/XRRigidTransform/position +tags: + - 3D + - API + - AR + - Coordinates + - Location + - Point + - Position + - Property + - Reference + - VR + - WebXR + - WebXR API + - XR + - XRRigidTransform + - transform +translation_of: Web/API/XRRigidTransform/position +--- +<p>{{APIRef("WebXR Device API")}}</p> + +<p>{{domxref("XRRigidTransform")}} の <strong><code>position</code></strong> 読み取り専用プロパティは、変換の平行移動成分を記述する、メートルで指定された 3D 点を提供する {{domxref("DOMPointReadOnly")}} オブジェクトです。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">let <em>pos</em> = <em>xrRigidTransform</em>.position;</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>変換行列の 3D 位置成分を示す読み取り専用の {{domxref("DOMPointReadOnly")}}。 単位はメートルです。</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: 点の <code>w</code> 成分は常に 1.0 です。</p> +</div> + +<h2 id="Example" name="Example">例</h2> + +<p>オブジェクトを目の高さに配置するために使用できる参照空間を作成するには、次のようにします（目の高さが 1.5 メートルであると想定）。</p> + +<pre class="brush: js notranslate">function onSessionStarted(xrSession) { + xrSession.addEventListener("end", onSessionEnded); + + gl = initGraphics(xrSession); + + let glLayer = new XRWebGLLayer(xrSession, gl); + xrSession.updateRenderState({ baseLayer: glLayer }); + + if (immersiveSession) { + xrSession.requestReferenceSpace("bounded-floor").then((refSpace) => { + refSpaceCreated(refSpace); + }).catch(() => { + session.requestReferenceSpace("local-floor").then(refSpaceCreated); + }); + } else { + session.requestReferenceSpace("viewer").then(refSpaceCreated); + } +} + +function refSpaceCreated(refSpace) { + if (immersiveSession) { + xrReferenceSpace = refSpace; + } else { + xrReferenceSpace = refSpace.getOffsetReferenceSpace( + new XRRigidTransform({y: -1.5}); + ); + } + xrSession.requestAnimationFrame(onFrame); +} +</pre> + +<p>WebXR で使用するグラフィックスコンテキストを設定した後、これは変数 <code>immersiveSession</code> が <code>true</code> であるかどうかを確認することから始まります。 その場合、最初に <code>bounded-floor</code> 参照空間を要求します。 それが失敗した場合（おそらく <code>bounded-floor</code> がサポートされていないため）、<code>local-floor</code> 参照空間を要求しようとします。</p> + +<p>没入型セッションでない場合は、代わりに <code>viewer</code> 参照空間を要求します。</p> + +<p>いずれの場合も、空間が取得されたら、<code>refSpaceCreated()</code> 関数に渡します。 没入型空間の場合、指定された空間は将来の使用のために単に保存します。 ただし、インラインセッションの場合、床レベルが自動的に調整されない空間にいることがわかっているので、オフセット参照空間を要求して、ビューアーの高さを推定床レベルの 0 メートルより 1.5 メートル上にシフトします。 その新しい参照空間は、最初に受け取ったものの代わりに使用します。</p> + +<p>最後に、アニメーションフレームの要求が送信されます。</p> + +<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("WebXR","#dom-xrrigidtransform-position","XRRigidTransform.position")}}</td> + <td>{{Spec2("WebXR")}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div>{{Compat("api.XRRigidTransform.position")}}</div> diff --git a/files/ja/web/api/xrrigidtransform/xrrigidtransform/index.html b/files/ja/web/api/xrrigidtransform/xrrigidtransform/index.html new file mode 100644 index 0000000000..b268c41da9 --- /dev/null +++ b/files/ja/web/api/xrrigidtransform/xrrigidtransform/index.html @@ -0,0 +1,90 @@ +--- +title: XRRigidTransform() +slug: Web/API/XRRigidTransform/XRRigidTransform +tags: + - API + - AR + - Constructor + - Mixed Reality + - Orientation + - Position + - Reality + - Reference + - VR + - Virtual + - WebXR + - XR + - XRRigidTransform + - augmented + - transform +translation_of: Web/API/XRRigidTransform/XRRigidTransform +--- +<div>{{APIRef("WebXR Device API")}}</div> + +<p><span class="seoSummary"><strong><code>XRRigidTransform()</code></strong> コンストラクターは、点またはオブジェクトの位置と向きを表す新しい {{domxref("XRRigidTransform")}} オブジェクトを作成して返します。</span> 特に、<code>XRRigidTransform</code> は、空間を横断する座標系間で平行移動するための変換を提供するときに使用されます。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">let <em>xrRigidTransform</em> = new XRRigidTransform(<em>position</em>, <em>orientation</em>);</pre> + +<h3 id="Parameters" name="Parameters">パラメーター</h3> + +<dl> + <dt><code>position</code> {{optional_inline}}</dt> + <dd>点またはオブジェクトが配置される座標を指定する {{domxref("DOMPointInit")}} に準拠するオブジェクト。 これらの寸法はメートルで指定します。 このパラメーターが省略されているか、<code>DOMPointInit</code> と互換性がない場合、使用される位置は <code>{x: 0, y: 0, z: 0, w: 1}</code> であると見なされます。 <code>w</code> は<em>常に</em> 1 でなければなりません。</dd> + <dt><code>orientation</code> {{optional_inline}}</dt> + <dd>オブジェクトが向いている方向を指定する {{domxref("DOMPointInit")}} に準拠するオブジェクト。 向きのデフォルト値は <code>{x: 0, y: 0, z: 0, w: 1}</code> です。 指定された向きは、まだ正規化されていない場合は正規化されます。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">戻り値</h3> + +<p>オブジェクトの位置と向きを原点から指定された <code>position</code> に調整し、<code>orientation</code> によって示される方向を向く変換行列を表すように初期化された新しい {{domxref("XRRigidTransform")}} オブジェクト。</p> + +<h3 id="Exceptions" name="Exceptions">例外</h3> + +<dl> + <dt><code>TypeError</code></dt> + <dd>指定された <code>position</code> の <code>w</code> 座標の値が 1.0 ではありません。</dd> +</dl> + +<h2 id="Examples" name="Examples">例</h2> + +<p>この例では、シーンのアニメーションの開始が示されています。 特定のタイプの参照空間の要求から始まり、最初のアニメーションフレームを要求する前に、変換に基づいて座標系をシフトします。</p> + +<pre class="brush: js notranslate">let animationFrameRequestID = 0; + +xrSession.requestReferenceSpace("local-floor") +.then((refSpace) => { + xrReferenceSpace = refSpace.getOffsetReferenceSpace( + new XRRigidTransform(viewerPosition, viewerOrientation)); + animationFrameRequestID = xrSession.requestAnimationFrame(drawFrame); +});</pre> + +<p><code>local-floor</code> タイプの参照空間を要求した後、返された promise は最終的に解決され、その時点で新しい参照空間オブジェクト <code>refSpace</code> を受け取ります。 ビューアーの初期位置と向きから <code>XRRigidTransform</code> を作成した後、新しい変換を {{domxref("XRReferenceSpace.getOffsetReferenceSpace", "getOffsetReferenceSpace()")}} に渡して<em>別</em>の参照空間を作成します。 オフセットして、その原点が <code>viewerPosition</code> によって指定された座標と同じ空間内の場所に配置されるようにします。 向きも同様に修正されます。</p> + +<p>次に、{{domxref("XRSession.requestAnimationFrame", "requestAnimationFrame()")}} が呼び出され、描画する新しいアニメーションフレームを要求します。 <code>drawFrame()</code> コールバックは、システムが次のフレームを描画する準備ができたときに実行されます。</p> + +<p><a href="/ja/docs/Web/API/WebXR_Device_API/Movement_and_motion">移動、向き、モーション</a>には、さらに多くの例があります。</p> + +<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("WebXR","#dom-xrrigidtransform-xrrigidtransform","XRRigidTransform()")}}</td> + <td>{{Spec2("WebXR")}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div>{{Compat("api.XRRigidTransform.XRRigidTransform")}}</div> diff --git a/files/ja/web/api/xrtargetraymode/index.html b/files/ja/web/api/xrtargetraymode/index.html new file mode 100644 index 0000000000..37144393b8 --- /dev/null +++ b/files/ja/web/api/xrtargetraymode/index.html @@ -0,0 +1,106 @@ +--- +title: XRTargetRayMode +slug: Web/API/XRTargetRayMode +tags: + - 3D + - API + - AR + - Enum + - Enumerated Type + - Input + - Reality + - Reference + - Type + - VR + - Virtual + - WebXR + - WebXR API + - WebXR Device API + - XR + - XRTargetRayMode + - augmented + - source + - target +translation_of: Web/API/XRTargetRayMode +--- +<p>{{APIRef("WebXR")}}</p> + +<p><span class="seoSummary"><a href="/ja/docs/Web/API/WebXR_Device_API">WebXR Device API</a> の <strong><code>XRTargetRayMode</code></strong> 列挙型は、入力コントローラーのターゲティング光線を生成する方法を記述します。</span> ターゲティングは、視線追跡システムを使用してターゲットを見るか、ハンドコントローラー、グローブ、またはモーショントラッキングシステムを使用してターゲットを指すか、画面上で指やマウスを使用してターゲットをタップまたはクリックすることによって行うことができます。</p> + +<p>通常、<strong>ターゲット光線</strong>は、ターゲティングシステムのソースから、ユーザーが見ている方向または指している方向にターゲット光線に沿って描画されます。 光線の終点を示す方法と同様に、光線のスタイルは一般的にあなた次第です。 ターゲットとなる点またはオブジェクトは、図形を描画するか、ターゲットとなる表面またはオブジェクトを強調表示することによって示される場合があります。</p> + +<div style="width: 42em;"> +<figure style="background: #eee; padding: 0.5em; border: 1px solid #aaa; border-radius: 1em; max-width: 504px; padding: 1em; margin: 1em auto;"> +<figcaption><strong>ハンドコントローラーから放出されるターゲット光線。</strong></figcaption> +<img alt="ハンドコントローラーから放出されるターゲット光線を示すスクリーンショット" src="https://mdn.mozillademos.org/files/17089/example-target-ray.gif" style="width: 100%;"></figure> +</div> + +<p>ターゲット光線は、単純な線（理想的には距離とともにフェードする）から、上のスクリーンショットに示されているサイエンスフィクションの「フェイザー」スタイルなどのアニメーション効果まで、何でもかまいません。</p> + +<h2 id="Values" name="Values">値</h2> + +<dl> + <dt><code>gaze</code>（視線）</dt> + <dd>ユーザーは、ユーザーが見ている方向を検出する視線追跡システム（または<strong>視線入力</strong>）を使用しています。 ターゲット光線は、ビューアーの目を起点として描画され、ビューアーが見ている方向に追従します。</dd> + <dt><code>screen</code>（画面）</dt> + <dd>ターゲット光線の方向は、タッチスクリーン、マウス、またはその他の触覚入力デバイスをタップして示します。</dd> + <dt><code>tracked-pointer</code>（追跡ポインター）</dt> + <dd>ターゲティングは、ユーザーがターゲットの方向に向けるハンドヘルドデバイスまたはハンドトラッキングシステムを使用して行われます。 ターゲット光線は、手（または手の中のオブジェクト）からターゲット方向に伸びます。 方向はプラットフォーム固有のルールを使用して決定されますが、そのようなルールが存在しない場合は、ユーザーが人差し指を手からまっすぐに向けていると仮定して方向が選択されます。</dd> +</dl> + +<h2 id="Examples" name="Examples">例</h2> + +<p>このコードの断片は、フレームごとに1回呼び出される関数の一部を示しています。 <code>null</code> 以外の {{domxref("XRInputSource.targetRaySpace", "targetRaySpace")}} を持つ入力を探します。 このプロパティの値を持つ入力は、ターゲット光線をユーザーから外側に投影する入力を表します。</p> + +<p>このような入力ごとに、この例では、{{domxref("XRInputSource.targetRayMode", "targetRayMode")}} が <code>tracked-pointer</code> である入力を探します。 これは、入力が実際には、視線入力デバイス、画面タップ、またはマウスクリックではなく、ターゲティングデバイスを表すことを目的としていることを示しています。 追跡ポインターの場合、関数 <code>myRenderTargetRayAsBeam()</code> が呼び出され、入力コントローラーの仮想位置から、それが指している方向に外側にビームをレンダリングします。</p> + +<p>コードは、仮想空間でのユーザーの手の位置を表すコントローラーや任意のオブジェクトの描画、その他の入力関連のタスクなどを引き続き実行する必要があります。</p> + +<pre class="brush: js notranslate">function updateInputSources(session, frame, refSpace) { + for (let source of session.getInputSources()) { + let targetRayPose = frame.getPose(inputSource.targetRaySpace, refSpace); + + if (targetRayPose) { + if (source.targetRayMode == "tracked-pointer") { + myRenderTargetRayAsBeam(targetRayPose); + } + } + + /* ... */ + } +} +</pre> + +<p>詳細とより完全な例については、<a href="/ja/docs/Web/API/WebXR_Device_API/Inputs">入力と入力ソース</a>の記事を参照してください。</p> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('WebXR','#enumdef-xrtargetraymode','XRTargetRayMode')}}</td> + <td>{{Spec2('WebXR')}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden"> +<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> +</div> + +<p>{{Compat("api.XRTargetRayMode")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/WebXR_Device_API">WebXR Device API</a></li> + <li><a href="/ja/docs/Web/API/WebXR_Device_API/Inputs">入力と入力ソース</a></li> +</ul> diff --git a/files/ja/web/html/applying_color/index.html b/files/ja/web/html/applying_color/index.html index 02e1596709..3e49ec608c 100644 --- a/files/ja/web/html/applying_color/index.html +++ b/files/ja/web/html/applying_color/index.html @@ -4,173 +4,174 @@ slug: Web/HTML/Applying_color tags: - Beginner - CSS - - CSS 色 + - CSS Colors - Guide - HTML - - HTML スタイル - - HTML 色 + - HTML Colors + - HTML Styles + - Styling HTML - color translation_of: Web/HTML/Applying_color --- <div>{{HTMLRef}}</div> -<p>色を使うことは、人間の表現の基礎的な姿です。子どもは絵がうまくなるより前に色を試してみるものです。恐らくこれが、人々がウェブサイトの開発を学ぶときに色を最初に学ぶ理由でしょう。<span class="seoSummary"><a href="/ja/docs/Web/CSS">CSS</a> では、 <a href="/ja/docs/Web/HTML">HTML</a> <a href="/ja/docs/Web/HTML/Element">要素</a>に色を追加して望みの外見にする方法がたくさんあります。この記事では CSS の色を HTML の中で利用できるそれぞれの方法の基本をご案内します。</span></p> +<p>色使いは人間の表現の基本形です。子どもは絵がうまくなる前から色に触れています。恐らくこれこそが、人がウェブサイト開発を学ぶときにまず色を触る理由でしょう。<span class="seoSummary"><a href="/ja/docs/Web/CSS">CSS</a> では、<a href="/ja/docs/Web/HTML">HTML</a> <a href="/ja/docs/Web/HTML/Element">要素</a>に色を追加し好みの見た目にする方法が多岐に渡ります。この記事では CSS の色を HTML の中で利用できる各方法の基本をご案内します。</span></p> -<p>運の良いことに、 HTML に色をつけることは本当にかんたんで、またほとんどすべての要素に色をつけることができます。</p> +<p>幸いなことに HTML での着色は本当に簡単で、ほぼ全ての要素に色をつけられます。</p> -<p>{{anch("Things that can have color", "色を付けることができる物の一覧とそのための CSS プロパティ")}}、{{anch("How to describe a color", "色の記述方法")}}、{{anch("Using color", "スタイルシートとスクリプトでの色の利用")}}など、色を使うときに知る必要があることの多くに触れていきます。{{anch("Letting the user picka color", "ユーザーに色を選択させる")}}方法にも触れます。</p> +<p>{{anch("Things that can have color", "色付けできる物の一覧とそのための CSS プロパティ")}}、{{anch("How to describe a color", "色の記述方法")}}、{{anch("Using color", "スタイルシートとスクリプトでの色の利用")}}など、色使いにおいて知っておくべき数多のことに触れていきます。{{anch("Letting the user picka color", "ユーザーに色を選択させる")}}方法にも触れます。</p> -<p>それから、{{anch("Using color wisely", "賢い色の使い方")}}について短い議論を行います。様々な視力の人がいることを意識した、適切な色の選択方法です。</p> +<p>それから、{{anch("Using color wisely", "賢い色の使い方")}}について短い論述をします。これは、様々な視覚の人がいることを意識した、適切な色の選択方法です。</p> -<h2 id="Things_that_can_have_color" name="Things_that_can_have_color">色をつけられるもの</h2> +<h2 id="Things_that_can_have_color" name="Things_that_can_have_color">色付けできる物</h2> -<p>要素レベルでは、 HTML のすべてのものに色をつけることができます。Instead, let's look at things in terms of the kinds of things that are drawn in the elements, such as text and borders and so forth. それぞれについて、それらに色をつけられるCSSのプロパティのリストを見てみましょう。</p> +<p>要素レベルでは、HTML 内のすべての物に色を付けられます。そこで、テキストや境界線などの要素として描画されるものの種類ごとに、色を付ける CSS プロパティのリストを見ていきます。</p> -<p>基礎的・入門的なレベルにおいては、 {{cssxref("color")}} プロパティは HTML 要素のコンテンツの色を定義し、また {{cssxref("background-color")}} は HTML 要素の背景色を定義します。 これらのプロパティはほとんどすべての要素について使用できます。</p> +<p>基礎的なレベルでならば、 {{cssxref("color")}} プロパティは HTML 要素の手前側の色を定義し、{{cssxref("background-color")}} は HTML 要素の背景色を定義すると言えます。これらのプロパティはほぼ全ての要素で使用できます。</p> <h3 id="Text" name="Text">テキスト</h3> -<p>要素がレンダリングされるときにはいつも、以下のプロパティにもとづきテキストの色、背景の色、そしてテキストの装飾が決定されます。</p> +<p>この要素を描画するときは、以下のプロパティに基づいてテキストの色、背景色、テキストの装飾を決定します。</p> <dl> <dt>{{cssxref("color")}}</dt> - <dd>The color to use when drawing the text and any <a href="/ja/docs/Learn/CSS/Styling_text/Fundamentals#Font_style_font_weight_text_transform_and_text_decoration">text decorations</a> (such as the addition of under- or overlines, strike-through lines, and so forth.</dd> + <dd>テキストと<a href="/ja/docs/Learn/CSS/Styling_text/Fundamentals#Font_style_font_weight_text_transform_and_text_decoration">テキストの装飾</a> (下線や上線、打ち消し線などを付加するもの) に使用する色です。</dd> <dt>{{cssxref("background-color")}}</dt> - <dd>テキストの背景の色</dd> + <dd>テキストの背景色です。</dd> <dt>{{cssxref("text-shadow")}}</dt> - <dd>Configures a shadow effect to apply to text. Among the options for the shadow is the shadow's base color (which is then blurred and blended with the background based on the other parameters). See {{SectionOnPage("/ja/docs/Learn/CSS/Styling_text/Fundamentals", "Text drop shadows")}} to learn more.</dd> + <dd>テキストに適用する影の効果を設定します。影の設定には、影のベース色 (他のパラメータに基づいて背景をぼかして混色する色) があります。より詳しくは{{SectionOnPage("/ja/docs/Learn/CSS/Styling_text/Fundamentals", "テキストのドロップシャドウ")}}を参照してください。</dd> <dt>{{cssxref("text-decoration-color")}}</dt> - <dd>By default, text decorations (such as underlines, strikethroughs, etc) use the <code>color</code> property as their colors. However, you can override that behavior and use a different color for them with the <code>text-decoration-color</code> property.</dd> + <dd>デフォルトでは、テキストの装飾 (下線、打ち消し線など) の色には <code>color</code> プロパティを使用します。しかし、<code>text-decoration-color</code> プロパティを用いることで、この挙動をオーバーライドして異なる色を使用できます。</dd> <dt>{{cssxref("text-emphasis-color")}}</dt> - <dd>The color to use when drawing emphasis symbols adjacent to each character in the text. This is used primarily when drawing text for East Asian languages.</dd> + <dd>文章中の各文字に隣接した圏点の描画に使用する色です。主に東アジア言語の文字描画で使用します。</dd> <dt>{{cssxref("caret-color")}}</dt> - <dd>The color to use when drawing the {{Glossary("caret")}} (sometimes referred to as the text input cursor) within the element. This is only useful in elements that are editable, such as {{HTMLElement("input")}} and {{HTMLElement("textarea")}} or elements whose HTML {{htmlattrxref("contenteditable")}} attribute is set.</dd> + <dd>要素の {{Glossary("caret", "キャレット")}} (テキスト入力カーソルとも表現されるもの) の描画に使用する色です。これは編集可能な要素では有用で、{{HTMLElement("input")}} や {{HTMLElement("textarea")}} または HTML {{htmlattrxref("contenteditable")}} 属性がセットされた要素に使用されます。</dd> </dl> <h3 id="Boxes" name="Boxes">ボックス</h3> -<p>Every element is a box with some sort of content, and has a background and a border in addition to whatever contents the box may have.</p> +<p>すべての要素は中身があるボックスであり、そのボックスの内容に加えて、背景と境界線もあります。</p> <dl> - <dt>{{anch("Borders")}}</dt> - <dd>See the section {{anch("Borders")}} for a list of the CSS properties you can use to set the colors of a box's borders.</dd> + <dt>{{anch("Borders", "境界線")}}</dt> + <dd>ボックスの境界線の色を設定できる CSS プロパティ一覧は、{{anch("Borders", "境界線")}} の章を参照してください。</dd> <dt>{{cssxref("background-color")}}</dt> - <dd>要素の前面になにもない時、その要素の範囲に使われる背景の色です。</dd> + <dd>要素の前面を除いて、その要素の領域で使われる背景色です。</dd> <dt>{{cssxref("column-rule-color")}}</dt> - <dd>テキストの列（カラム）を区切る線に使われる色です。</dd> + <dd>テキストの列を区切る線に使う色です。</dd> <dt>{{cssxref("outline-color")}}</dt> - <dd>The color to use when drawing an outline around the outside of the element. This outline is different from the border in that it doesn't get space set aside for it in the document (so it may overlap other content). It's generally used as a focus indicator, to show which element will receive input events.</dd> + <dd>要素の外側に輪郭線を描くときに使う色です。この輪郭線は境界線とは異なり、ドキュメント内でそのスペースを確保しません (そのため他のコンテンツと重なる可能性があります)。一般的には、入力イベントを受け取る要素を示したフォーカスインジケーターに使用されます。</dd> </dl> <h3 id="Borders" name="Borders">境界線</h3> -<p>あらゆる要素には、まわりに境界線が存在します。 基本的な要素の境界は、要素の内容の端に描かれている線です。 See {{SectionOnPage("/ja/docs/Learn/CSS/Introduction_to_CSS/Box_model", "Box properties")}} to learn about the relationship between elements and their borders, and the article <a href="/ja/docs/Learn/CSS/Styling_boxes/Borders">Styling borders using CSS</a> to learn more about applying styles to borders.</p> +<p>あらゆる要素には、周りに境界線が存在します。基本的な要素の境界は、要素の内容の端に描かれている線です。要素とその境界線の関係性については {{SectionOnPage("/ja/docs/Learn/CSS/Introduction_to_CSS/Box_model", "ボックスのプロパティ")}} を、より詳しい境界線へのスタイルの適用については <a href="/ja/docs/Learn/CSS/Styling_boxes/Borders">CSS での境界線のスタイル付け</a> をご参照ください。</p> -<p>You can use the {{cssxref("border")}} shorthand property, which lets you configure everything about the border in one shot (including non-color features of borders, such as its <a href="/ja/docs/Web/CSS/border-width">width</a>, <a href="/ja/docs/Web/CSS/border-style">style</a> (solid, dashed, etc.), and so forth.</p> +<p>{{cssxref("border")}} 短縮プロパティを使用することもできます。これは、境界線に関する (色に関しない<a href="/ja/docs/Web/CSS/border-width">線幅</a>、<a href="/ja/docs/Web/CSS/border-style">線の種類</a> (実線、破線など) のような境界線の機能も含んだ) すべての設定をこれ一つで行えます。</p> <dl> <dt>{{cssxref("border-color")}}</dt> - <dd>Specifies a single color to use for every side of the element's border.</dd> - <dt>{{cssxref("border-left-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-top-color")}}, and {{cssxref("border-bottom-color")}}</dt> - <dd>Lets you set the color of the corresponding side of the element's border.</dd> - <dt>{{cssxref("border-block-start-color")}} and {{cssxref("border-block-end-color")}}</dt> - <dd>With these, you can set the color used to draw the borders which are closest to the start and end of the block the border surrounds. In a left-to-right writing mode (such as the way English is written), the block start border is the top edge and the block end is the bottom. This differs from the inline start and end, which are the left and right edges (corresponding to where each line of text in the box begins and ends).</dd> - <dt>{{cssxref("border-inline-start-color")}} and {{cssxref("border-inline-end-color")}}</dt> - <dd>These let you color the edges of the border closest to to the beginning and the end of the start of lines of text within the box. Which side this is will vary depending on the {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}} properties, which are typically (but not always) used to adjust text directionality based on the language being displayed. For example, if the box's text is being rendered right-to-left, then the <code>border-inline-start-color</code> is applied to the right side of the border.</dd> + <dd>要素の境界線の各辺に使用する単色を指定します。</dd> + <dt>{{cssxref("border-left-color")}} と {{cssxref("border-right-color")}} と {{cssxref("border-top-color")}} と {{cssxref("border-bottom-color")}}</dt> + <dd>要素の境界線の各辺に対応する色を指定できます。</dd> + <dt>{{cssxref("border-block-start-color")}} と {{cssxref("border-block-end-color")}}</dt> + <dd>これらは、境界線が囲むブロックの始点と終点に最も近い境界線の描画色を設定することができます。左から右への書き方 (英語の書き方など) では、ブロック開始の境界線は上端、ブロック終了の境界線は下端になります。これは、インライン開始とインライン終了である左右の (ボックス内の各行のテキストの開始と終了の位置に対応する) 端とは異なります。</dd> + <dt>{{cssxref("border-inline-start-color")}} と {{cssxref("border-inline-end-color")}}</dt> + <dd>これらは、ボックス内のテキスト行の先頭と末尾に最も近い境界線の縁に色を付けられます。これは {{cssxref("writing-mode")}}、{{cssxref("direction")}}、{{cssxref("text-orientation")}} プロパティに依存しますが、どちら側になるかは {{cssxref("writing-mode")}}、{{cssxref("direction")}}、{{cssxref("text-orientation")}} プロパティによって異なります。例えば、ボックスのテキストが右から左に描画される場合、<code>border-inline-start-color</code> は境界線の右側に適用されます。</dd> </dl> <h3 id="Other_ways_to_use_color" name="Other_ways_to_use_color">色をつける他の方法</h3> -<p>CSS が唯一の色を付けるためのウェブ技術ではありません。ウェブで使用することができ、色もサポートしているグラフィック技術があります。</p> +<p>CSS が唯一の色を付けるためのウェブ技術ではありません。色もサポートしている、ウェブで使用可能なグラフィック技術があります。</p> <dl> - <dt>HTMLの <a href="/ja/docs/Web/API/Canvas_API">Canvas API</a></dt> - <dd>Canvas APIで、2Dのビットマップ画像を {{HTMLElement("canvas")}} 要素の中に描画しましょう。 より学ぶには次のリンクを参照してください: <a href="/ja/docs/Web/API/Canvas_API/Tutorial">Canvas tutorial</a> .</dd> + <dt>HTML <a href="/ja/docs/Web/API/Canvas_API">Canvas API</a></dt> + <dd>Canvas API では、2D のビットマップ画像を {{HTMLElement("canvas")}} 要素の中に描画できます。より詳しくは <a href="/ja/docs/Web/API/Canvas_API/Tutorial">Canvas チュートリアル</a>をご参照ください。</dd> <dt><a href="/ja/docs/Web/SVG">SVG</a> (Scalable Vector Graphics)</dt> - <dd>SVGを用いれば、特定の形・パターン・線を描くコマンドを用いて画像を描くことができます。 SVGのコマンドはXMLの形式で、それにより直接ウェブページに埋め込む事ができ、またHTMLのimg要素を用いて、他の画像と同じように画像を配置することもできます。</dd> + <dd>SVG ならば、特定の形状、パターン、線を描くコマンドで画像を描画できます。 SVG のコマンドは XML の形式となっており、直接ウェブページに埋め込めます。また、img 要素を使うと他の画像と同じような配置もできます。</dd> <dt><a href="/ja/docs/Web/API/WebGL_API">WebGL</a></dt> - <dd>Web Graphics Library とはOpen GL ESを基礎にしたAPIで、これを用いるとウェブ上に2Dや3Dのハイパフォーマンスなグラフィックを描画することができます。より詳しく知るには <a href="/ja/docs/Web/API/WebGL_API/Tutorial">WebGL チュートリアル</a>を参照してください。</dd> + <dd>Web Graphics Library は Open GL ES を基にした API で、ウェブ上に 2D や 3D のハイパフォーマンスなグラフィックを描画できます。より詳しくは <a href="/ja/docs/Web/API/WebGL_API/Tutorial">WebGL チュートリアル</a>をご参照ください。</dd> </dl> -<h2 id="How_to_describe_a_color" name="How_to_describe_a_color">色をどうやって指定するか</h2> +<h2 id="How_to_describe_a_color" name="How_to_describe_a_color">色の指定方法</h2> -<p>CSSを用いて色を表現するには、アナログの概念である「色」の概念をコンピュータが解釈できるようなデジタルの形式に翻訳する方法を見つける必要があります。 This is typically done by breaking down the color into components, such as how much of each of a set of primary colors to mix together, or how bright to make the color. As such, there are several ways you can describe color in CSS.</p> +<p>CSS で色を表現するには、アナログの概念である「色」の概念を、コンピュータが解釈できるようなデジタル形式に翻訳する方法が必要です。これは通常、原色の集合それぞれをどのくらい混ぜるか、どのくらいの明るさにするかなど、色を構成要素に分解することで行います。ここでは、CSS で色を表現するいくつかの方法を示します。</p> -<p>For more detailed discussion of each of the color value types, see the reference for the CSS {{cssxref("<color>")}} unit.</p> +<p>色の値型の詳細は、CSS {{cssxref("<color>")}} 単位のリファレンスをご参照ください。</p> <h3 id="Keywords" name="Keywords">キーワード</h3> -<p>A set of standard color names have been defined, letting you use these keywords instead of numeric representations of colors if you choose to do so and there's a keyword representing the exact color you want to use. Color keywords include the standard primary and secondary colors (such as <code>red</code>, <code>blue</code>, or <code>orange</code>), shades of gray (from <code>black</code> to <code>white</code>, including colors like <code>darkgray</code> and <code>lightgrey</code>), and a variety of other blended colors including <code>lightseagreen</code>, <code>cornflowerblue</code>, and <code>rebeccapurple</code>.</p> +<p>標準の色名がいくつか定義されており、色の数値表現の代わりにこれらのキーワードを使用できます。色キーワードには原色と副色 (<code>red</code>、<code>blue</code>、<code>orange</code> など)、灰色 (<code>black</code> から <code>white</code> までの <code>darkgray</code> や <code>lightgrey</code> といった色を含む)、これらを混ぜた色である <code>lightseagreen</code>、<code>cornflowerblue</code>、<code>rebeccapurple</code> が含まれます。</p> -<p>See {{SectionOnPage("/ja/docs/Web/CSS/color_value", "Color keywords", "code")}} for a list of all available color keywords.</p> +<p>利用可能な全ての色キーワードの一覧は、{{SectionOnPage("/ja/docs/Web/CSS/color_value", "色キーワード")}}をご参照ください。</p> -<h3 id="RGB_values" name="RGB_values">RGB値</h3> +<h3 id="RGB_values" name="RGB_values">RGB 値</h3> -<p>There are three ways to represent an RGB color in CSS.</p> +<p>CSS での RGB の色表現は 3 通りあります。</p> -<h4 id="Hexadecimal_string_notation" name="Hexadecimal_string_notation">16進数の文字列表記</h4> +<h4 id="Hexadecimal_string_notation" name="Hexadecimal_string_notation">16 進数文字列表記</h4> -<p>Hexadecimal string notation represents a color using hexadecimal digits to represent each of the color components (red, green, and blue). It may also include a fourth compoment: the alpha channel (or opacity). Each color component can be represented as a number between 0 and 255 (0x00 and 0xFF) or, optionally, as a number between 0 and 15 (0x0 and 0xF). All components <em>must</em> be specified using the same number of digits. If you use the single-digit notation, the final color is computed by using each component's digit twice; that is, <code>"#D"</code> becomes <code>"#DD"</code> when drawing.</p> +<p>16 進数文字列表記は、色の各要素 (赤、緑、青) を表すために 16 進数の数字で色を表します。また、4 つ目の要素のアルファチャネル (または不透明度) を含められます。各色要素は、0 〜 255 (0x00 と 0xFF) の間の数値、または任意で 0 ～ 15 (0x0 と 0xF) の間の数値として表せます。全要素は同じ桁数で指定する必要があります。1 桁の表記を使用した場合、描画時の最終的な色は <code>"#D"</code> が <code>"#DD"</code> になるように各構成要素の桁を 2 回繰り返して計算します。</p> -<p>A color in hexadecimal string notation always begins with the character <code>"#"</code>. After that come the hexadecimal digits of the color code. The string is case-insensitive.</p> +<p>16 進数文字列表記の色は、常に文字 <code>"#"</code> で始まります。その後にカラーコードの 16 進数が来ます。文字列の大文字小文字は区別されません。</p> <dl> <dt><code>"#rrggbb"</code></dt> - <dd>Specifies a fully-opaque color whose red component is the hexadecimal number <code>0xrr</code>, green component is <code>0xgg</code>, and blue component is <code>0xbb</code>.</dd> + <dd>16 進数の完全不透明色を指定します。赤色成分が <code>0xrr</code>、緑色成分がが <code>0xgg</code>、青色成分が <code>0xbb</code> です。</dd> <dt><code>"#rrggbbaa"</code></dt> - <dd>Specifies a color whose red component is the hexadecimal number <code>0xrr</code>, green component is <code>0xgg</code>, and blue component is <code>0xbb</code>. The alpha channel is specified by <code>0xaa</code>; the lower this value is, the more translucent the color becomes.</dd> + <dd>16 進数の色を指定します。赤色成分が <code>0xrr</code>、緑色成分がが <code>0xgg</code>、青色成分が <code>0xbb</code> です。アルファチャンネルは <code>0xaa</code> で指定します。この値が小さいほど透明に近づきます。</dd> <dt><code>"#rgb"</code></dt> - <dd>Specifies a color whose red component is the hexadecimal number <code>0xrr</code>, green component is <code>0xgg</code>, and blue component is <code>0xbb</code>.</dd> + <dd>16 進数の完全不透明色を指定します。赤色成分が <code>0xrr</code>、緑色成分がが <code>0xgg</code>、青色成分が <code>0xbb</code> です。</dd> <dt><code>"#rgba"</code></dt> - <dd>Specifies a color whose red component is the hexadecimal number <code>0xrr</code>, green component is <code>0xgg</code>, and blue component is <code>0xbb</code>. The alpha channel is specified by <code>0xaa</code>; the lower this value is, the more translucent the color becomes.</dd> + <dd>16 進数の色を指定します。赤色成分が <code>0xrr</code>、緑色成分がが <code>0xgg</code>、青色成分が <code>0xbb</code> です。アルファチャンネルは <code>0xaa</code> で指定します。この値が小さいほど透明に近づきます。</dd> </dl> -<p>As an example, you can represent the opaque color bright blue as <code>"#0000ff"</code> or <code>"#00f"</code>. To make it 25% opaque, you can use <code>"#0000ff44"</code> or <code>"#00f4"</code>.</p> +<p>例として、明るい青の不透明色は <code>"#0000ff"</code> や <code>"#00f"</code> で表現できます。25% 不透明にするには、<code>"#0000ff44"</code> や <code>"#00f4"</code> のようにします。</p> <h4 id="RGB_functional_notation" name="RGB_functional_notation">RGB 関数表記</h4> -<p>RGB (Red/Green/Blue) functional notation, like hexadecimal string notation, represents colors using their red, green, and blue components (as well as, optionally, an alpha channel component for opacity). However, instead of using a string, the color is defined using the CSS function {{cssxref("color_value", "rgb()", "#rgb()")}}. This function accepts as its input parameters the values of the red, green, and blue components and an optional fourth parameter, the value for the alpha channel.</p> +<p>RGB (赤/緑/青) 関数表記法は、16 進文字列表記法と同様に赤、緑、青の各成分 (任意では不透明度のアルファチャンネル成分) を用いて色を表現しますが、文字列ではなく CSS 関数 {{cssxref("color_value", "rgb()", "#rgb()")}} で色を定義します。この関数は、入力パラメータとして赤、緑、青の各成分の値と、任意の第 4 引数のアルファチャンネル値を受け取ります。</p> -<p>Legal values for each of these parameters are:</p> +<p>これらの引数の正常値は以下の通りです。</p> <dl> - <dt><code>red</code>, <code>green</code>, and <code>blue</code></dt> - <dd>Each must be an {{cssxref("<integer>")}} value between 0 and 255 (inclusive), or a {{cssxref("<percentage>")}} from 0% to 100%.</dd> + <dt><code>red</code>、<code>green</code>、<code>blue</code></dt> + <dd>0 以上 255 以下の {{cssxref("<integer>")}} 型の値か、0% から 100% の {{cssxref("<percentage>")}} 型の値です。</dd> <dt><code>alpha</code></dt> - <dd>The alpha channel is a number between 0.0 (fully transparent) and 1.0 (fully opaque). You can also specify a percentage where 0% is the same as 0.0 and 100% is the same as 1.0.</dd> + <dd>アルファチャンネルは、0.0 (完全透過) から 1.0 (完全不透明) の間の数値です。また、 パーセントも指定でき、これは 0% が 0.0 と同じで 100% が 1.0 と同じです。</dd> </dl> -<p>For example, a bright red that's 50% opaque can be represented as <code>rgb(255, 0, 0, 0.5)</code> or <code>rgb(100%, 0, 0, 50%)</code>.</p> +<p>例えば、不透明度 50% の明るい赤は <code>rgb(255, 0, 0, 0.5)</code> や <code>rgb(100%, 0, 0, 50%)</code> のように表現できます。</p> <h3 id="HSL_functional_notation" name="HSL_functional_notation">HSL 関数表記</h3> -<p>デザイナーやアーティストたちは {{interwiki("wikipedia", "HSL and HSV", "HSL")}} (Hue/Saturation/Luminosity) をもちいて仕事をしたがる場合があります。 Webにおいては、HSL色はHSL関数表記をもちいて表現されています。CSSの <code>hsl()</code> 関数は、 <code>rgb()</code> 関数と表現方法においてとても似ています。</p> +<p>デザイナーやアーティストは {{interwiki("wikipedia", "HSL and HSV", "HSL")}} (Hue/Saturation/Luminosity) で作業しようとすることがあります。ウェブにおける HSL 色は、HSL 関数表記で表現します。CSS の <code>hsl()</code> 関数の表現方法は、<code>rgb()</code> 関数とよく似ています。</p> <div style="padding-bottom: 20px;"> <figure style="width: 500px;"><img alt="HSL 色円柱" src="https://mdn.mozillademos.org/files/15445/1200px-HSL_color_solid_cylinder_alpha_lowgamma.png" style="height: 375px; width: 500px;"> -<figcaption><em><strong>図1 HSL 色円柱</strong> Hue defines the actual color based on the position along a circular color wheel representing the colors of the visible spectrum. Saturation is a percentage of how much of the way between being a shade of gray and having the maximum possible amount of the given hue. As the value of luminance (or lightness) increases, the color transitions from the darkest possible to the brightest possible (from black to white). Image courtesy of user <a href="http://commons.wikimedia.org/wiki/User:SharkD">SharkD</a> on <a href="https://www.wikipedia.org/">Wikipedia</a>, distributed under the <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY-SA 3.0</a> license.</em></figcaption> +<figcaption><em><strong>図 1. HSL 色円柱</strong> </em>色相は、可視スペクトルの色を表す円形の色相環に沿った位置に基づいて実際の色を定義します。彩度は、灰色の強さ、もしくはその色相で取りうる最も濃い色に対する割合です。輝度 (または明度) の値が高くなると、色は最も暗い色から最も明るい色 (黒から白) へと変化します。<em>画像提供は <a href="https://www.wikipedia.org/">Wikipedia </a>の <a href="http://commons.wikimedia.org/wiki/User:SharkD">SharkD</a> さんより、<a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY-SA 3.0</a> ライセンスで配布されているものです。</em></figcaption> </figure> </div> -<p>The value of the hue (H) component of an HSL color is an angle from red around through yellow, green, cyan, blue, and magenta (ending up back at red again at 360°) that identifies what the base color is. The value can be specified in any {{cssxref("<angle>")}} unit supported by CSS, including degrees (<code>deg</code>), radians (<code>rad</code>), gradians (<code>grad</code>), or turns (<code>turn</code>). But this doesn't control how vivid or dull, or how bright or dark the color is.</p> +<p>HSL カラーの色相 (H) 成分の値は、赤から黄、緑、水、青、マゼンタ (そして 360° で再び赤に戻る) までの角度で、ベースの色を特定します。度 (<code>deg</code>)、ラジアン (<code>rad</code>)、グラジアン (<code>grad</code>)、回転 (<code>turn</code>) など、CSS がサポートする任意の {{cssxref("<angle>")}} 単位で値を指定できます。しかしこれでは、鮮やかさや濁り、色の明るさや暗さを制御できません。</p> -<p>The saturation (S) component of the color specifies what percentage of the final color is comprised of the specified hue. The rest is defined by the grey level provided by the luminance (L) component.</p> +<p>色の彩度 (S) 成分は、最終的な色を指定の色相が構成する割合を指定します。残りの輝度 (L) 成分は、灰色の強さを定義します。</p> -<p>Think of it like creating the perfect paint color:</p> +<p>以下のように、完璧な絵の具の色を作るかのように考えてみましょう。</p> <ol> - <li>You start with base paint that's the maximum intensity possible for a given color, such as the most intense blue that can be represented by the user's screen. This is the <strong>hue</strong> (H) component: a value representing the angle around the color wheel for the vivid hue we want to use as our base.</li> - <li>Then select a greyscale paint that corresponds how bright you want the color to be; this is the luminance. Do you want it to be very bright and nearly white, or very dark and closer to black, or somewhere in between? This is specified using a percentage, where 0% is perfectly black and 100% is perfectly white. (regardless of the saturation or hue). In between values are a literal grey area.</li> - <li>Now that you have a grey paint and a perfectly vivid color, you need to mix them together. The saturation (S) component of the color indicates what percentage of the final color should be comprised of that perfectly vivid color. The rest of the final color is made up of the grey paint that represents the saturation.</li> + <li>ユーザーの画面で表現できる最も強い青など、その色で最も強いベースの絵の具から始めます。これが<strong>色相</strong> (H) 要素で、ベースとして使用したい鮮やかな色相環の周りの角度を表す値です。</li> + <li>次に、欲しい色の明るさに対応するグレースケールの絵の具を選びます。非常に明るくて白に近い色にしたいのか、それとも非常に暗くて黒に近い色にしたいのか、それともその中間のどこかにしたいのか。これはパーセンテージで指定し、0% が完全な黒、100% が完全な白となります。(彩度や色相に関係なく)。この値の間には文字通り灰色の領域があります。</li> + <li>灰色の絵の具と完全に鮮やかな色が手に入ったので、これらを混ぜ合わせる必要があります。色の彩度 (S) 成分は、最終的な色のうち完全に鮮やかな色が構成するパーセントを示します。残りは、彩度を表すグレーの絵の具となります。</li> </ol> -<p>You can also optionally include an alpha channel, to make the color less than 100% opaque.</p> +<p>任意でアルファチャンネルを追加して、色を 100% 以下の不透明度にすることもできます。</p> -<p>Here are some sample colors in HSL notation:</p> +<p>こちらは、HSL 表記のサンプル色です。</p> <div id="hsl-swatches"> <div class="hidden"> -<pre class="brush: css">table { +<pre class="brush: css notranslate">table { border: 1px solid black; font: 16px "Open Sans", Helvetica, Arial, sans-serif; border-spacing: 0; @@ -187,7 +188,7 @@ th { background-color: hsl(0, 0%, 75%); }</pre> -<pre class="brush: html"><table> +<pre class="brush: html notranslate"><table> <thead> <tr> <th scope="col">Color in HSL notation</th> @@ -227,26 +228,26 @@ th { </div> <div class="note"> -<p>hueの単位を省略した場合には、度 (<code>deg</code>)であるとされることに注意してください。</p> +<p>注意として、色相の単位を省略した場合は度 (<code>deg</code>) と見なされます。</p> </div> -<h2 id="Using_color" name="Using_color">色の使用</h2> +<h2 id="Using_color" name="Using_color">色の活用</h2> -<p>Now that you know what CSS properties exist that let you apply color to elements and the formats you can use to describe colors, you can put this together to begin to make use of color. As you may have seen from the list under {{anch("Things that can have color")}}, there are plenty of things you can color with CSS. Let's look at this from two sides: using color within a {{Glossary("stylesheet")}}, and adding and changing color using {{Glossary("JavaScript")}} code to alter the styles of elements.</p> +<p>要素に色を適用する CSS プロパティの存在と、色の記述に使用可能な形式が分かったので、これをまとめて色を活用し始めてみましょう。{{anch("着色できる物")}}のリストを見て把握できたと思いますが、CSS で色を付けられる物はたくさんあります。ここでは、{{Glossary("stylesheet", "スタイルシート")}}内で色を使う場合と、{{Glossary("JavaScript")}} コードで要素のスタイルを変更するために色を追加したり変更したりする場合の、2 つの側面から見ていきます。</p> -<h3 id="Specifying_colors_in_stylesheets" name="Specifying_colors_in_stylesheets">スタイルシート(CSS)を使った色の指定</h3> +<h3 id="Specifying_colors_in_stylesheets" name="Specifying_colors_in_stylesheets">スタイルシートでの色指定</h3> -<p>The easiest way to apply color to elements—and the way you'll usually do it—is to simply specify colors in the CSS that's used when rendering elements. While we won't use every single property mentioned previously, we'll look at a couple of examples. The concept is the same anywhere you use color.</p> +<p>要素に色を適用する最も簡単な方法は、要素の描画に使用する CSS で色を指定することです。前述のプロパティをすべて使用するわけではありませんが、いくつかの例を見てみましょう。色を使う場所によらず、考え方は同じです。</p> -<p>Let's take a look at an example, starting by looking at the results we're trying to achieve:</p> +<p>先にこれからやることの結果を見てから、サンプルを見ていきます。</p> <div>{{EmbedLiveSample("Specifying_colors_in_stylesheets", 650, 150)}}</div> <h4 id="HTML">HTML</h4> -<p>The HTML responsible for creating the above example is shown here:</p> +<p>上記の例を作成するための HTML は、この通りです。</p> -<pre class="brush: html"><div class="wrapper"> +<pre class="brush: html notranslate"><div class="wrapper"> <div class="box boxLeft"> <p> This is the first box. @@ -259,15 +260,15 @@ th { </div> </div></pre> -<p>This is pretty simple, using a {{HTMLElement("div")}} as a wrapper around the contents, which consists of two more <code><div></code>s, each styled differently with a single paragraph ({{HTMLElement("p")}}) in each box.</p> +<p>これは非常にシンプルで、{{HTMLElement("div")}} をコンテンツのラッパーとして使用し、さらに 2 つの <div> で構成しています。</p> -<p>The magic happens, as usual, in the CSS, where we'll apply colors define the layout for the HTML above.</p> +<p>魔法はいつも、CSS で起こります。上記の HTML で定義したレイアウトに、色を適用していきます。</p> <h4 id="CSS">CSS</h4> -<p>We'll look at the CSS to create the above results a piece at a time, so we can review the interesting parts one by one.</p> +<p>上記の結果を作り出す CSS を一つずつ見ていけば、面白い部分も一つずつ見られるでしょう。</p> -<pre class="brush: css">.wrapper { +<pre class="brush: css notranslate">.wrapper { width: 620px; height: 110px; margin: 0; @@ -275,13 +276,13 @@ th { border: 6px solid mediumturquoise; }</pre> -<p>The <code>.wrapper</code> class is used to assign styles to the {{HTMLElement("div")}} that encloses all of our other content. This establishes thesize of the container using {{cssxref("width")}} and {{cssxref("height")}} as well as its {{cssxref("margin")}} and {{cssxref("padding")}}.</p> +<p><code>.wrapper</code> クラスは、他のすべてのコンテンツを囲む {{HTMLElement("div")}} にスタイルを割り当てるために使っています。これは {{cssxref("width")}} と {{cssxref("height")}} を使ってコンテナのサイズを決定し、さらに {{cssxref("margin")}} と {{cssxref("padding")}} を使っています。</p> -<p>Of more interest to our discussion here is the use of the {{cssxref("border")}} property to establish a border around the outside edge of the element. This border is a solid line, 6 pixels wide, in the color <code>mediumturquoise</code>.</p> +<p>ここでの論述でさらに興味深いのは、{{cssxref("border")}} プロパティで要素の縁に境界線を設定していることです。この境界線は幅 6 ピクセルの実線で、色は <code>mediumturquoise</code> です。</p> -<p>Our two colored boxes share a number of properties in common, so next we establish a class, <code>.box</code>, that defines those shared properties:</p> +<p>2 つの色付きボックスには共通のプロパティがいくつかありますので、そのプロパティを定義するクラス <code>.box</code> を作成します。</p> -<pre class="brush: css">.box { +<pre class="brush: css notranslate">.box { width: 290px; height: 100px; margin: 0; @@ -292,23 +293,23 @@ th { align-items: center; }</pre> -<p>In brief, <code>.box</code> establishes the size of each box, as well as the configuration of the font used within. We also take advantage of <a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS Flexbox</a> to easily center the contents of each box. We enable <code>flex</code> mode using {{cssxref("display", "display: flex")}}, and set both {{cssxref("justify-content")}} and {{cssxref("align-items")}} to <code>center</code>. Then we can create a class for each of the two boxes that defines the properties that differ between the two.</p> +<p>簡単に言えば、<code>.box</code> は各ボックスのサイズとその中で使用するフォントの構成を確立しています。また、<a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS フレックスボックス</a>も利用して簡単に各ボックスのコンテンツを中央揃えしています。{{cssxref("display", "display: flex")}} で <code>flex</code> モードを有効にし、{{cssxref("justify-content")}} と {{cssxref("align-items")}} を <code>center</code> に設定しています。あとは、2 つのボックスそれぞれに異なるプロパティを定義するクラスを作るだけです。</p> -<pre class="brush: css">.boxLeft { +<pre class="brush: css notranslate">.boxLeft { float: left; background-color: rgb(245, 130, 130); outline: 2px solid darkred; }</pre> -<p>The <code>.boxLeft</code> class—which, cleverly, is used to style the box on the left—floats the box to the left, then sets up the colors:</p> +<p><code>.boxLeft</code> クラスは、左側のボックスのスタイルとして巧みに使われ、以下のようにボックスを左側に浮かせて色を設定しています。</p> <ul> - <li>The box's background color is set by changing the value of the CSS {{cssxref("background-color")}} property to <code>rgb(245, 130, 130)</code>.</li> - <li>An outline is defined for the box. Unlike the more commonly used <code>border</code>, {{cssxref("outline")}} doesn't affect layout at all; it draws over the top of whatever may happen to be outside the element's box instead of making room as <code>border</code> does. This outline is a solid, dark red line that's two pixels thick. Note the use of the <code>darkred</code> keyword when specifying the color.</li> - <li>Notice that we're not explicitly setting the text color. That means the value of {{cssxref("color")}} will be inherited from the nearest containing element that defines it. By default, that's black.</li> + <li>CSS {{cssxref("background-color")}} プロパティを <code>rgb(245, 130, 130)</code> の値に変更することで、ボックスの背景色を設定しています。</li> + <li>ボックスに輪郭線を定義しています。一般的によく使われる <code>border</code> とは異なり、{{cssxref("outline")}} はレイアウトに全く影響しません。この輪郭線は、2 ピクセルの太さの、濃い赤色の実線です。色の指定に <code>darkred</code> キーワードを使用していることにご注意ください。</li> + <li>注意として、テキストの色は明示的に設定していません。この場合 {{cssxref("color")}} の値はそれを含んだ最も近い要素から継承されます。すなわち、デフォルトである黒色です。</li> </ul> -<pre class="brush: css">.boxRight { +<pre class="brush: css notranslate">.boxRight { float: right; background-color: hsl(270deg, 50%, 75%); outline: 4px dashed rgb(110, 20, 120); @@ -317,37 +318,41 @@ th { text-shadow: 2px 2px 3px black; }</pre> -<p>Finally, the <code>.boxRight</code> class describes the unique properties of the box that's drawn on the right. It's configured to float the box to the right so that it appears next to the previous box. Then the following colors are established:</p> +<div class="blockIndicator note"> +<p>こちらを Safari で表示しようとしても、正常に表示されません。なぜなら、Safari は <code>text-decoration: underline wavy #88ff88</code> をサポートしていないからです。</p> +</div> + +<p>最後に、<code>.boxRight</code> クラスで右に描画されるボックス固有のプロパティを記述します。これは、先のボックスの隣に表示されるように、ボックスを右に浮かす設定をしています。そして、以下のように色を設定しています。</p> <ul> - <li>The <code>background-color</code> is set using the HSL value specified using <code>hsl(270deg, 50%, 75%)</code>. This is a medium purple color.</li> - <li>The box's <code>outline</code> is used to specify that the box should be enclosed in a four pixel thick dashed line whose color is a somewhat deeper purple (<code>rgb(110, 20, 120)</code>).</li> - <li>The foreground (text) color is specified by setting the {{cssxref("color")}} property to <code>hsl(0deg, 100%, 100%)</code>. This is one of many ways to specify the color white.</li> - <li>We add a green wavy line under the text with {{cssxref("text-decoration")}}.</li> - <li>Finally, a bit of a shadow is added to the text using {{cssxref("text-shadow")}}. Its <code>color</code> parameter is set to <code>black</code>.</li> + <li><code>background-color</code> は <code>hsl(270deg, 50%, 75%)</code> で指定した HSL 値を設定しています。この色は中くらいの紫色です。</li> + <li>ボックスの <code>outline</code> は、 ボックスを太さ 4 ピクセルの破線で囲み、色はやや濃い紫色 (<code>rgb(110, 20, 120)</code>) となるように指定しています。</li> + <li>前景 (テキスト) の色は、{{cssxref("color")}} プロパティを <code>hsl(0deg, 100%, 100%)</code> にすることで指定してあります。これは白色を指定する方法のうちの一つです。</li> + <li>{{cssxref("text-decoration")}} でテキストの下に緑の波線を引いています。</li> + <li>最後に、{{cssxref("text-shadow")}} を使用してテキストに少しだけ影をつけています。この <code>color</code> 引数は <code>black</code> にしています。</li> </ul> <h2 id="Letting_the_user_pick_a_color" name="Letting_the_user_pick_a_color">ユーザーに色を選択させる</h2> -<p>There are many situations in which your web site may need to let the user select a color. Perhaps you have a customizable user interface, or you're implementing a drawing app. Maybe you have editable text and need to let the user choose the text color. Or perhaps your app lets the user assign colors to folders or items. Although historically it's been necessary to implement your own {{interwiki("wikipedia", "color picker")}}, HTML now provides support for browsers to provide one for your use through the {{HTMLElement("input")}} element, by using <code>"color"</code> as the value of its {{htmlattrxref("type", "input")}} attribute.</p> +<p>ウェブサイト上では、ユーザーに色を選択させる必要がある場合があります。カスタマイズ可能なユーザーインターフェースがある場合や、お絵かきアプリを実装している場合などが考えられるでしょう。編集可能なテキストがあってユーザーにテキストの色を選択させる、あるいはアプリでフォルダやアイテムに色を割り当てることができる場合があるかもしれません。古くは、独自の{{interwiki("wikipedia", "カラーピッカー")}}を実装する必要がありましたが、HTML では {{HTMLElement("input")}} 要素を通じて {{htmlattrxref("type", "input")}} 属性の値を <code>"color"</code> にすれば、ブラウザが色選択を提供できるようになりました。</p> -<p>The <code><input></code> element represents a color only in the {{anch("Hexadecimal string notation", "hexadecimal string notation")}} covered above.</p> +<p><code><input></code> 要素は、先で取り上げた {{anch("Hexadecimal string notation", "16進数文字列表記")}} でのみ色を表します。</p> <h3 id="Example_Picking_a_color" name="Example_Picking_a_color">例: 色の選択</h3> -<p>Let's look at a simple example, in which the user can choose a color. As the user adjusts the color, the border around the example changes to reflect the new color. After finishing up and picking the final color, the color picker's value is displayed.</p> +<p>ユーザーが色を選択できる簡単な例を見てみましょう。ユーザーが色を調整すると、サンプルの周囲の境界線が新しい色を反映するように変化します。色を選び終えると、カラーピッカーの値が表示されます。</p> <p>{{EmbedLiveSample("Example_Picking_a_color", 525, 275)}}</p> <div class="note"> -<p>On macOS, you indicate that you've finalized selection of the color by closing the color picker window.</p> +<p>macOS では、カラーピッカーウインドウを閉じると色の選択が完了したことになります。</p> </div> <h4 id="HTML_2">HTML</h4> -<p>The HTML here creates a box that contains a color picker control (with a label created using the {{HTMLElement("label")}} element) and an empty paragraph element ({{HTMLElement("p")}}) into which we'll output some text from our JavaScript code.</p> +<p>この HTML は、({{HTMLElement("label")}} 要素で作成したラベル付きの) カラーピッカーコントロールと、空の段落要素 ({{HTMLElement("p")}}) を含むボックスを作成します。この段落要素に JavaScript コードからテキストを出力する予定です。</p> -<pre class="brush: html"><div id="box"> +<pre class="brush: html notranslate"><div id="box"> <label for="colorPicker">Border color:</label> <input type="color" value="#8888ff" id="colorPicker"> <p id="output"></p> @@ -355,9 +360,9 @@ th { <h4 id="CSS_2">CSS</h4> -<p>The CSS simply establishes a size for the box and some basic styling for appearances. The border is also established with a 2-pixel width and a border color that won't last, courtesy of the JavaScript below...</p> +<p>この CSS では、ボックスのサイズと見た目の基本的なスタイルを設定しています。境界線には 2 ピクセルの幅を設定していますが、色は下記の JavaScript のおかげで変化します。</p> -<pre class="brush: css">#box { +<pre class="brush: css notranslate">#box { width: 500px; height: 200px; border: 2px solid rgb(245, 220, 225); @@ -367,9 +372,9 @@ th { <h4 id="JavaScript">JavaScript</h4> -<p>The script here handles the task of updating the starting color of the border to match the color picker's value. Then two event handlers are added to deal with input from the <code><a href="/ja/docs/Web/HTML/Element/input/color"><input type="color"></a></code> element.</p> +<p>このスクリプトは、境界線の開始色をカラーピッカーの値と同じに更新するタスクを処理します。<code><a href="/ja/docs/Web/HTML/Element/input/color"><input type="color"></a></code> 要素からの入力をハンドルするために、2 つのイベントハンドラを追加しています。</p> -<pre class="brush: js">let colorPicker = document.getElementById("colorPicker"); +<pre class="brush: js notranslate">let colorPicker = document.getElementById("colorPicker"); let box = document.getElementById("box"); let output = document.getElementById("output"); @@ -383,129 +388,129 @@ colorPicker.addEventListener("change", function(event) { output.innerText = "Color set to " + colorPicker.value + "."; }, false);</pre> -<p>The {{event("input")}} event is sent every time the value of the element changes; that is, every time the user adjusts the color in the color picker. Each time this event arrives, we set the box's border color to match the color picker's current value.</p> +<p>この {{event("input")}} イベントは要素の値が変更されるたびに送信されます。このイベントが来るたびに、ボックスの境界線の色をカラーピッカーの現在値に合わせます。</p> -<p>The {{event("change")}} event is received when the color picker's value is finalized. We respond by setting the contents of the <code><p></code> element with the ID <code>"output"</code> to a string describing the finally selected color.</p> +<p>カラーピッカーの値が確定したときに、{{event("change")}} イベントを受信します。ID が <code>"output"</code> の <code><p></code> 要素の内容を、最後に選択した色を表す文字列に設定することで応答します。</p> <h2 id="Using_color_wisely" name="Using_color_wisely">賢く色を使う</h2> -<p>Making the right choices when selecting colors when designing a web site can be a tricky process, especially if you aren't well-grounded in art, design, or at least basic color theory. The wrong color choice can render your site unattractive, or even worse, leave the content unreadable due to problems with contrast or conflicting colors. Worse still, if using the wrong colors can result in your content being outright unusable by people withcertain vision problems, particularly color blindness.</p> +<p>ウェブサイトのデザインで正しい色選びをする際には、芸術、デザイン、少なくとも基本的な色理論に精通していないと、格段に複雑な工程となるでしょう。間違った色の選択は、サイトが醜くなったり、さらに悪いことにコントラストや相反する色の問題でコンテンツが読めなくなってしまうことがあります。また、間違った色を使用してしまうことで、特定の視覚的問題、特に色覚異常を持つ人々がコンテンツを全く利用できなくなる恐れがあります。</p> <h3 id="Finding_the_right_colors" name="Finding_the_right_colors">適切な色を見つける</h3> -<p>Coming up with just the right colors can be tricky, especially without training in art or design. Fortunately, there are tools available that can help you. While they can't replace having a good designer helping you make these decisions, they can definitely get you started.</p> +<p>何らかの芸術やデザインを触れずに、丁度よく正しい色を思い付くことは難しいでしょう。幸いなことに、あなたの手助けになりえる便利なツールがあります。これらは意思決定を助ける良きデザイナーを持つことには代わりませんが、火付け役にはなるでしょう。</p> -<h4 id="Base_color" name="Base_color">ベース色</h4> +<h4 id="Base_color" name="Base_color">ベースカラー</h4> -<p>The first step is to choose your <strong>base color</strong>. This is the color that in some way defines your web site or the subject matter of the site. Just as we associate green with the beverage {{interwiki("wikipedia", "Mountain Dew")}} and one might think of the color blue in relationship with the sky or the ocean, choosing an appropriate base color to represent your site is a good place to start. There are plenty of ways to select a base color; a few ideas include:</p> +<p>最初のステップは、<strong>ベースカラー</strong>を選ぶことです。これは、何らかの形であなたのウェブサイトやサイトの主題を定義する色です。緑がお茶を連想させるように、また青は空や海と関係があるように考えるところから、サイトを表すのに適切なベースカラー選びを始めると良いでしょう。ベースカラーを選ぶ方法はたくさんありますが、以下のようないくつかのアイデアがあります。</p> <ul> - <li>A color that is naturally associated with the topic of your content, such as the existing color identified with a product or idea or a color representative of the emotion you wish to convey.</li> - <li>A color that comes from imagery associated with what your content is about. If you're creating a web site about a given item or product, choose a color that's physically present on that item.</li> - <li>Browse web sites that let you look at lots of existing color palettes and images to find inspiration.</li> + <li>商品やアイデアで識別される既存の色や、伝えたい感情を代表する色など、コンテンツのトピックに自然に関連する色。</li> + <li>コンテンツが表す物に関連付いたイメージから来る色。特定の項目や製品に関するウェブサイトを作成する場合は、それらに物理的に存在する色を選びます。</li> + <li>ウェブサイトを探して既存のカラーパレットや画像をたくさん見ることで、インスピレーションを得ます。</li> </ul> -<p>When trying to decide upon a base color, you may find that browser extensions that let you select colors from web content can be particularly handy. Some of these are even specifically designed to help with this sort of work. For example, the web site <a href="http://www.colorzilla.com/">ColorZilla</a> offers an extension (<a href="http://www.colorzilla.com/chrome">Chrome</a> / <a href="http://www.colorzilla.com/firefox">Firefox</a>) that offers an eyedropper tool for picking colors from the web. It can also take averages of the colors of pixels in various sized areas or even a selected area of the page.</p> +<p>ベースカラーを決める際には、ウェブコンテンツから色を選択できるブラウザ拡張機能が特に便利です。拡張機能の中には、こういった作業を支援するために特別に設計されたものもあります。例えば、ウェブサイトの <a href="http://www.colorzilla.com/">ColorZilla</a> はウェブから色を選ぶためのスポイトツールの拡張機能 (<a href="http://www.colorzilla.com/chrome">Chrome</a> / <a href="http://www.colorzilla.com/firefox">Firefox</a>) を提供しています。また、様々なサイズの領域やページの選択すた領域のピクセルの色の平均を取ることもできます。</p> <div class="note"> -<p>The advantage to averaging colors can be that often what looks like a solid color is actually a surprisingly varied number of related colors all used in concert, blending to create a desired effect. Picking just one of these pixels can result in getting a color that on its own looks very out of place.</p> +<p>色の平均を取る利点は、一見同じ色に見えるものが、実際には驚くほど多様な数の関連色が協調して使用され、目的の効果を生み出すために混色されていることが多いためです。これらのピクセル内から 1 つだけ選んでしまうと、それだけでは非常に場違いな色になることがあります。</p> </div> -<h4 id="Fleshing_out_the_palette" name="Fleshing_out_the_palette">Fleshing out the palette</h4> +<h4 id="Fleshing_out_the_palette" name="Fleshing_out_the_palette">パレットを豊かにする</h4> -<p>Once you have decided on your base color, there are plenty of online tools that can help you build out a palette of appropriate colors to use along with your base color by applying color theory to your base color to determine appropriate added colors. Many of these tools also support viewing the colors filtered so you can see what they would look like to people with various forms of color blindness. See {{anch("Color and accessibility")}} for a brief explanation of why this matters.</p> +<p>ベースカラーが決まれば、ベースカラーに色理論を適用して、ベースカラーと一緒に使用する適切なカラーパレットを構築します。さらなる適切な色の決定に役立つオンラインツールもたくさんあります。これらの多くはフィルターをかけた色表示もサポートしているので、さまざまな色盲の人がどう見えるかを確認できます。これがなぜ重要なのかについては、{{anch("Color and accessibility", "色とアクセシビリティ")}}で簡単に説明しています。</p> -<p>A few examples (all free to use as of the time this list was last revised):</p> +<p>以下はいくつかの例 (このリストが最終改訂された時点では、すべて無料で使用できるもの) です。</p> <ul> - <li><a href="/ja/docs/Web/CSS/CSS_Colors/Color_picker_tool">MDN's color picker tool</a></li> + <li><a href="/ja/docs/Web/CSS/CSS_Colors/Color_picker_tool">MDN のカラーピッカーツール</a></li> <li><a href="http://paletton.com">Paletton</a></li> - <li><a href="https://color.adobe.com/create/color-wheel">Adobe Color CC online color wheel</a></li> + <li><a href="https://color.adobe.com/create/color-wheel">Adobe Color CC オンライン色相環</a></li> </ul> -<p>When designing your palette, be sure to keep in mind that in addition to the colors these tools typically generate, you'll probably also need to add some core neutral colors such as white (or nearly white), black (or nearly black), and some number of shades of gray.</p> +<p>パレットをデザインする際には、これらのツールが典型的に生成する色に加えて、白 (またはほぼ白)、黒 (またはほぼ黒)、グレーの濃淡などの中核となる中性的な色を加える必要があることも念頭に置いてください。</p> <div class="note"> -<p>Usually, you are far better off using the smallest number of colors possible. By using color to accentuate rather than adding color to everything on the page, you keep your content easy to read and the colors you do use have far more impact.</p> +<p>通常は、可能な限り色の数を少なくした方がはるかに良くなります。ページ上の全てに色を加えるのではなく色をアクセントに使うと、内容が読みやすくなり使った色のインパクトが増します。</p> </div> -<h3 id="Color_theory_resources" name="Color_theory_resources">色の理論に関する参考文献</h3> +<h3 id="Color_theory_resources" name="Color_theory_resources">色理論に関する参考文献</h3> -<p>A full review of color theory is beyond the scope of this article, but there are plenty of articles about color theory available, as well as courses you can find at nearby schools and universities. A couple of useful resources about color theory:</p> +<p>色理論の全面的な履修はこの記事の範囲を超えていますが、色理論に関する記事も豊富に用意されており、最寄りの学校や大学にも講座があるでしょうから、ぜひ参考にしてみてください。色理論に関する有用なリソースをいくつかご紹介します。</p> <dl> - <dt><a href="https://www.khanacademy.org/partner-content/pixar/color">Color Science</a> (<a href="https://www.khanacademy.org/">Khan Academy</a> in association with <a href="https://www.pixar.com/">Pixar</a>)</dt> - <dd>An online course which introduces concepts such as what color is, how it's percieved, and how to use colors to express ideas. Presented by Pixar artists and designers.</dd> - <dt>{{interwiki("wikipedia", "Color theory")}} on Wikipedia</dt> - <dd>Wikipedia's entry on color theory, which has a lot of great information from a technical perspective. It's not really a resource for helping you with the color sleection process, but is still full of useful information.</dd> + <dt><a href="https://www.khanacademy.org/partner-content/pixar/color">Color Science</a> (<a href="https://www.khanacademy.org/">カーンアカデミー</a> と <a href="https://www.pixar.com/">ピクサー</a> の共著)</dt> + <dd>色とは何か、色の認識のされ方、色を使ったアイデアの表現方法などの概念を紹介するオンライン講座です。ピクサーのアーティストやデザイナーが講師を務めています。</dd> + <dt>Wikipedia の {{interwiki("wikipedia", "Color theory")}}</dt> + <dd>ウィキペディアの色理論に関する記事で、技術的観点の素晴らしい情報がたくさんあります。色選びの参考にはなりませんが、有用な情報が満載です。</dd> </dl> <h3 id="Color_and_accessibility" name="Color_and_accessibility">色とアクセシビリティ</h3> -<p>There are several ways color can be an {{Glossary("accessibility")}} problem. Improper or careless use of color can result in a web site or app that a percentage of your target audience may not be able to use adequately, resulting in lost traffic, lost business, and possibly even a public relations problem. So it's important to consider your use of color carefully.</p> +<p>色が {{Glossary("accessibility", "アクセシビリティ")}} の問題となることがあります。色の不適切及び不注意な使用は、利用者の何割かが適切に使用できないウェブサイトやアプリになり、トラフィックの損失、ビジネスの損失、さらには広報の問題につながる可能性があります。そのため、色の使い方を慎重に検討することは重要です。</p> -<p>You should do at least basic research into {{interwiki("wikipedia", "color blindness")}}. There are several kinds; the most common is red-green color blindness, which causes people to be unable to differentiate between the colors red and green. There are others, too, ranging from inabilities to tell the difference between certain colors to total inability to see color at all.</p> +<p>少なくとも {{interwiki("wikipedia", "色覚異常")}} についての基礎的な研究はしておいた方が良いでしょう。いくつかの種類がありますが、最も一般的なのは赤緑色覚異常で、赤と緑の色を区別しづらいものです。他にも、特定の色の違いを見分けることができないものから、全く色が見えないものまであります。</p> <div class="note"> -<p>The most important rule: never use color as the only way to know something. If, for example, you indicate success or failure of an operation by changing the color of a shape from white to green for success and red for failure, users with red-green color-blindness won't be able to use your site properly. Instead, perhaps use both text and color together, so that everyone can understand what's happening.</p> +<p>最も重要なルール: 色だけで情報を知る手段を使ってはいけません。例えば、ある操作の成功や失敗を示すために、図形の色を白から緑、失敗を示すために赤に変えた場合、赤緑の色盲のユーザーはサイトを適切に利用できません。代わりにテキストと色を併用すれば、誰もが起こったことを理解できるようになるでしょう。</p> </div> -<p>For more information about color blindness, see the following articles:</p> +<p>色覚異常については、以下の記事をご覧ください。</p> <ul> - <li><a href="https://medlineplus.gov/colorblindness.html">Medline Plus: Color Blindness</a> (United States National Institute of Health)</li> + <li><a href="https://medlineplus.gov/colorblindness.html">Medline Plus: Color Blindness</a> (<span class="module__title__link">アメリカ国立衛生研究所)</span></li> <li><a href="https://www.aao.org/eye-health/diseases/what-is-color-blindness">American Academy of Ophthamology: What Is Color Blindness?</a></li> - <li><a href="https://www.usability.gov/get-involved/blog/2010/02/color-blindness.html">Color Blindness & Web Design</a> (Usability.gov: United States Department of Health and Human Services)</li> + <li><a href="https://www.usability.gov/get-involved/blog/2010/02/color-blindness.html">Color Blindness & Web Design</a> (Usability.gov: アメリカ保健福祉省)</li> </ul> <h3 id="Palette_design_example" name="Palette_design_example">パレットデザインの例</h3> -<p>Let's consider a quick example of selecting an appropriate color palette for a site. Imagine that you're building a web site for a new game that takes place on the planet Mars. So let's do a <a href="https://www.google.com/search?q=Mars&tbm=isch">Google search for photos of Mars</a>. Lots of good examples of Martian coloration there. We carefully avoid the mockups and the photos from movies. And we decide to use a photo taken by one of the Mars landers humanity has parked on the surface over the last few decades, since the game takes place on the planet's surface. We use a color picker tool to select a sample of the color we choose.</p> +<p>サイトの適切なカラーパレットを選ぶにあたって、簡単な例を考えてみましょう。火星で開かれる新しいゲームのウェブサイトを構築すると想像してみてください。そこで、<a href="https://www.google.com/search?q=Mars&tbm=isch">火星の写真を Google 検索</a>してみましょう。火星のカラーリングの良い例がたくさんあるはずです。私たちは慎重にモックアップや映画の写真を避け、火星で撮影された写真を使うことにしました。そして、このゲームは惑星の表面で行われるため、人類が過去数十年にわたって表面に滞在させている火星着陸機の一つが撮影した写真を使用することにしました。カラーピッカーツールを使って、この選んだ色のサンプルを採ります。</p> -<p>Using an eyedropper tool, we identify a color we like and determine that the color in question is <code>#D79C7A</code>, which is an appropriate rusty orange-red color that's so stereotypical of the Martian surface.</p> +<p>スポイトツールを使って好みの色を特定し、件の色は <code>#D79C7A</code> であることを確認しました。これは火星表面のステレオタイプな錆びたオレンジレッドの色です。</p> -<p>Having selected our base color, we need to build out our palette. We decide to use <a href="http://www.paletton.com/">Paletton</a> to come up with the other colors we need. Upon opening Paletton, we see:</p> +<p>ベースカラーを選択したら、パレットを構築する必要があります。そこで、<a href="http://www.paletton.com/">Paletton </a>を使って他の色を考えてみることにしました。Plaetton を開くと、以下のような画面が出てきます。</p> <p><img alt="Right after loading Paletton." src="https://mdn.mozillademos.org/files/15451/paletton1.png" style="height: 361px; width: 600px;"></p> -<p>Next, we enter our color's hex code (<code>D79C7A</code>) into the "Base RGB" box at the bottom-left corner of the tool:</p> +<p>次に、ツールの左下隅にある "Base RGB" の欄に色の 16 進数コード (<code>D79C7A</code>) を入力します。</p> <p><img alt="After entering base color" src="https://mdn.mozillademos.org/files/15453/paletton2.png" style="height: 361px; width: 600px;"></p> -<p>We now see a monochromatic palette based on the color we picked from the Mars photo. If you need a lot of related colors for some reason, those are likely to be good ones. But what we really want is an accent color. Something that will pop along side the base color. To find that, we click the "add complementary" toggle underneath the menu that lets you select the palette type (currently "Monochromatic"). Paletton computes an appropriate accent color; clicking on the accent color down in the bottom-right corner tells us that this color is <code>#508D7C</code>.</p> +<p>火星の写真から選んだ色をベースにした単色パレットが出てきました。何らかの理由で関連色がたくさん必要な場合は、そういった色も良い色になる可能性はあります。しかし、私たちが本当に欲しいのはアクセントカラー、ベースカラーに添えて目立つ色です。これを見つけるには、パレットの種類の選択メニューにある "add complementary" のトグル (現在は "Monochromatic") をクリックします。右下のアクセントカラーをクリックすると、補色が <code>#508D7C</code> であることが計算されます。</p> <p><img alt="Now with complementary colors included." src="https://mdn.mozillademos.org/files/15455/paletton3.png" style="height: 361px; width: 600px;"></p> -<p>If you're unhappy with the color that's proposed to you, you can change the color scheme, to see if you find something you like better. For example, if we don't like the proposed greenish-blue color, we can click the Triad color scheme icon, which presents us with the following:</p> +<p>提案された色が気に入らない場合は、配色を変更して、もっと良さそうな色を確かめることができます。例えば、提案の緑青色が気に入らない場合、トライアド配色のアイコンをクリックすれば以下のように表示されます。</p> <p><img alt="Triad color scheme selected" src="https://mdn.mozillademos.org/files/15457/paletton4.png" style="height: 361px; width: 600px;"></p> -<p>That greyish blue in the top-right looks pretty good. Clicking on it, we find that it's <code>#556E8D</code>. That would be used as the accent color, to be used sparingly to make things stand out, such as in headlines or in the highlighting of tabs or other indicators on the site:</p> +<p>右上のあの灰色っぽい青はなかなか良さそうですね。クリックすると、<code>#556E8D</code> でした。これをアクセントカラーとして、見出しやタブの強調表示のようにものを目立たせる目的で控えめに使用します。</p> <p><img alt="Triad color scheme selected" src="https://mdn.mozillademos.org/files/15459/paletton-color-detail.png" style="height: 370px; width: 526px;"></p> -<p>Now we have our base color and our accent. On top of that, we have a few complementary shades of each, just in case we need them for gradients and the like. The colors can then be exported in a number of formats so you can make use of them.</p> +<p>これで、ベースカラーとアクセントカラーができました。さらに、グラデーションなどが必要な場合に備えて、それぞれの色の補色をいくつか用意します。これらの色を後から利用できるように、何らかの形式で出力しておきます。</p> -<p>Once you have these colors, you will probably still need to select appropriate neutral colors. Common design practice is to try to find the sweet spot where there's just enough contrast that the text is crisp and readable but not enough contrast to become harsh for the eyes. It's easy to go too far in one way or another so be sure to get feedback on your colors once you've selected them and have examples of them in use available. If the contrast is too low, your text will tend to be washed out by the background, leaving it unreadable, but if your contrast is too high, the user may find your site garish and unpleasant to look at.</p> +<p>これらの色を決めてなお、適切な中性的カラーも選択する必要があります。一般的なデザインでは、テキストが鮮明で読みやすい十分なコントラストがありつつ、目に厳しいほどのコントラストではないというスイートスポットを見つけようとします。どちらかの方に行き過ぎてしまいがちなので、色を選んで使用例に着手したら、必ずフィードバックをもらうようにしましょう。コントラストが低すぎるとテキストが背景に洗い流されて読めなくなりがちです。またコントラストが高すぎると、ユーザーはサイトを見ているだけで、見栄えが悪く不愉快に感じるでしょう。</p> -<h3 id="Color_backgrounds_contrast_and_printing">Color, backgrounds, contrast, and printing</h3> +<h3 id="色、背景、コントラスト、印刷">色、背景、コントラスト、印刷</h3> -<p>What looks good on screen may look very different on paper. In addition, ink can be expensive, and if a user is printing your page, they don't necessarily need all the backgrounds and such using up their precious ink when all that matters is the text itself. Most browsers, by default, remove background images when printing documents.</p> +<p>画面上では良いように見えるものが、紙の上では全く違って見えるかもしれません。さらに、往々にしてインクは高価なものです。ユーザーがページを印刷している場合、重要なのはテキストであるにも関わらず、背景すべてが貴重なインクを使い切るわけにはいきません。ほとんどのブラウザはデフォルトで、ドキュメント印刷時に背景画像を除きます。</p> -<p>If your background colors and images have been selected carefully and/or are crucial to the usefulness of the content, you can use the CSS {{cssxref("color-adjust")}} property to tell the browser that it should not make adjustments to the appearance of content.</p> +<p>背景色や画像が慎重に選択されている場合や、背景がコンテンツの有用性に決定的な影響を与える場合、CSS {{cssxref("color-adjust")}} プロパティを使用して、コンテンツの外観を調整しないようにブラウザに指示できます。</p> -<p>The default value of <code>color-adjust</code>, <code>economy</code>, indicates that the browser is allowed to make appearance changes as it deems necessary in order to try to optimize the legibility and/or print economy of the content, given the type of output device the document is being drawn onto.</p> +<p><code>color-adjust</code>、<code>economy</code> のデフォルト値は、ブラウザが必要に応じて外観を変更することができるかどうかを示します。ブラウザはドキュメントを描画する出力デバイスの種類に応じて、コンテンツの読みやすさや印刷の経済効率を最適化しようとします。</p> -<p>You can set <code>color-adjust</code> to <code>exact</code> to tell the browser that the element or elements on which you use it have been designed specifically to best work with the colors and images left as they are. With this set, the browser won't tamper with the appearance of the element, and will draw it as indicated by your CSS.</p> +<p><code>color-adjust</code> を <code>exact</code> にすると、色や画像があった場合でも、それを使用することで適した動作の要素になる特別なデザインであることを、ブラウザに伝えられます。これを設定すると、ブラウザは要素の外観に手を加えることなく、CSS で指定された通りに要素を描画します。</p> <div class="note"> -<p><strong>Note:</strong> There is no guarantee, though, that <code>color-adjust: exact</code> will result in your CSS being used exactly as given. If the browser provides user preferences to change the output (such as a "don't print backgrounds" checkbox in a print dialog box), that overrides the value of <code>color-adjust</code>.</p> +<p><strong>注意:</strong> <code>color-adjust: exact</code> を与えても CSS がその通りに使用されるとは限りません。ブラウザ出力を変更するユーザー設定 (印刷ダイアログボックスの「背景をプリントしない」チェックボックスなど) が提供されている場合、<code>color-adjust</code> の値はそれによって上書きされます。</p> </div> <h2 id="See_also" name="See_also">関連情報</h2> <ul> - <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing graphics</a></li> - <li><a href="/ja/docs/Web/Guide/Graphics">Graphics on the web</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Colors/Color_picker_tool">MDN's color picker tool</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">グラフィックの描画</a></li> + <li><a href="/ja/docs/Web/Guide/Graphics">ウェブのグラフィック</a></li> + <li><a href="/ja/docs/Web/CSS/CSS_Colors/Color_picker_tool">MDN のカラーピッカーツール</a></li> </ul> |