blob: 52d08d04d742ac6a00c98308efd4d03de27e64ed (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
|
---
title: outline
slug: Web/CSS/outline
tags:
- CSS
- CSS プロパティ
- CSS 基本ユーザーインターフェイス
- CSS 輪郭線
- Layout
- Reference
- レイアウト
translation_of: Web/CSS/outline
---
<div>{{CSSRef}}</div>
<p><strong><code>outline</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、輪郭線 (outline) に関する様々なプロパティ ({{cssxref("outline-style")}}, {{cssxref("outline-width")}}, {{cssxref("outline-color")}}) を単一の宣言で設定するための<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定</a>です。</p>
<div>{{EmbedInteractiveExample("pages/css/outline.html")}}</div>
<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
<p>他の一括指定プロパティと同様に、省略された値は<a href="/ja/docs/Web/CSS/initial_value">初期値</a>に設定されます。</p>
<h3 id="Borders_vs._outlines" name="Borders_vs._outlines">境界線と輪郭線</h3>
<p><a href="/ja/docs/Web/CSS/border">境界線</a>と輪郭線はとても似ています。しかし、輪郭線は以下の点で境界線とは異なります。</p>
<ul>
<li>輪郭線は領域を占有せず、要素のコンテンツの外側に描かれます。</li>
<li>仕様によれば、輪郭線は矩形である必要はありませんが、ふつうは矩形です。</li>
</ul>
<h2 id="Syntax" name="Syntax">構文</h2>
<pre class="brush: css no-line-numbers notranslate">/* 種類 */
outline: solid;
/* 色 | 種類 */
outline: #f66 dashed;
/* 種類 | 幅 */
outline: inset thick;
/* 色 | 種類 | 幅 */
outline: green solid 3px;
/* グローバル値 */
outline: inherit;
outline: initial;
outline: unset;
</pre>
<p><code>outline</code> プロパティは以下に挙げた値のうち1～3つの値で指定します。値は順不同です。</p>
<div class="note">
<p><strong>メモ:</strong> 多くの要素では、スタイルが定義されていないと輪郭線は表示されません。これは style の既定値が <code>none</code> だからです。特筆すべき例外は <code>input</code> 要素で、ブラウザーが既定のスタイルを与えます。</p>
</div>
<h3 id="Values_2" name="Values_2">値</h3>
<dl>
<dt><code><'outline-color'></code></dt>
<dd>輪郭線の色を設定します。未指定の場合の既定値は <code>currentcolor</code> です。 {{cssxref("outline-color")}} を参照してください。</dd>
<dt><code><'outline-style'></code></dt>
<dd>輪郭線の種類を設定します。未指定の場合の既定値は <code>none</code> です。 {{cssxref("outline-style")}} を参照してください。</dd>
<dt><code><'outline-width'></code></dt>
<dd>輪郭線の太さを設定します。未指定の場合の既定値は <code>medium</code> です。 {{cssxref("outline-width")}} を参照してください。</dd>
</dl>
<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
{{csssyntax}}
<h2 id="Example" name="Example">例</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html notranslate"><a href="#">このリンクは特殊なフォーカスのスタイルです。</a>
</pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css notranslate">a {
border: 1px solid;
border-radius: 3px;
display: inline-block;
margin: 10px;
padding: 5px;
}
a:focus {
outline: 4px dotted #e73;
outline-offset: 4px;
background: #ffa;
}
</pre>
<h3 id="Result" name="Result">結果</h3>
<p>{{EmbedLiveSample("Example", "100%", 60)}}</p>
<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2>
<p><code>outline</code> の値を <code>0</code> または <code>none</code> にすると、ブラウザーの既定のフォーカス表示を削除します。要素が操作できるものであれば、視覚的なフォーカス表示が必要です。既定のフォーカス表示を削除するのであれば、目に見える分かりやすいフォーカスのスタイル付けを提供してください。</p>
<ul>
<li><a href="https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/">How to Design Useful and Usable Focus Indicators</a></li>
<li>
<p><abbr>WCAG</abbr> 2.1: <a href="https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html">成功基準 2.4.7 の理解: フォーカスの可視性</a></p>
</li>
</ul>
<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('CSS3 Basic UI', '#outline', 'outline')}}</td>
<td>{{Spec2('CSS3 Basic UI')}}</td>
<td>変更なし。</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'ui.html#propdef-outline', 'outline')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>初回定義</td>
</tr>
</tbody>
</table>
<div>{{cssinfo}}</div>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
<div>
<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.outline")}}</p>
</div>
|
