From d54b0e0f0a7aa80f4bb20fbdab8ee03a381c4ea2 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 15 Oct 2021 01:38:00 +0900 Subject: .html を .md に改名 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/outline-color/index.html | 136 ------------------------------ files/ja/web/css/outline-color/index.md | 136 ++++++++++++++++++++++++++++++ 2 files changed, 136 insertions(+), 136 deletions(-) delete mode 100644 files/ja/web/css/outline-color/index.html create mode 100644 files/ja/web/css/outline-color/index.md (limited to 'files/ja/web/css/outline-color') diff --git a/files/ja/web/css/outline-color/index.html b/files/ja/web/css/outline-color/index.html deleted file mode 100644 index 0fbdf74dfe..0000000000 --- a/files/ja/web/css/outline-color/index.html +++ /dev/null @@ -1,136 +0,0 @@ ---- -title: outline-color -slug: Web/CSS/outline-color -tags: - - CSS - - CSS Outline - - CSS Property - - CSS User Interace - - HTML Colors - - HTML Styles - - Outline - - Reference - - Styles - - Styling HTML - - outline-color - - 'recipe:css-property' -translation_of: Web/CSS/outline-color ---- -
{{CSSRef}}
- -

outline-color は CSS のプロパティで、要素の輪郭線の色を設定します。

- -
{{EmbedInteractiveExample("pages/css/outline-color.html")}}
- - - -

構文

- -
/* <color> 値 */
-outline-color: #f92525;
-outline-color: rgb(30,222,121);
-outline-color: blue;
-
-/* キーワード値 */
-outline-color: invert;
-
-/* グローバル値 */
-outline-color: inherit;
-outline-color: initial;
-outline-color: unset;
-
- -

outline-color プロパティは、以下に挙げた値のうちの一つで指定します。

- -

値

- -
-
{{cssxref("<color>")}}
-
輪郭線の色で、 <color> で指定します。
-
invert
-
輪郭線が見えるように、背景色を反転させます。なお、ブラウザーがこの値に対応することは必須ではありません。対応しない場合は、このキーワードは無効とみなされます。
-
- -

解説

- -

輪郭線は要素の周囲、 {{cssxref("border")}} の外側に描かれる線です。要素の境界線とは異なり、輪郭線は要素の枠の外側に描かれ、他のコンテンツと重複することがあります。一方、境界線はページのレイアウトに実際に影響を与え、他のどの要素とも (明示的に重複させない限り) 重複しないように合わせます。

- -

輪郭線の表示方法を定義する際は、一括指定プロパティの {{cssxref("outline")}} を使用したほうが普通は便利です。

- -

アクセシビリティの考慮

- -

独自のフォーカススタイルを作成するときに、ふつう {{cssxref("outline")}} プロパティを調整します。輪郭線の色を変更するのであれば、輪郭線と、それが配置される部分の背景のコントラスト比が、弱視の人でも知覚できるよう高くなっているか確認することが重要です。

- -

色のコントラスト比は、テキスト及び背景色の明度の値を比較することで決定されます。現在のウェブコンテンツアクセシビリティガイドライン (Web Content Accessibility Guidelines, WCAG) によれば、文字列コンテンツで 4.5:1 以上、見出しのような大きめの文字列で 3:1 以上のコントラスト比が求められています。大きめの文字列とは、太字ならば 18.66px 以上、または 24px 以上と定義されています。

- - - -

公式定義

- -

