diff options
Diffstat (limited to 'files/ja/web/css/outline/index.html')
| -rw-r--r-- | files/ja/web/css/outline/index.html | 145 |
1 files changed, 145 insertions, 0 deletions
diff --git a/files/ja/web/css/outline/index.html b/files/ja/web/css/outline/index.html new file mode 100644 index 0000000000..8d5b0c20e9 --- /dev/null +++ b/files/ja/web/css/outline/index.html @@ -0,0 +1,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> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<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> |