diff options
Diffstat (limited to 'files/ja/web/css')
17 files changed, 91 insertions, 103 deletions
diff --git a/files/ja/web/css/css_flow_layout/index.html b/files/ja/web/css/css_flow_layout/index.html index a16c0cbd4f..3021ce3f4a 100644 --- a/files/ja/web/css/css_flow_layout/index.html +++ b/files/ja/web/css/css_flow_layout/index.html @@ -43,7 +43,7 @@ translation_of: Web/CSS/CSS_Flow_Layout <li>{{Glossary("Block/CSS", "ブロック (CSS)")}}</li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li> diff --git a/files/ja/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html b/files/ja/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html index b6a71891c9..118bc26766 100644 --- a/files/ja/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html +++ b/files/ja/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html @@ -554,7 +554,7 @@ dd { <p>It may be that you come up with your own use cases for auto-placement or any other part of grid layout. If you do, raise them as issues or add to an existing issue that could solve your use case. This will help to make future versions of the specification better.</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li> diff --git a/files/ja/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html b/files/ja/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html index 0037394932..667917d069 100644 --- a/files/ja/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html +++ b/files/ja/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html @@ -664,7 +664,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <h2 id="Subnav">Subnav</h2> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li> diff --git a/files/ja/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html b/files/ja/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html index 536a0e931a..3f83a21dbd 100644 --- a/files/ja/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html +++ b/files/ja/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html @@ -648,7 +648,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout <p><code>margin-right</code> または <code>margin-left</code> で自動マージンを使用した場合、および <code>top</code> 、<code>right</code> 、<code>bottom</code> 、<code>left</code> を使って位置を絶対指定した場合、書字方向が尊重されません。次のガイドでは、CSS グリッドレイアウト・ボックス配置と書字方向の間における相互作用を見ていきます。複数の言語で表示するサイトを開発したり、言語や書字方向を混ぜたサイトをデザインするなら、非常に役立つでしょう。</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li> diff --git a/files/ja/web/css/css_grid_layout/index.html b/files/ja/web/css/css_grid_layout/index.html index 77237096cf..59e1592ef5 100644 --- a/files/ja/web/css/css_grid_layout/index.html +++ b/files/ja/web/css/css_grid_layout/index.html @@ -206,7 +206,7 @@ translation_of: Web/CSS/CSS_Grid_Layout <h2 id="Subnav">Subnav</h2> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li> diff --git a/files/ja/web/css/css_grid_layout/layout_using_named_grid_lines/index.html b/files/ja/web/css/css_grid_layout/layout_using_named_grid_lines/index.html index 6358de6b22..5f67402f98 100644 --- a/files/ja/web/css/css_grid_layout/layout_using_named_grid_lines/index.html +++ b/files/ja/web/css/css_grid_layout/layout_using_named_grid_lines/index.html @@ -436,7 +436,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines <p>That’s all I need. I don’t need to do any calculations, grid automatically removed my 10 pixel gutter track before assigning the space to the <code>1fr</code> column tracks. As you start to build out your own layouts, you will find that the syntax becomes more familiar and you choose the ways that work best for you and the type of projects you like to build. Try building some common patterns with these various methods, and you will soon find your most productive way to work. Then, in the next guide we will look at how grid can position items for us - without us needing to use placement properties at all!</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li> diff --git a/files/ja/web/css/css_grid_layout/relationship_of_grid_layout/index.html b/files/ja/web/css/css_grid_layout/relationship_of_grid_layout/index.html index 2650339665..476cf929bf 100644 --- a/files/ja/web/css/css_grid_layout/relationship_of_grid_layout/index.html +++ b/files/ja/web/css/css_grid_layout/relationship_of_grid_layout/index.html @@ -574,7 +574,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout <li><a href="/ja/docs/Web/CSS/CSS_Columns">段組みレイアウトガイド</a></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li> diff --git a/files/ja/web/css/grid-column-start/index.html b/files/ja/web/css/grid-column-start/index.html index 851c96552c..cf2f596e8d 100644 --- a/files/ja/web/css/grid-column-start/index.html +++ b/files/ja/web/css/grid-column-start/index.html @@ -181,7 +181,7 @@ grid-column-start: unset; <li>動画チュートリアル: <em><a href="http://gridbyexample.com/video/series-line-based-placement/">行ベースの配置</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li> diff --git a/files/ja/web/css/grid-column/index.html b/files/ja/web/css/grid-column/index.html index 8f96c2f915..3a6f29ac1d 100644 --- a/files/ja/web/css/grid-column/index.html +++ b/files/ja/web/css/grid-column/index.html @@ -132,7 +132,7 @@ translation_of: Web/CSS/grid-column <li>動画チュートリアル: <em><a href="http://gridbyexample.com/video/series-line-based-placement/">行ベースの配置</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li> diff --git a/files/ja/web/css/grid-row/index.html b/files/ja/web/css/grid-row/index.html index 5ec045442a..7531bbfdec 100644 --- a/files/ja/web/css/grid-row/index.html +++ b/files/ja/web/css/grid-row/index.html @@ -149,7 +149,7 @@ grid-row: unset; <li>動画チュートリアル: <em><a href="http://gridbyexample.com/video/series-line-based-placement/">行ベースの配置</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> diff --git a/files/ja/web/css/grid-template-areas/index.html b/files/ja/web/css/grid-template-areas/index.html index ab3aa7b42a..f753d8596d 100644 --- a/files/ja/web/css/grid-template-areas/index.html +++ b/files/ja/web/css/grid-template-areas/index.html @@ -126,7 +126,7 @@ grid-template-areas: unset; <li>動画チュートリアル: <em><a href="http://gridbyexample.com/video/grid-template-areas/">Grid Template Areas</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li> diff --git a/files/ja/web/css/grid-template-columns/index.html b/files/ja/web/css/grid-template-columns/index.html index 8dd5cc65cc..d0b5627b94 100644 --- a/files/ja/web/css/grid-template-columns/index.html +++ b/files/ja/web/css/grid-template-columns/index.html @@ -158,7 +158,7 @@ grid-template-columns: unset; <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Subgrid">Subgrid</a></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li> diff --git a/files/ja/web/css/grid-template/index.html b/files/ja/web/css/grid-template/index.html index 7108c8f12b..c80fd2a006 100644 --- a/files/ja/web/css/grid-template/index.html +++ b/files/ja/web/css/grid-template/index.html @@ -152,7 +152,7 @@ footer { <li>動画チュートリアル:<em> <a href="http://gridbyexample.com/video/grid-template-shorthand/">Grid Template shorthand</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li> diff --git a/files/ja/web/css/grid/index.html b/files/ja/web/css/grid/index.html index f952fbd25d..6b5a8f0d1f 100644 --- a/files/ja/web/css/grid/index.html +++ b/files/ja/web/css/grid/index.html @@ -140,7 +140,7 @@ grid: unset; <li>グリッドレイアウトガイド: <em><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas#Grid_definition_shorthands">グリッドテンプレート領域 - グリッド定義の一括指定</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li> diff --git a/files/ja/web/css/minmax()/index.html b/files/ja/web/css/minmax()/index.html index 9ab7b88e97..ca68c8d134 100644 --- a/files/ja/web/css/minmax()/index.html +++ b/files/ja/web/css/minmax()/index.html @@ -156,7 +156,7 @@ minmax(auto, 300px) </li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li> diff --git a/files/ja/web/css/text-decoration-color/index.html b/files/ja/web/css/text-decoration-color/index.html index 7b0322e9d0..f41da12a5c 100644 --- a/files/ja/web/css/text-decoration-color/index.html +++ b/files/ja/web/css/text-decoration-color/index.html @@ -3,14 +3,18 @@ title: text-decoration-color slug: Web/CSS/text-decoration-color tags: - CSS - - CSS テキスト - - CSS テキスト装飾 - - CSS プロパティ - - HTML スタイル - - HTML 色 + - CSS Property + - CSS Text + - CSS Text Decoration + - HTML Colors + - HTML Styles - Reference - - text-decoration-color - - 色 + - Styling HTML + - Styling text + - color + - colors + - 'recipe:css-property' +browser-compat: css.properties.text-decoration-color translation_of: Web/CSS/text-decoration-color --- <div>{{ CSSRef }}</div> @@ -21,14 +25,13 @@ translation_of: Web/CSS/text-decoration-color <div>{{EmbedInteractiveExample("pages/css/text-decoration-color.html")}}</div> -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> <p>CSS はそれぞれの線種ごとに固有の色を指定する仕組みを直接は持っていません。しかしながら、この効果は要素を入れ子にして、それぞれの要素毎に ({{cssxref("text-decoration-line")}} プロパティで) 異なる線種を適用し、 (code>text-decoration-color で) 線の色を指定することで実現できます。</p> -<h2 id="Syntax" name="Syntax">構文</h2> +<h2 id="Syntax">構文</h2> <pre class="brush:css no-line-numbers">/* <color> 値 */ -text-decoration-color: currentColor; +text-decoration-color: currentcolor; text-decoration-color: red; text-decoration-color: #00ff00; text-decoration-color: rgba(255, 128, 128, 0.5); @@ -37,21 +40,40 @@ text-decoration-color: transparent; /* グローバル値 */ text-decoration-color: inherit; text-decoration-color: initial; +text-decoration-color: revert; text-decoration-color: unset; </pre> -<h3 id="Values" name="Values">値</h3> +<h3 id="Values">値</h3> <dl> - <dt>{{cssxref("<color>")}}</dt> - <dd>装飾線の色です。</dd> + <dt>{{cssxref("<color>")}}</dt> + <dd>装飾線の色です。</dd> </dl> -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +<h2 id="Accessibility_concerns">アクセシビリティの考慮</h2> + +<p>テキストの色、テキストが置かれている背景、テキストの装飾線の間のコントラスト比が、弱視の人がページの内容を読むことができるように十分に高いことを確認ことが重要です。色のコントラスト比は、テキストと背景の色の輝度を比較して決定されます。</p> + +<p>色だけで意味を伝えるべきではありません。例えば、テキストの色と text-decoration-color の変更だけでは、リンクにフォーカスがあることを示すのに十分ではありません。</p> + +<ul> + <li><a href="https://webaim.org/resources/contrastchecker/">WebAIM: Color Contrast Checker</a></li> + <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN "WCAG を理解する ― ガイドライン 1.4 の解説"</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h2 id="Formal_definition">公式定義</h2> + +<p>{{CSSInfo}}</p> + +<h3 id="Formal_syntax">形式文法</h3> {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +<h2 id="Examples">例</h2> + +<h3 id="Basic_example">基本的な例</h3> <pre class="brush: html"><p>This paragraph has <s>some erroneous text</s> inside it that I want to call attention to.</p></pre> @@ -62,51 +84,22 @@ text-decoration-color: unset; } s { - text-decoration-line: <code>line-through</code>; + text-decoration-line: line-through; text-decoration-color: red; text-decoration-style: wavy; }</pre> <p>{{ EmbedLiveSample('Examples') }}</p> -<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2> - -<p>テキストの色、テキストが置かれている背景、テキストの装飾線の間のコントラスト比が、弱視の人がページの内容を読むことができるように十分に高いことを確認ことが重要です。色のコントラスト比は、テキストと背景の色の輝度を比較して決定されます。</p> - -<p>色だけで意味を伝えるべきではありません。例えば、テキストの色と text-decoration-color の変更だけでは、リンクにフォーカスがあることを示すのに十分ではありません。</p> - -<ul> - <li><a href="https://webaim.org/resources/contrastchecker/">WebAIM: Color Contrast Checker</a></li> - <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN "WCAG を理解する ― ガイドライン 1.4 の解説"</a></li> - <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></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 Text Decoration', '#text-decoration-color-property', 'text-decoration-color') }}</td> - <td>{{ Spec2('CSS3 Text Decoration') }}</td> - <td>初回定義。 {{cssxref("text-decoration")}} プロパティが複数の関連するプロパティを定義する一括指定になりました。</td> - </tr> - </tbody> -</table> +<h2 id="Specifications">仕様書</h2> -<p>{{cssinfo}}</p> +{{Specifications}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> -<p>{{Compat("css.properties.text-decoration-color")}}</p> +<p>{{Compat}}</p> -<h2 id="See_also" name="See_also">関連情報</h2> +<h2 id="See_also">関連情報</h2> <ul> <li>複数の行内装飾プロパティを一度に設定するときは、代わりに一括指定の {{cssxref("text-decoration")}} プロパティを使った方が便利かもしれません。</li> diff --git a/files/ja/web/css/text-emphasis/index.html b/files/ja/web/css/text-emphasis/index.html index 8d838fe112..6d0ae6bf2c 100644 --- a/files/ja/web/css/text-emphasis/index.html +++ b/files/ja/web/css/text-emphasis/index.html @@ -14,21 +14,28 @@ translation_of: Web/CSS/text-emphasis --- <div>{{CSSRef}}</div> -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>text-emphasis</code></strong> プロパティは、 (空白や制御文字を除く) テキストに圏点を適用します。これは {{cssxref("text-emphasis-style")}} と {{cssxref("text-emphasis-color")}} の<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定</a>です。</p> +<p><strong><code>text-emphasis</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、 (空白や制御文字を除く) テキストに圏点を適用します。これは {{cssxref("text-emphasis-style")}} と {{cssxref("text-emphasis-color")}} の<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定</a>です。</p> <div>{{EmbedInteractiveExample("pages/css/text-emphasis.html")}}</div> -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> - <p><code>text-emphasis</code> プロパティは、 {{cssxref("text-decoration")}} とは大きく異なります。 <code>text-decoration</code> プロパティは継承されず、指定される装飾は要素全体にわたって適用されます。しかし、 <code>text-emphasis</code> は継承されます。これは、子孫に対して圏点を変更できることを意味します。</p> -<p>圏点の大きさは、ルビと同様にフォントの大きさの約50%であり、 <code>text-emphasis</code> は現在の行間隔が圏点を表示するのに十分でない場合、行の高さに影響を与えることがあります。</p> +<p>圏点の大きさは、ルビと同様にフォントの大きさの約 50% であり、 <code>text-emphasis</code> は現在の行間隔が圏点を表示するのに十分でない場合、行の高さに影響を与えることがあります。</p> <div class="note"> -<p><code>text-emphasis</code> は、 {{cssxref("text-emphasis-position")}} の値をリセットしません。これは、圏点のスタイルと色がテキストで異なる場合に、圏点の位置を要求することがほとんど見込まれないためです。稀にこれを必要とする場合は、プロパティ {{cssxref("text-emphasis-position")}} を使用してください。</p> +<p><code>text-emphasis</code> は、 {{cssxref("text-emphasis-position")}} の値をリセットしません。これは、圏点のスタイルと色がテキストで異なる場合に、圏点の位置を要求することがほとんど見込まれないためです。これを必要とするような珍しい場合は、プロパティ {{cssxref("text-emphasis-position")}} を使用してください。</p> </div> -<h2 id="Syntax" name="Syntax">構文</h2> +<h2 id="Constituent_properties">構成要素のプロパティ</h2> + +<p>このプロパティは以下のプロパティの一括指定です。</p> + +<ul> + <li><a href="/ja/docs/Web/CSS/text-emphasis-color"><code>text-emphasis-color</code></a></li> + <li><a href="/ja/docs/Web/CSS/text-emphasis-style"><code>text-emphasis-style</code></a></li> +</ul> + +<h2 id="Syntax">構文</h2> <pre class="brush:css no-line-numbers">/* 初期値 */ text-emphasis: none; /* 圏点なし */ @@ -38,7 +45,7 @@ text-emphasis: 'x'; text-emphasis: '点'; text-emphasis: '\25B2'; text-emphasis: '*' #555; -text-emphasis: 'foo'; /* 使用するべきではない。計算されるか 'f' のみが表示される */ +text-emphasis: 'foo'; /* 使用するべきではない。 'f' のみとして計算や表示が行われる */ /* キーワード値 */ text-emphasis: filled; @@ -52,18 +59,19 @@ text-emphasis: filled sesame #555; /* グローバル値 */ text-emphasis: inherit; text-emphasis: initial; +text-emphasis: revert; text-emphasis: unset; </pre> -<h3 id="Values" name="Values">値</h3> +<h3 id="Values">値</h3> <dl> <dt><code>none</code></dt> <dd>圏点なし。</dd> <dt><code>filled</code></dt> - <dd>図形は単色で塗りつぶされます。 <code>filled</code> も <code>open</code> も指定されない場合は、これが既定値です。</dd> + <dd>図形が単色で塗りつぶされます。 <code>filled</code> も <code>open</code> も指定されない場合は、これが既定値です。</dd> <dt><code>open</code></dt> - <dd>図形は中抜きになります。</dd> + <dd>図形が中抜きになります。</dd> <dt><code>dot</code></dt> <dd>記号として小さな円を表示します。 filled dot は <code>'•'</code> (<code>U+2022</code>)、 open dot は <code>'◦'</code> (<code>U+25E6</code>) です。</dd> <dt><code>circle</code></dt> @@ -75,18 +83,22 @@ text-emphasis: unset; <dt><code>sesame</code></dt> <dd>記号としてゴマを表示します。 filled sesame は <code>'﹅'</code> (<code>U+FE45</code>)、 open sesame は<code>'﹆'</code> (<code>U+FE46</code>) です。これは、他の図形が与えられていない場合、縦書きモードで既定の形状です。</dd> <dt><code><string></code></dt> - <dd>記号として文字列を表示します。 <code><string></code> には1<em>文字</em>を超える文字列を指定しないでください。ユーザーエージェントは、1つより多い書記素クラスターから構成される文字列を短縮したり無視したりする可能性があります。</dd> + <dd>記号として文字列を表示します。 <code><string></code> には 1 <em>文字</em>を超える文字列を指定しないでください。ユーザーエージェントは、 1 つより多い書記素クラスターから構成される文字列を短縮したり無視したりする可能性があります。</dd> <dt><code><color></code></dt> - <dd>記号の色を定義します。 color を指定しない場合、既定では <code>currentColor</code> です。</dd> + <dd>記号の色を定義します。 color を指定しない場合、既定では <code>currentcolor</code> です。</dd> </dl> -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +<h2 id="Formal_definition">公式定義</h2> + +<p>{{CSSInfo}}</p> + +<h2 id="Formal_syntax">形式文法</h2> {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +<h2 id="Examples">例</h2> -<h3 id="A_heading_with_emphasis_shape_and_color" name="A_heading_with_emphasis_shape_and_color">強調して色を付けた見出し</h3> +<h3 id="A_heading_with_emphasis_shape_and_color">強調して色を付けた見出し</h3> <p>この例は、見出しの各文字に三角形の圏点を付けて描画します。</p> @@ -100,36 +112,19 @@ text-emphasis: unset; <pre class="brush: html"><h2>これは重要です！</h2></pre> -<h4 id="Result" name="Result">結果</h4> +<h4 id="Result">結果</h4> <p>{{EmbedLiveSample("A_heading_with_emphasis_shape_and_color", 500, 70)}}</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('CSS3 Text Decoration', '#text-emphasis-property', 'text-emphasis')}}</td> - <td>{{Spec2('CSS3 Text Decoration')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> +<h2 id="Specifications">仕様書</h2> -<p>{{cssinfo}}</p> +{{Specifications}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> -<p>{{Compat("css.properties.text-emphasis")}}</p> +<p>{{Compat}}</p> -<h2 id="See_also" name="See_also">関連情報</h2> +<h2 id="See_also">関連情報</h2> <ul> <li>個別指定プロパティ: {{cssxref('text-emphasis-style')}}, {{cssxref('text-emphasis-color')}}</li> |