{{cssinfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

青い実線の輪郭線の設定

- -

HTML

- -
<p>見ての通り、輪郭線は青です。</p>
- -

CSS

- -
p {
-  outline: 2px solid;      /* 輪郭線の幅と種類 */
-  outline-color: #0000FF;  /* 輪郭線を青にする */
-  margin: 5px;
-}
- -

結果

- -

{{ EmbedLiveSample('Setting_a_solid_blue_outline') }}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Basic UI', '#outline-color', 'outline-color')}}{{Spec2('CSS3 Basic UI')}}変更なし。
{{SpecName('CSS2.1', 'ui.html#propdef-outline-color', 'outline-color')}}{{Spec2('CSS2.1')}}初回定義
- -

ブラウザーの互換性

- -
-

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

-
- -

関連情報

- - diff --git a/files/ja/web/css/outline-color/index.md b/files/ja/web/css/outline-color/index.md new file mode 100644 index 0000000000..0fbdf74dfe --- /dev/null +++ b/files/ja/web/css/outline-color/index.md @@ -0,0 +1,136 @@ +--- +title: outline-color +slug: Web/CSS/outline-color +tags: + - CSS + - CSS Outline + - CSS Property + - CSS User Interace + - HTML Colors + - HTML Styles + - Outline + - Reference + - Styles + - Styling HTML + - outline-color + - 'recipe:css-property' +translation_of: Web/CSS/outline-color +--- +
{{CSSRef}}
+ +

outline-color は CSS のプロパティで、要素の輪郭線の色を設定します。

+ +
{{EmbedInteractiveExample("pages/css/outline-color.html")}}
+ + + +

構文

+ +
/* <color> 値 */
+outline-color: #f92525;
+outline-color: rgb(30,222,121);
+outline-color: blue;
+
+/* キーワード値 */
+outline-color: invert;
+
+/* グローバル値 */
+outline-color: inherit;
+outline-color: initial;
+outline-color: unset;
+
+ +

outline-color プロパティは、以下に挙げた値のうちの一つで指定します。

+ +

値

+ +
+
{{cssxref("<color>")}}
+
輪郭線の色で、 <color> で指定します。
+
invert
+
輪郭線が見えるように、背景色を反転させます。なお、ブラウザーがこの値に対応することは必須ではありません。対応しない場合は、このキーワードは無効とみなされます。
+
+ +

解説

+ +

輪郭線は要素の周囲、 {{cssxref("border")}} の外側に描かれる線です。要素の境界線とは異なり、輪郭線は要素の枠の外側に描かれ、他のコンテンツと重複することがあります。一方、境界線はページのレイアウトに実際に影響を与え、他のどの要素とも (明示的に重複させない限り) 重複しないように合わせます。

+ +

輪郭線の表示方法を定義する際は、一括指定プロパティの {{cssxref("outline")}} を使用したほうが普通は便利です。

+ +

アクセシビリティの考慮

+ +

独自のフォーカススタイルを作成するときに、ふつう {{cssxref("outline")}} プロパティを調整します。輪郭線の色を変更するのであれば、輪郭線と、それが配置される部分の背景のコントラスト比が、弱視の人でも知覚できるよう高くなっているか確認することが重要です。

+ +

色のコントラスト比は、テキスト及び背景色の明度の値を比較することで決定されます。現在のウェブコンテンツアクセシビリティガイドライン (Web Content Accessibility Guidelines, WCAG) によれば、文字列コンテンツで 4.5:1 以上、見出しのような大きめの文字列で 3:1 以上のコントラスト比が求められています。大きめの文字列とは、太字ならば 18.66px 以上、または 24px 以上と定義されています。

+ + + +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

青い実線の輪郭線の設定

+ +

HTML

+ +
<p>見ての通り、輪郭線は青です。</p>
+ +

CSS

+ +
p {
+  outline: 2px solid;      /* 輪郭線の幅と種類 */
+  outline-color: #0000FF;  /* 輪郭線を青にする */
+  margin: 5px;
+}
+ +

結果

+ +

{{ EmbedLiveSample('Setting_a_solid_blue_outline') }}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Basic UI', '#outline-color', 'outline-color')}}{{Spec2('CSS3 Basic UI')}}変更なし。
{{SpecName('CSS2.1', 'ui.html#propdef-outline-color', 'outline-color')}}{{Spec2('CSS2.1')}}初回定義
+ +

ブラウザーの互換性

+ +
+

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

+
+ +

関連情報

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