initial commit

1 files changed, 125 insertions, 0 deletions

diff --git a/files/ja/web/css/color-adjust/index.html b/files/ja/web/css/color-adjust/index.html
new file mode 100644
index 0000000000..a6eac63a08
--- /dev/null
+++ b/files/ja/web/css/color-adjust/index.html
@@ -0,0 +1,125 @@
+---
+title: color-adjust
+slug: Web/CSS/color-adjust
+tags:
+  - Adjusting Colors
+  - CSS
+  - CSS Colors
+  - CSS Property
+  - HTML Colors
+  - HTML Styles
+  - Layout
+  - Non-standard
+  - Reference
+  - Styling HTML
+  - Styling text
+  - Web
+  - color-adjust
+  - 'recipe:css-property'
+translation_of: Web/CSS/color-adjust
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>color-adjust</code></strong> は CSS のプロパティで、{{Glossary("user agent", "ユーザーエージェント")}}が出力端末への要素の表示方法を最適化するために何をするかをウェブ作者が制御することができるものです。</span>既定では、ブラウザーは出力端末の種類と機能を考慮して、要素の外観を必要に応じて慎重に調整することが許可されています。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css no-line-numbers notranslate">color-adjust: economy;
+color-adjust: exact;</pre>
+
+<p><code>color-adjust</code> プロパティの値は、以下のキーワードのうちの一つでなければなりません。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>economy</code></dt>
+ <dd>ユーザーエージェントは、それがレンダリングされているデバイスのために出力を最適化するために、適切かつ慎重に要素に調整を加えることが許されています。例えば、印刷するときに、ブラウザは背景画像をすべて削除して、白い紙で読むときにコントラストが最適化されるようにテキストの色を調整することを選ぶかもしれません。これがデフォルトです。</dd>
+ <dt><code>exact</code></dt>
+ <dd>要素の内容は、ブラウザによって変更されると、実際には良くなるどころか悪くなるかもしれないような、思慮深い重要な方法で色や画像やスタイルを使用するように、特別に慎重に作られています。コンテンツの外観は、ユーザーの要求がない限り変更されるべきではありません。例えば、あるページでは、背景色が白と薄い灰色の間で交互に変化する行を持つ情報のリストが含まれているかもしれません。背景色を削除すると、コンテンツの読みやすさが低下します。</dd>
+</dl>
+
+<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2>
+
+<p>ブラウザーが指定された外観から逸脱したいと思う理由はいくつかあります。</p>
+
+<ul>
+ <li>コンテンツがテキストや背景色を使用しているため、出力機器上では読みやすさの点で似たような色になってしまう。</li>
+ <li>出力デバイスがプリンターの場合、インクを節約するために、暗い背景画像や非常に濃い背景画像が削除されることがあります。</li>
+ <li>ページを印刷するとき、ブラウザは、暗い背景の明るい色のテキストを、白い背景の濃いテキストに置き換えることを望むかもしれません。</li>
+</ul>
+
+<p>ユーザーが色や画像の使用を制御するためにユーザーエージェントが提供しているおぷh損は、 <code>color-adjust</code> の値よりも優先されます。言い換えれば、 <code>color-adjust</code> が何かをするという保証はありません。ユーザーが動作を上書きすることができるだけでなく、各ユーザエージェントは、与えられた状況で <code>color-adjust</code> をどのように扱うかをそれ自身で決定することが許されています。</p>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Preserving_low_contrast" name="Preserving_low_contrast">低コントラストの維持</h3>
+
+<p>この例では、黒の背景色の上に {{cssxref("background-image")}} と半透明の {{cssxref("linear-gradient()")}} 関数を使用して、中程度の赤のテキストの後ろに濃い青のグラデーションを持つボックスが表示されています。理由はどうあれ、これは紙の上を含めたあらゆるレンダリング環境で望ましい外観ですので、 <code>color-adjust: exact</code> を使用して、レンダリング時にボックスの色やスタイルを調整しないように指示します。</p>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">.my-box {
+  background-color: black;
+  background-image: linear-gradient(rgba(0, 0, 180, 0.5), rgba(70, 140, 220, 0.5));
+  color: #900;
+  width: 15rem;
+  height: 6rem;
+  text-align: center;
+  font: 24px "Helvetica", sans-serif;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color-adjust: exact;
+}
+</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div class="my-box"&gt;
+  &lt;p&gt;Need more contrast!&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample("Preserving_low_contrast", 640, 120)}}</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('CSS Color Adjust', '#propdef-color-adjust', 'color-adjust')}}</td>
+   <td>{{Spec2('CSS Color Adjust')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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("css.properties.color-adjust")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/HTML/Applying_color">CSS を使った HTML の要素への色の適用</a></li>
+ <li>その他の色に関するプロパティ: {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, and {{cssxref("column-rule-color")}}</li>
+ <li>{{cssxref("background-image")}}</li>
+</ul>