From f1fb98fc3f8d40a86cb6be0e185d0ba5a2b6eefa Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 30 Oct 2021 01:13:42 +0900 Subject: CSS Color モジュールの文書を変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/color-adjust/index.html | 123 ------------------------------- files/ja/web/css/color-adjust/index.md | 123 +++++++++++++++++++++++++++++++ 2 files changed, 123 insertions(+), 123 deletions(-) delete mode 100644 files/ja/web/css/color-adjust/index.html create mode 100644 files/ja/web/css/color-adjust/index.md (limited to 'files/ja/web/css/color-adjust') diff --git a/files/ja/web/css/color-adjust/index.html b/files/ja/web/css/color-adjust/index.html deleted file mode 100644 index bbc74dba8d..0000000000 --- a/files/ja/web/css/color-adjust/index.html +++ /dev/null @@ -1,123 +0,0 @@ ---- -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 ---- -
{{CSSRef}}
- -

color-adjust は CSS のプロパティで、{{Glossary("user agent", "ユーザーエージェント")}}が出力端末への要素の表示方法を最適化するために何をするかをウェブ作者が制御することができるものです。既定では、ブラウザーは出力端末の種類と機能を考慮して、要素の外観を必要に応じて慎重に調整することが許可されています。

- -

構文

- -
color-adjust: economy;
-color-adjust: exact;
- -

color-adjust プロパティの値は、以下のキーワードのうちの一つでなければなりません。

- -

値

- -
-
economy
-
ユーザーエージェントは、それがレンダリングされているデバイスのために出力を最適化するために、適切かつ慎重に要素に調整を加えることが許されています。例えば、印刷するときに、ブラウザは背景画像をすべて削除して、白い紙で読むときにコントラストが最適化されるようにテキストの色を調整することを選ぶかもしれません。これがデフォルトです。
-
exact
-
要素の内容は、ブラウザによって変更されると、実際には良くなるどころか悪くなるかもしれないような、思慮深い重要な方法で色や画像やスタイルを使用するように、特別に慎重に作られています。コンテンツの外観は、ユーザーの要求がない限り変更されるべきではありません。例えば、あるページでは、背景色が白と薄い灰色の間で交互に変化する行を持つ情報のリストが含まれているかもしれません。背景色を削除すると、コンテンツの読みやすさが低下します。
-
- -

使用上の注意

- -

ブラウザーが指定された外観から逸脱したいと思う理由はいくつかあります。

- - - -

ユーザーが色や画像の使用を制御するためにユーザーエージェントが提供しているオプションは、 color-adjust の値よりも優先されます。言い換えれば、 color-adjust が何かをするという保証はありません。ユーザーが動作を上書きすることができるだけでなく、各ユーザエージェントは、与えられた状況で color-adjust をどのように扱うかをそれ自身で決定することが許されています。

- -

公式定義

- -

{{cssinfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

低コントラストの維持

- -

この例では、黒の背景色の上に {{cssxref("background-image")}} と半透明の {{cssxref("linear-gradient()")}} 関数を使用して、中程度の赤のテキストの後ろに濃い青のグラデーションを持つボックスが表示されています。理由はどうあれ、これは紙の上を含めたあらゆるレンダリング環境で望ましい外観ですので、 color-adjust: exact を使用して、レンダリング時にボックスの色やスタイルを調整しないように指示します。

- -

CSS

- -
.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;
-}
-
- -

HTML

- -
<div class="my-box">
-  <p>Need more contrast!</p>
-</div>
- -

結果

- -

{{EmbedLiveSample("Preserving_low_contrast", 640, 120)}}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS Color Adjust', '#propdef-color-adjust', 'color-adjust')}}{{Spec2('CSS Color Adjust')}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.properties.color-adjust")}}

- -

関連情報

- - diff --git a/files/ja/web/css/color-adjust/index.md b/files/ja/web/css/color-adjust/index.md new file mode 100644 index 0000000000..bbc74dba8d --- /dev/null +++ b/files/ja/web/css/color-adjust/index.md @@ -0,0 +1,123 @@ +--- +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 +--- +
{{CSSRef}}
+ +

color-adjust は CSS のプロパティで、{{Glossary("user agent", "ユーザーエージェント")}}が出力端末への要素の表示方法を最適化するために何をするかをウェブ作者が制御することができるものです。既定では、ブラウザーは出力端末の種類と機能を考慮して、要素の外観を必要に応じて慎重に調整することが許可されています。

+ +

構文

+ +
color-adjust: economy;
+color-adjust: exact;
+ +

color-adjust プロパティの値は、以下のキーワードのうちの一つでなければなりません。

+ +

値

+ +
+
economy
+
ユーザーエージェントは、それがレンダリングされているデバイスのために出力を最適化するために、適切かつ慎重に要素に調整を加えることが許されています。例えば、印刷するときに、ブラウザは背景画像をすべて削除して、白い紙で読むときにコントラストが最適化されるようにテキストの色を調整することを選ぶかもしれません。これがデフォルトです。
+
exact
+
要素の内容は、ブラウザによって変更されると、実際には良くなるどころか悪くなるかもしれないような、思慮深い重要な方法で色や画像やスタイルを使用するように、特別に慎重に作られています。コンテンツの外観は、ユーザーの要求がない限り変更されるべきではありません。例えば、あるページでは、背景色が白と薄い灰色の間で交互に変化する行を持つ情報のリストが含まれているかもしれません。背景色を削除すると、コンテンツの読みやすさが低下します。
+
+ +

使用上の注意

+ +

ブラウザーが指定された外観から逸脱したいと思う理由はいくつかあります。

+ + + +

ユーザーが色や画像の使用を制御するためにユーザーエージェントが提供しているオプションは、 color-adjust の値よりも優先されます。言い換えれば、 color-adjust が何かをするという保証はありません。ユーザーが動作を上書きすることができるだけでなく、各ユーザエージェントは、与えられた状況で color-adjust をどのように扱うかをそれ自身で決定することが許されています。

+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

低コントラストの維持

+ +

この例では、黒の背景色の上に {{cssxref("background-image")}} と半透明の {{cssxref("linear-gradient()")}} 関数を使用して、中程度の赤のテキストの後ろに濃い青のグラデーションを持つボックスが表示されています。理由はどうあれ、これは紙の上を含めたあらゆるレンダリング環境で望ましい外観ですので、 color-adjust: exact を使用して、レンダリング時にボックスの色やスタイルを調整しないように指示します。

+ +

CSS

+ +
.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;
+}
+
+ +

HTML

+ +
<div class="my-box">
+  <p>Need more contrast!</p>
+</div>
+ +

結果

+ +

{{EmbedLiveSample("Preserving_low_contrast", 640, 120)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS Color Adjust', '#propdef-color-adjust', 'color-adjust')}}{{Spec2('CSS Color Adjust')}}初回定義
+ +

ブラウザーの互換性

+ +

{{Compat("css.properties.color-adjust")}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf