diff options
| -rw-r--r-- | files/ja/web/css/text-decoration-color/index.md | 82 | ||||
| -rw-r--r-- | files/ja/web/css/text-decoration-line/index.md | 105 | ||||
| -rw-r--r-- | files/ja/web/css/text-decoration-skip-ink/index.md | 110 | ||||
| -rw-r--r-- | files/ja/web/css/text-decoration-style/index.md | 124 | ||||
| -rw-r--r-- | files/ja/web/css/text-decoration-thickness/index.md | 104 | ||||
| -rw-r--r-- | files/ja/web/css/text-decoration/index.md | 161 | ||||
| -rw-r--r-- | files/ja/web/css/text-emphasis-color/index.md | 78 | ||||
| -rw-r--r-- | files/ja/web/css/text-emphasis-position/index.md | 195 | ||||
| -rw-r--r-- | files/ja/web/css/text-emphasis-style/index.md | 129 | ||||
| -rw-r--r-- | files/ja/web/css/text-emphasis/index.md | 138 | ||||
| -rw-r--r-- | files/ja/web/css/text-shadow/index.md | 158 | ||||
| -rw-r--r-- | files/ja/web/css/text-underline-position/index.md | 133 |
12 files changed, 784 insertions, 733 deletions
diff --git a/files/ja/web/css/text-decoration-color/index.md b/files/ja/web/css/text-decoration-color/index.md index f41da12a5c..23fe1ab726 100644 --- a/files/ja/web/css/text-decoration-color/index.md +++ b/files/ja/web/css/text-decoration-color/index.md @@ -13,24 +13,24 @@ tags: - Styling text - color - colors - - 'recipe:css-property' + - recipe:css-property browser-compat: css.properties.text-decoration-color translation_of: Web/CSS/text-decoration-color --- -<div>{{ CSSRef }}</div> +{{ CSSRef }} -<p><strong><code>text-decoration-color</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、 {{ cssxref("text-decoration-line") }} でテキストに追加された装飾の色を設定します。</p> +**`text-decoration-color`** は [CSS](/ja/docs/Web/CSS) のプロパティで、{{ cssxref("text-decoration-line") }} でテキストに追加された装飾の色を設定します。 -<p>色はプロパティ値のスコープにある装飾、すなわち下線、上線、打消し線、それにスペルミスに印をつけるために使われるような波線などに適用されます。</p> +色はプロパティ値のスコープにある装飾、すなわち下線、上線、打消し線、それにスペルミスに印をつけるために使われるような波線などに適用されます。 -<div>{{EmbedInteractiveExample("pages/css/text-decoration-color.html")}}</div> +{{EmbedInteractiveExample("pages/css/text-decoration-color.html")}} +CSS はそれぞれの線種ごとに固有の色を指定する仕組みを直接は持っていません。しかしながら、この効果は要素を入れ子にして、それぞれの要素毎に ({{cssxref("text-decoration-line")}} プロパティで) 異なる線種を適用し、 (`text-decoration-color` で) 線の色を指定することで実現できます。 -<p>CSS はそれぞれの線種ごとに固有の色を指定する仕組みを直接は持っていません。しかしながら、この効果は要素を入れ子にして、それぞれの要素毎に ({{cssxref("text-decoration-line")}} プロパティで) 異なる線種を適用し、 (code>text-decoration-color で) 線の色を指定することで実現できます。</p> +## 構文 -<h2 id="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers">/* <color> 値 */ +```css +/* <color> 値 */ text-decoration-color: currentcolor; text-decoration-color: red; text-decoration-color: #00ff00; @@ -42,43 +42,42 @@ text-decoration-color: inherit; text-decoration-color: initial; text-decoration-color: revert; text-decoration-color: unset; -</pre> +``` -<h3 id="Values">値</h3> +### 値 -<dl> - <dt>{{cssxref("<color>")}}</dt> - <dd>装飾線の色です。</dd> -</dl> +- {{cssxref("<color>")}} + - : 装飾線の色です。 -<h2 id="Accessibility_concerns">アクセシビリティの考慮</h2> +## アクセシビリティの考慮 -<p>テキストの色、テキストが置かれている背景、テキストの装飾線の間のコントラスト比が、弱視の人がページの内容を読むことができるように十分に高いことを確認ことが重要です。色のコントラスト比は、テキストと背景の色の輝度を比較して決定されます。</p> +テキストの色、テキストが置かれている背景、テキストの装飾線の間のコントラスト比が、弱視の人がページの内容を読むことができるように十分に高いことを確認ことが重要です。色のコントラスト比は、テキストと背景の色の輝度を比較して決定されます。 -<p>色だけで意味を伝えるべきではありません。例えば、テキストの色と text-decoration-color の変更だけでは、リンクにフォーカスがあることを示すのに十分ではありません。</p> +色だけで意味を伝えるべきではありません。例えば、テキストの色と text-decoration-color の変更だけでは、リンクにフォーカスがあることを示すのに十分ではありません。 -<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> +- [WebAIM: Color Contrast Checker](https://webaim.org/resources/contrastchecker/) +- [MDN "WCAG を理解する ― ガイドライン 1.4 の解説"](/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) +- [Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html) -<h2 id="Formal_definition">公式定義</h2> +## 公式定義 -<p>{{CSSInfo}}</p> +{{CSSInfo}} -<h3 id="Formal_syntax">形式文法</h3> +## 形式文法 {{csssyntax}} <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> +```html +<p>This paragraph has <s>some erroneous text</s> + inside it that I want to call attention to.</p> +``` -<pre class="brush: css">p { +```css +p { text-decoration-line: underline; text-decoration-color: cyan; } @@ -87,23 +86,22 @@ s { text-decoration-line: line-through; text-decoration-color: red; text-decoration-style: wavy; -}</pre> +} +``` -<p>{{ EmbedLiveSample('Examples') }}</p> +{{ EmbedLiveSample('Examples') }} -<h2 id="Specifications">仕様書</h2> +## 仕様書 {{Specifications}} -<h2 id="Browser_compatibility">ブラウザーの互換性</h2> +## ブラウザーの互換性 -<p>{{Compat}}</p> +{{Compat}} -<h2 id="See_also">関連情報</h2> +## 関連情報 -<ul> - <li>複数の行内装飾プロパティを一度に設定するときは、代わりに一括指定の {{cssxref("text-decoration")}} プロパティを使った方が便利かもしれません。</li> - <li>{{cssxref("<color>")}} データ型</li> - <li>色に関する他のプロパティ: {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, {{cssxref("column-rule-color")}}</li> - <li><a href="/ja/docs/Web/HTML/Applying_color">CSS を使用した HTML 要素への色の適用</a></li> -</ul> +- 複数の行内装飾プロパティを一度に設定するときは、代わりに一括指定の {{cssxref("text-decoration")}} プロパティを使った方が便利かもしれません。 +- {{cssxref("<color>")}} データ型 +- 色に関する他のプロパティ: {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, {{cssxref("column-rule-color")}} +- [CSS を使用した HTML 要素への色の適用](/ja/docs/Web/HTML/Applying_color) diff --git a/files/ja/web/css/text-decoration-line/index.md b/files/ja/web/css/text-decoration-line/index.md index b64e8c68c1..37387415f4 100644 --- a/files/ja/web/css/text-decoration-line/index.md +++ b/files/ja/web/css/text-decoration-line/index.md @@ -3,24 +3,25 @@ title: text-decoration-line slug: Web/CSS/text-decoration-line tags: - CSS - - CSS テキスト装飾 - CSS プロパティ + - CSS テキスト装飾 - Reference + - recipe:css-property +browser-compat: css.properties.text-decoration-line translation_of: Web/CSS/text-decoration-line --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>text-decoration-line</code></strong> プロパティは、下線や上線など、要素内の文字列に使われる装飾の種類を設定します。</p> +**`text-decoration-line`** は [CSS](/ja/docs/Web/CSS) のプロパティで、下線や上線など、要素内の文字列に使われる装飾の種類を設定します。 -<div>{{EmbedInteractiveExample("pages/css/text-decoration-line.html")}}</div> +{{EmbedInteractiveExample("pages/css/text-decoration-line.html")}} -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> +複数の line-decoration に関するプロパティを一度に設定するときは、代わりに一括指定の {{cssxref("text-decoration")}} プロパティを使用したほうが便利かもしれません。 -<p>複数の line-decoration に関するプロパティを一度に設定するときは、代わりに一括指定の {{cssxref("text-decoration")}} プロパティを使用したほうが便利かもしれません。</p> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers">/* 単一のキーワード */ +```css +/* 単一のキーワード */ text-decoration-line: none; text-decoration-line: underline; text-decoration-line: overline; @@ -28,42 +29,50 @@ text-decoration-line: line-through; text-decoration-line: blink; /* 複数のキーワード */ -text-decoration-line: underline overline; /* 2つの装飾線 */ +text-decoration-line: underline overline; /* 2 つの装飾線 */ text-decoration-line: overline underline line-through; /* 複数の装飾線 */ /* グローバル値 */ text-decoration-line: inherit; text-decoration-line: initial; +text-decoration-line: revert; text-decoration-line: unset; -</pre> +``` + +`text-decoration-line` プロパティは `none` または以下のリストにある **1 つ以上の**空白で区切られた値を指定します。 -<p><code>text-decoration-line</code> プロパティは <code>none</code> または以下のリストにある<strong>1つ以上の</strong>空白で区切られた値を指定します。</p> +### 値 -<h3 id="Values" name="Values">値</h3> +- `none` + - : テキストの装飾を行いません。 +- `underline` + - : テキストの各行に下線を引きます。 +- `overline` + - : テキストの各行の上線を引きます。 +- `line-through` + - : テキストの各行の中央を貫く線を引きます。 +- `blink` {{deprecated_inline}} + - : テキストが点滅します (表示と非表示を交互に繰り返します)。準拠するユーザーエージェントはテキストを点滅させないかもしれません。この値は**非推奨**であり、 [CSS アニメーション](/ja/docs/Web/CSS/animation)に取って代わりました。 -<dl> - <dt><code>none</code></dt> - <dd>テキストの装飾を行いません。</dd> - <dt><code>underline</code></dt> - <dd>テキストの各行に下線を引きます。</dd> - <dt><code>overline</code></dt> - <dd>テキストの各行の上線を引きます。</dd> - <dt><code>line-through</code></dt> - <dd>テキストの各行の中央を貫く線を引きます。</dd> - <dt><code>blink</code> {{deprecated_inline}}</dt> - <dd>テキストが点滅します (表示と非表示を交互に繰り返します)。準拠するユーザーエージェントはテキストを点滅させないかもしれません。この値は<strong>非推奨</strong>であり、 <a href="/ja/docs/Web/CSS/animation">CSS アニメーション</a>に取って代わりました。</dd> -</dl> +## 公式定義 -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +{{CSSInfo}} + +## 形式文法 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +<h2 id="Examples">例</h2> + +### 基本的な例 -<pre class="brush: html"><p class="wavy">Here's some text with wavy red underline!</p> -<p class="both">This text has lines both above and below it.</p></pre> +```html +<p class="wavy">こちらのテキストには赤い波線の下線が付いています。</p> +<p class="both">このテキストには上線と下線がついています。</p> +``` -<pre class="brush: css">.wavy { +```css +.wavy { text-decoration-line: underline; text-decoration-style: wavy; text-decoration-color: red; @@ -71,37 +80,19 @@ text-decoration-line: unset; .both { text-decoration-line: underline overline; -}</pre> - -<p>{{ EmbedLiveSample('Examples', '', '', '') }}</p> +} +``` -<h2 id="Specifications" name="Specifications">仕様書</h2> +{{ EmbedLiveSample('Examples', '', '', '') }} -<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-line', 'text-decoration-line')}}</td> - <td>{{Spec2('CSS3 Text Decoration')}}</td> - <td>初回定義。 {{cssxref("text-decoration")}} プロパティが複数の関連するプロパティを定義する一括指定になりました。</td> - </tr> - </tbody> -</table> +## 仕様書 -<p>{{cssinfo}}</p> +{{Specifications}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> +## ブラウザーの互換性 -<p>{{Compat("css.properties.text-decoration-line")}}</p> +{{Compat}} -<h2 id="See_also" name="See_also">関連情報</h2> +## 関連情報 -<ul> - <li>複数の行内装飾プロパティを一度に設定するときは、代わりに一括指定の {{cssxref("text-decoration")}} プロパティを使った方が便利かもしれません。</li> -</ul> +- 複数の行内装飾プロパティを一度に設定するときは、代わりに一括指定の {{cssxref("text-decoration")}} プロパティを使った方が便利かもしれません。 diff --git a/files/ja/web/css/text-decoration-skip-ink/index.md b/files/ja/web/css/text-decoration-skip-ink/index.md index 587f6629c7..26a2734684 100644 --- a/files/ja/web/css/text-decoration-skip-ink/index.md +++ b/files/ja/web/css/text-decoration-skip-ink/index.md @@ -3,29 +3,29 @@ title: text-decoration-skip-ink slug: Web/CSS/text-decoration-skip-ink tags: - CSS - - CSS テキスト装飾 - CSS プロパティ + - CSS テキスト装飾 - Experimental + - レイアウト - Reference - Web + - recipe:css-property - text-decoration-skip-ink - - ウェブ - - レイアウト +browser-compat: css.properties.text-decoration-skip-ink translation_of: Web/CSS/text-decoration-skip-ink --- -<div>{{CSSRef}}</div> - -<p><span class="seoSummary"><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>text-decoration-skip-ink</code></strong> プロパティは、上線や下線が文字のアセンダーやディセンダーを通過するときにどのように引くのかを指定します。</span></p> +{{CSSRef}} -<div>{{EmbedInteractiveExample("pages/css/text-decoration-skip-ink.html")}}</div> +[CSS](/ja/docs/Web/CSS) の **`text-decoration-skip-ink`** プロパティは、上線や下線が文字のアセンダーやディセンダーを通過するときにどのように引くのかを指定します。 -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> +{{EmbedInteractiveExample("pages/css/text-decoration-skip-ink.html")}} -<p><code>text-decoration-skip-ink</code> は {{cssxref("text-decoration")}} 一括指定の一部ではありません。</p> +`text-decoration-skip-ink` は {{cssxref("text-decoration")}} 一括指定の一部ではありません。 -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 -<pre class="brush:css no-line-numbers">/* 単一キーワード */ +```css +/* 単一キーワード */ text-decoration-skip-ink: none; text-decoration-skip-ink: auto; text-decoration-skip-ink: all; @@ -33,38 +33,45 @@ text-decoration-skip-ink: all; /* グローバルキーワード */ text-decoration-skip: inherit; text-decoration-skip: initial; +text-decoration-skip-ink: revert; text-decoration-skip: unset; -</pre> +``` -<h3 id="Values" name="Values">値</h3> +### 値 -<dl> - <dt><code>none</code></dt> - <dd>下線と上線は、アセンダーとディセンダーの部分を含め、テキストコンテンツの全体に渡って引かれます。</dd> - <dt><code>auto</code></dt> - <dd>既定値です。 — ブラウザーは、下線と上線が文字に触れたり近づいたりしないよう、中断を行う<em>可能性があります</em>。つまり、線が文字を横切ろうとするところで中断されます。</dd> - <dt><code>all</code></dt> - <dd>ブラウザーは、下線や上線が文字に触れたり近づいたりしないように<em>必ず</em>中断を行います。これは、 <code>auto</code> の動作が中断を発生させない可能性がある中国語、日本語、韓国語の特定のフォントで有用です。</dd> - <dd><img alt='"text-decoration-skip-ink" の例' src="https://mdn.mozillademos.org/files/13464/decoration-skip-ink.png"></dd> -</dl> +- `none` + - : 下線と上線は、アセンダーとディセンダーの部分を含め、テキストコンテンツの全体に渡って引かれます。 +- `auto` + - : 既定値です。 — ブラウザーは、下線と上線が文字に触れたり近づいたりしないよう、中断を行う*可能性があります*。つまり、線が文字を横切ろうとするところで中断されます。 +- `all` -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> + - : ブラウザーは、下線や上線が文字に触れたり近づいたりしないように*必ず*中断を行います。これは、 `auto` の動作が中断を発生させない可能性がある中国語、日本語、韓国語の特定のフォントで有用です。 + +  + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +<h2 id="Examples">例</h2> -<h3 id="HTML">HTML</h3> +### HTML -<pre class="brush: html"><p>You should go on a quest for a cup of coffee.</p> -<p class="no-skip-ink">Or maybe you'd prefer some tea?</p> -<p>この文は、 text-decoration-skip-ink: auto の使用例を示しています。</p> -<p class="skip-ink-all">この文は、 text-decoration-skip-ink: all の使用例を示しています。</p> -</pre> +```html +<p>You should go on a quest for a cup of coffee.</p> +<p class="no-skip-ink">Or maybe you'd prefer some tea?</p> +<p>この文は、 text-decoration-skip-ink: auto の使用例を示しています。</p> +<p class="skip-ink-all">この文は、 text-decoration-skip-ink: all の使用例を示しています。</p> +``` -<h3 id="CSS">CSS</h3> +### CSS -<pre class="brush: css; highlight[4]">p { +```css +p { font-size: 1.5em; text-decoration: underline blue; text-decoration-skip-ink: auto; /* this is the default anyway */ @@ -77,40 +84,21 @@ text-decoration-skip: unset; .skip-ink-all{ text-decoration-skip-ink: all; } -</pre> - -<h3 id="Result" name="Result">結果</h3> +``` -<p>{{EmbedLiveSample("Examples", "100%", 250)}}</p> +### Result -<h2 id="Specifications" name="Specifications">仕様書</h2> +{{EmbedLiveSample("Examples", "100%", 250)}} -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS4 Text Decoration", "#text-decoration-skip-ink-property", "text-decoration-skip-ink")}}</td> - <td>{{Spec2("CSS4 Text Decoration")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> +## 仕様書 -<p>{{cssinfo}}</p> +{{Specifications}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +## ブラウザーの互換性 -<p>{{Compat("css.properties.text-decoration-skip-ink")}}</p> +{{Compat}} -<h2 id="See_Also" name="See_Also">関連情報</h2> +## 関連情報 -<ul> - <li>{{cssxref('text-decoration')}}</li> - <li>{{cssxref('text-decoration-skip')}}</li> -</ul> +- {{cssxref('text-decoration')}} +- {{cssxref('text-decoration-skip')}} diff --git a/files/ja/web/css/text-decoration-style/index.md b/files/ja/web/css/text-decoration-style/index.md index 76e20dd2f2..c57688cb8f 100644 --- a/files/ja/web/css/text-decoration-style/index.md +++ b/files/ja/web/css/text-decoration-style/index.md @@ -3,28 +3,28 @@ title: text-decoration-style slug: Web/CSS/text-decoration-style tags: - CSS - - CSS テキスト装飾 - CSS プロパティ - - Layout - - Reference + - CSS テキスト装飾 - レイアウト + - Reference + - recipe:css-property +browser-compat: css.properties.text-decoration-style translation_of: Web/CSS/text-decoration-style --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>text-decoration-style</code></strong> プロパティは、 {{ cssxref("text-decoration-line") }} で指定された線の種類を設定します。線の種類はすべての線に適用され <code>text-decoration-line</code> で定義された線ごとに異なる種類を定義する方法はありません。</p> +[CSS](/ja/docs/Web/CSS) の **`text-decoration-style`** プロパティは、 {{ cssxref("text-decoration-line") }} で指定された線の種類を設定します。線の種類はすべての線に適用され `text-decoration-line` で定義された線ごとに異なる種類を定義する方法はありません。 -<div>{{EmbedInteractiveExample("pages/css/text-decoration-style.html")}}</div> +{{EmbedInteractiveExample("pages/css/text-decoration-style.html")}} -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> +文字列を貫く線で文字列が削除されたことを示すように、指定された装飾が特定の意味を持つ場合は、 {{ HTMLElement("del") }} や {{ HTMLElement("s") }} といった HTML タグでその意味を示すことが推奨されます。ブラウザーはスタイルを無効にする場合がありますが、そのようなときでも意味論上の意味が失われません。 -<p>文字列を貫く線で文字列が削除されたことを示すように、指定された装飾が特定の意味を持つ場合は、 {{HTMLElement("del")}} や {{HTMLElement("s")}} といった HTML タグでその意味を示すことが推奨されます。ブラウザーはスタイルを無効にする場合がありますが、そのようなときでも意味論上の意味が失われません。</p> +線の装飾に関する複数のプロパティを一度に設定するときは、代わりに一括指定の {{cssxref("text-decoration")}} プロパティを使用したほうが便利かもしれません。 -<p>線の装飾に関する複数のプロパティを一度に設定するときは、代わりに一括指定の {{cssxref("text-decoration")}} プロパティを使用したほうが便利かもしれません。</p> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush: css">/* キーワード値 */ +```css +/* キーワード値 */ text-decoration-style: solid; text-decoration-style: double; text-decoration-style: dotted; @@ -34,80 +34,76 @@ text-decoration-style: wavy; /* グローバル値 */ text-decoration-style: inherit; text-decoration-style: initial; +text-decoration-style: revert; text-decoration-style: unset; -</pre> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt>solid</dt> - <dd>単独線を描画します。</dd> - <dt>double</dt> - <dd>二重線を描画します。</dd> - <dt>dotted</dt> - <dd>点線を描画します。</dd> - <dt>dashed</dt> - <dd>破線を描画します。</dd> - <dt>wavy</dt> - <dd>波線を描画します。</dd> - <dt>-moz-none{{ non-standard_inline }}</dt> - <dd>線を描画しません。代わりに {{ cssxref("text-decoration-line") }}<code>: none</code> を使用してください。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +``` + +### 値 + +- solid + - : 単独線を描画します。 +- double + - : 二重線を描画します。 +- dotted + - : 点線を描画します。 +- dashed + - : 破線を描画します。 +- wavy + - : 波線を描画します。 +- \-moz-none{{ non-standard_inline }} + - : 線を描画しません。代わりに {{ cssxref("text-decoration-line") }}`: none` を使用してください。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## Examples + +<h3 id="Setting_a_wavy_underline">波線の下線を設定</h3> -<pre class="brush: css" class="hidden">.example { +```css +.example { -moz-text-decoration-line: underline; -moz-text-decoration-style: wavy; -moz-text-decoration-color: red; -webkit-text-decoration-line: underline; -webkit-text-decoration-style: wavy; -webkit-text-decoration-color: red; -}</pre> +} +``` + +#### CSS -<pre class="brush: css">.wavy { +```css +.wavy { text-decoration-line: underline; text-decoration-style: wavy; text-decoration-color: red; } -</pre> +``` + +#### HTML -<pre class="brush: html"><p class="wavy">This text has a wavy red line beneath it.</p> -</pre> +```html +<p class="wavy">このテキストには付近に赤い波線があります。</p> +``` -<p>{{ EmbedLiveSample('Examples', '', '', '') }}</p> +#### Results -<h2 id="Specifications" name="Specifications">仕様書</h2> +{{ EmbedLiveSample('Setting_a_wavy_underline', '', '', '') }} -<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-style', 'text-decoration-style') }}</td> - <td>{{ Spec2('CSS3 Text Decoration') }}</td> - <td>初回定義。 {{cssxref("text-decoration")}} プロパティが複数の関連するプロパティを定義するための一括指定になりました。</td> - </tr> - </tbody> -</table> +## 仕様書 -<p>{{cssinfo}}</p> +{{Specifications}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> +## ブラウザーの互換性 -<p>{{Compat("css.properties.text-decoration-style")}}</p> +{{Compat}} -<h2 id="See_also" name="See_also">関連情報</h2> +## 関連情報 -<ul> - <li>複数の行内装飾プロパティを一度に設定するときは、代わりに一括指定の {{cssxref("text-decoration")}} プロパティを使った方が便利かもしれません。</li> -</ul> +- 複数の行内装飾プロパティを一度に設定するときは、代わりに一括指定の {{cssxref("text-decoration")}} プロパティを使った方が便利かもしれません。 diff --git a/files/ja/web/css/text-decoration-thickness/index.md b/files/ja/web/css/text-decoration-thickness/index.md index 63fcce1a71..b2d8586caf 100644 --- a/files/ja/web/css/text-decoration-thickness/index.md +++ b/files/ja/web/css/text-decoration-thickness/index.md @@ -3,21 +3,23 @@ title: text-decoration-thickness slug: Web/CSS/text-decoration-thickness tags: - CSS - - CSS Text Decoration - - Property + - CSS テキスト装飾 + - プロパティ - Reference - - 'recipe:css-property' + - recipe:css-property - text-decoration - text-decoration-thickness +browser-compat: css.properties.text-decoration-thickness translation_of: Web/CSS/text-decoration-thickness --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><strong><code>text-decoration-thickness</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素内のテキストに用いられる装飾線、例えば取り消し線、下線、上線の太さを設定します。</p> +**`text-decoration-thickness`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素内のテキストに用いられる装飾線、例えば取り消し線、下線、上線の太さを設定します。 -<h2 id="Syntax">構文</h2> +## 構文 -<pre class="brush:css no-line-numbers">/* 単独のキーワード */ +```css +/* 単独のキーワード */ text-decoration-thickness: auto; text-decoration-thickness: from-font; @@ -31,43 +33,45 @@ text-decoration-thickness: 10%; /* グローバル値 */ text-decoration-thickness: inherit; text-decoration-thickness: initial; +text-decoration-thickness: revert; text-decoration-thickness: unset; -</pre> +``` -<h3 id="Values">値</h3> +### 値 -<dl> - <dt><code>auto</code></dt> - <dd>ブラウザーがテキスト装飾線の適切な太さを選択します。</dd> - <dt><code>from-font</code></dt> - <dd>フォントファイルに推奨する太さの情報が含まれている場合は、その値を使用します。フォントファイルにこの情報が含まれていない場合は、 <code>auto</code> が設定されているのと同様に動作し、ブラウザーが適切な太さを選択します。</dd> - <dt><code><length></code></dt> - <dd>テキスト装飾線の太さを {{cssxref('length')}} として指定し、フォントファイルの推奨値やブラウザーの既定値を無視します。</dd> - <dt><code><percentage></code></dt> - <dd>テキスト装飾線の太さを現在のフォントの <strong>1em</strong> に対する {{cssxref('percentage')}} で指定します。パーセント値は相対値として継承されるので、フォントが変わるとそれに合わせて変わります。ブラウザーは最小でも 1 デバイスピクセルを使用しなければなりません。このプロパティを適用した場合、フォントの大きさが異なる子要素があっても、適用されたボックス全体で太さが一定になります。</dd> -</dl> +- `auto` + - : ブラウザーがテキスト装飾線の適切な太さを選択します。 +- `from-font` + - : フォントファイルに推奨する太さの情報が含まれている場合は、その値を使用します。フォントファイルにこの情報が含まれていない場合は、 `auto` が設定されているのと同様に動作し、ブラウザーが適切な太さを選択します。 +- `<length>` + - : テキスト装飾線の太さを {{cssxref('length')}} として指定し、フォントファイルの推奨値やブラウザーの既定値を無視します。 +- `<percentage>` + - : テキスト装飾線の太さを現在のフォントの **1em** に対する {{cssxref('percentage')}} で指定します。パーセント値は相対値として継承されるので、フォントが変わるとそれに合わせて変わります。ブラウザーは最小でも 1 デバイスピクセルを使用しなければなりません。このプロパティを適用した場合、フォントの大きさが異なる子要素があっても、適用されたボックス全体で太さが一定になります。 -<h2 id="Formal_definition">公式定義</h2> +## 公式定義 -<p>{{CSSInfo}}</p> +{{CSSInfo}} -<h2 id="Formal_syntax">形式文法</h2> +## 形式文法 {{csssyntax}} -<h2 id="Examples">例</h2> +## Examples <h3 id="Varying_thickness">様々な太さ</h3> -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><p class="thin">赤い 1px の下線を引いたテキストです。</p> -<p class="thick">赤い 5px の下線を引いたテキストです。</p> -<p class="shorthand">これは同等の一括指定を使用しています。</p></pre> +```html +<p class="thin">赤い 1px の下線を引いたテキストです。</p> +<p class="thick">赤い 5px の下線を引いたテキストです。</p> +<p class="shorthand">これは同等の一括指定を使用しています。</p> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css">.thin { +```css +.thin { text-decoration-line: underline; text-decoration-style: solid; text-decoration-color: red; @@ -83,42 +87,24 @@ text-decoration-thickness: unset; .shorthand { text-decoration: underline solid red 5px; -}</pre> +} +``` -<h4 id="Results">結果</h4> +#### Results -<p>{{ EmbedLiveSample('Varying_thickness', '', '', '') }}</p> +{{ EmbedLiveSample('Varying_thickness', '', '', '') }} -<h2 id="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('CSS4 Text Decoration', '#text-decoration-width-property', 'text-decoration-width')}}</td> - <td>{{Spec2('CSS4 Text Decoration')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> +{{Specifications}} -<div class="notecard note"> -<p><strong>注</strong>: このプロパティは <code>text-decoration-width</code> と呼ばれていましたが、 2019 年に <code>text-decoration-thickness</code> に更新されました。</p> -</div> +> **Note:** このプロパティは `text-decoration-width` と呼ばれていましたが、 2019 年に `text-decoration-thickness` に更新されました。 -<h2 id="Browser_compatibility">ブラウザーの互換性</h2> +## ブラウザーの互換性 -<p>{{Compat("css.properties.text-decoration-thickness")}}</p> +{{Compat}} -<h2 id="See_also">関連情報</h2> +## 関連情報 -<ul> - <li>{{cssxref("text-decoration")}}</li> - <li>{{cssxref("text-underline-offset")}}</li> -</ul> +- {{cssxref("text-decoration")}} +- {{cssxref("text-underline-offset")}} diff --git a/files/ja/web/css/text-decoration/index.md b/files/ja/web/css/text-decoration/index.md index 8e77aba241..4f93ab28ee 100644 --- a/files/ja/web/css/text-decoration/index.md +++ b/files/ja/web/css/text-decoration/index.md @@ -6,62 +6,68 @@ tags: - CSS Property - CSS Text Decoration - Reference - - 'recipe:css-shorthand-property' - - text-decoration - - text-decoration-color - - text-decoration-line - - text-decoration-style + - recipe:css-shorthand-property +browser-compat: css.properties.text-decoration translation_of: Web/CSS/text-decoration --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><span class="seoSummary"><strong><code>text-decoration</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の <a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定</a>プロパティで、テキストの装飾的な線の表示を設定します。</span>これは {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-style")}} およびさらに新しい {{cssxref("text-decoration-thickness")}} プロパティの一括指定です。</p> +**`text-decoration`** は [CSS](/ja/docs/Web/CSS) の[一括指定](/ja/docs/Web/CSS/Shorthand_properties)プロパティで、テキストの装飾的な線の表示を設定します。これは {{cssxref("text-decoration-line")}}、{{cssxref("text-decoration-color")}}、{{cssxref("text-decoration-style")}} およびさらに新しい {{cssxref("text-decoration-thickness")}} プロパティの一括指定です。 -<div>{{EmbedInteractiveExample("pages/css/text-decoration.html")}}</div> +{{EmbedInteractiveExample("pages/css/text-decoration.html")}} -<p>文字列の装飾は、子孫の文字列要素に適用されます。つまり、要素に文字列装飾が指定されれば、子要素では装飾を外すことができません。例えば、 <code><p>This text has <em>some emphasized words</em> in it.</p></code> というマークアップと、 <code>p { text-decoration: underline; }</code> のスタイル規則では、段落全体に下線が引かれます。 <code>em { text-decoration: none; }</code> のスタイル規則を適用しても変化せず、段落全体に下線が引かれたままになります。しかし、 <code>em { text-decoration: overline; }</code> の規則で "some emphasized words" に第二の装飾が施されます。</p> +文字列の装飾は、子孫の文字列要素に適用されます。つまり、要素に文字列装飾が指定されれば、子要素では装飾を外すことができません。例えば、`<p>This text has <em>some emphasized words</em> in it.</p>` というマークアップと、 `p { text-decoration: underline; }` のスタイル規則では、段落全体に下線が引かれます。 `em { text-decoration: none; }` のスタイル規則を適用しても変化せず、段落全体に下線が引かれたままになります。しかし、 `em { text-decoration: overline; }` の規則で "some emphasized words" に第二の装飾が施されます。 -<h2 id="Constituent_properties">構成要素のプロパティ</h2> +## 構成要素のプロパティ -<p>このプロパティは以下の CSS プロパティの一括指定です。</p> +このプロパティは以下の CSS プロパティの一括指定です。 -<ul> - <li><a href="/ja/docs/Web/CSS/text-decoration-color"><code>text-decoration-color</code></a></li> - <li><a href="/ja/docs/Web/CSS/text-decoration-line"><code>text-decoration-line</code></a></li> - <li><a href="/ja/docs/Web/CSS/text-decoration-style"><code>text-decoration-style</code></a></li> - <li><a href="/ja/docs/Web/CSS/text-decoration-thickness"><code>text-decoration-thickness</code></a></li> -</ul> +- [`text-decoration-color`](/ja/docs/Web/CSS/text-decoration-color) +- [`text-decoration-line`](/ja/docs/Web/CSS/text-decoration-line) +- [`text-decoration-style`](/ja/docs/Web/CSS/text-decoration-style) +- [`text-decoration-thickness`](/ja/docs/Web/CSS/text-decoration-thickness) -<h2 id="Syntax">構文</h2> +## 構文 -<p><code>text-decoration</code> プロパティは、個別指定の text-decoration プロパティを表す 1 つまたは複数の値を空白で区切って指定します。</p> +```css +text-decoration: underline; +text-decoration: overline red; +text-decoration: none; -<h3 id="Values">値</h3> +/* グローバル値 */ +text-decoration: inherit; +text-decoration: initial; +text-decoration: revert; +text-decoration: unset; +``` -<dl> - <dt>{{cssxref("text-decoration-line")}}</dt> - <dd>使用する装飾の種類を設定します。 <code>underline</code> や <code>line-through</code> などです。</dd> - <dt>{{cssxref("text-decoration-color")}}</dt> - <dd>装飾の色を設定します。</dd> - <dt>{{cssxref("text-decoration-style")}}</dt> - <dd>装飾に使用する線のスタイルを設定します。 <code>solid</code>, <code>wavy</code>, <code>dashed</code> などです。</dd> - <dt>{{cssxref("text-decoration-thickness")}}</dt> -<dd>装飾に使われる線の太さを設定します。</dd> -</dl> +`text-decoration` プロパティは、個別指定の text-decoration プロパティを表す 1 つまたは複数の値を空白で区切って指定します。 -<h2 id="Formal_definition">公式定義</h2> +### 値 -<p>{{CSSInfo}}</p> +- {{cssxref("text-decoration-line")}} + - : 使用する装飾の種類を設定します。 `underline` や `line-through` などです。 +- {{cssxref("text-decoration-color")}} + - : 装飾の色を設定します。 +- {{cssxref("text-decoration-style")}} + - : 装飾に使用する線のスタイルを設定します。 `solid`, `wavy`, `dashed` などです。 +- {{cssxref("text-decoration-thickness")}} + - : 装飾に使われる線の太さを設定します。 -<h2 id="Formal_syntax">形式文法</h2> +## 公式定義 + +{{CSSInfo}} + +## 形式文法 {{csssyntax}} <h2 id="Examples">例</h2> -<h3 id="Demonstration_of_text-decoration_values">text-decoration の値のデモ</h3> +### text-decoration の値のデモ -<pre class="brush: css">.under { +```css +.under { text-decoration: underline red; } @@ -88,64 +94,33 @@ translation_of: Web/CSS/text-decoration .blink { text-decoration: blink; } -</pre> +``` -<pre class="brush: html"><p class="under">This text has a line underneath it.</p> -<p class="over">This text has a line over it.</p> -<p class="line">This text has a line going through it.</p> -<p>This <a class="plain" href="#">link will not be underlined</a>, +```html +<p class="under">This text has a line underneath it.</p> +<p class="over">This text has a line over it.</p> +<p class="line">This text has a line going through it.</p> +<p>This <a class="plain" href="#">link will not be underlined</a>, as links generally are by default. Be careful when removing the text decoration on anchors since users often depend on - the underline to denote hyperlinks.</p> -<p class="underover">This text has lines above <em>and</em> below it.</p> -<p class="thick">This text has a really thick purple underline in supporting browsers.</p> -<p class="blink">This text might blink for you, - depending on the browser you use.</p> -</pre> - -<p>{{EmbedLiveSample('Examples','auto','320')}}</p> - -<h2 id="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('CSS4 Text Decoration')}}</td> - <td>{{Spec2('CSS4 Text Decoration')}}</td> - <td>{{cssxref("text-decoration-thickness")}} を追加。なお、これはまだ公式には一括指定の一部ではありません。これはまだ未定義です。</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Text Decoration', '#text-decoration-property', 'text-decoration')}}</td> - <td>{{Spec2('CSS3 Text Decoration')}}</td> - <td>一括指定プロパティへ変更。 {{cssxref('text-decoration-style')}} の値への対応を追加。</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'text.html#lining-striking-props', 'text-decoration')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>実質的な変更なし。</td> - </tr> - <tr> - <td>{{SpecName('CSS1', '#text-decoration', 'text-decoration')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.text-decoration")}}</p> - -<h2 id="See_also">関連情報</h2> - -<ul> - <li>text-decoration の個別指定プロパティは、 {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-style")}} です。</li> - <li>{{cssxref("list-style")}} 属性は HTML の {{HTMLElement("ol")}} および {{HTMLElement("ul")}} のリストの表示方法を制御します。</li> -</ul> + the underline to denote hyperlinks.</p> +<p class="underover">This text has lines above <em>and</em> below it.</p> +<p class="thick">This text has a really thick purple underline in supporting browsers.</p> +<p class="blink">This text might blink for you, + depending on the browser you use.</p> +``` + +{{EmbedLiveSample('Examples','auto','320')}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- text-decoration の個別指定プロパティは、 {{cssxref("text-decoration-line")}}、{{cssxref("text-decoration-color")}}、{{cssxref("text-decoration-style")}} です。 +- {{cssxref("list-style")}} 属性は HTML の {{HTMLElement("ol")}} および {{HTMLElement("ul")}} のリストの表示方法を制御します。 diff --git a/files/ja/web/css/text-emphasis-color/index.md b/files/ja/web/css/text-emphasis-color/index.md index 44da77376c..2071d50a60 100644 --- a/files/ja/web/css/text-emphasis-color/index.md +++ b/files/ja/web/css/text-emphasis-color/index.md @@ -3,26 +3,27 @@ title: text-emphasis-color slug: Web/CSS/text-emphasis-color tags: - CSS + - CSS プロパティ - CSS スタイル - CSS テキスト装飾 - - CSS プロパティ - HTML 色 - Reference - - Styling HTML - - Text Emphasis - - 'recipe:css-property' + - HTML のスタイル付け + - テキストの強調 + - recipe:css-property - text-decoration-color browser-compat: css.properties.text-emphasis-color translation_of: Web/CSS/text-emphasis-color --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><strong><code>text-emphasis-color</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、圏点の色を設定します。この値は一括指定の {{cssxref("text-emphasis")}} を使用して設定することもできます。</p> +**`text-emphasis-color`** は [CSS](/ja/docs/Web/CSS) のプロパティで、圏点の色を設定します。この値は一括指定の {{cssxref("text-emphasis")}} を使用して設定することもできます。 -<pre class="brush:css no-line-numbers">/* 初期値 */ +```css +/* 初期値 */ text-emphasis-color: currentcolor; -/* <color> */ +/* <color> */ text-emphasis-color: #555; text-emphasis-color: blue; text-emphasis-color: rgba(90, 200, 160, 0.8); @@ -33,60 +34,61 @@ text-emphasis-color: inherit; text-emphasis-color: initial; text-emphasis-color: revert; text-emphasis-color: unset; -</pre> +``` -<h2 id="Syntax">構文</h2> +## 構文 -<h3 id="Values">値</h3> +### 値 -<dl> - <dt><code><color></code></dt> - <dd>記号の色を定義します。 color が存在しない場合、既定で <code>currentcolor</code> になります。</dd> -</dl> +- `<color>` + - : 記号の色を定義します。 color が存在しない場合、既定で `currentcolor` になります。 -<h2 id="Formal_definition">公式定義</h2> +## 公式定義 -<p>{{CSSInfo}}</p> +{{CSSInfo}} -<h3 id="Formal_syntax">形式文法</h3> +## 形式文法 {{csssyntax}} -<h2 id="Examples">例</h2> +## Examples <h3 id="Emphasis_with_a_color_and_custom_character">色と固有の文字で強調</h3> -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css">em { +```css +em { + -webkit-text-emphasis-color: green; text-emphasis-color: green; + -webkit-text-emphasis-style: "*"; text-emphasis-style: "*"; -}</pre> +} +``` -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><p>Here's an example:</p> +```html +<p>例:</p> -<em>This has emphasis marks!</em> -</pre> +<em>これには圏点があります！</em> +``` -<h4 id="Result">結果</h4> +#### Result -<p>{{EmbedLiveSample("Emphasis_with_a_color_and_custom_character", 450, 100)}}</p> +{{EmbedLiveSample("Emphasis_with_a_color_and_custom_character", 450, 100)}} -<h2 id="Specifications">仕様書</h2> +## 仕様書 {{Specifications}} -<h2 id="Browser_compatibility">ブラウザーの互換性</h2> +## ブラウザーの互換性 -<p>{{Compat}}</p> +{{Compat}} -<h2 id="See_also">関連情報</h2> +## 関連情報 -<ul> - <li>{{cssxref("<color>")}} データ型</li> - <li>他の強調記号に関するプロパティ: {{cssxref('text-emphasis-style')}}, {{cssxref('text-emphasis')}}, {{cssxref("text-emphasis-position")}}.</li> - <li>色に関する他のプロパティ: {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, {{cssxref("column-rule-color")}}</li> - <li><a href="/ja/docs/Web/HTML/Applying_color">CSS を使用した HTML 要素への色の適用</a></li> -</ul> +- {{cssxref("<color>")}} データ型 +- 他の強調記号に関するプロパティ: {{cssxref('text-emphasis-style')}}, {{cssxref('text-emphasis')}}, {{cssxref("text-emphasis-position")}}. +- 色に関する他のプロパティ: {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, {{cssxref("column-rule-color")}} +- [CSS を使用した HTML 要素への色の適用](/ja/docs/Web/HTML/Applying_color) diff --git a/files/ja/web/css/text-emphasis-position/index.md b/files/ja/web/css/text-emphasis-position/index.md index 7ba827b564..5909273bf9 100644 --- a/files/ja/web/css/text-emphasis-position/index.md +++ b/files/ja/web/css/text-emphasis-position/index.md @@ -3,16 +3,19 @@ title: text-emphasis-position slug: Web/CSS/text-emphasis-position tags: - CSS - - CSS テキスト装飾 - CSS プロパティ + - CSS テキスト装飾 - Reference + - recipe:css-property +browser-compat: css.properties.text-emphasis-position translation_of: Web/CSS/text-emphasis-position --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><a href="/ja/docs/Web/CSS" title="CSS">CSS</a> の <strong><code>text-emphasis-position</code></strong> プロパティは、圏点が描かれる位置を設定します。ルビテキストと同様、圏点のために十分な空間がない場合は、行の高さが広げられます。</p> +**`text-emphasis-position`** は [CSS](/ja/docs/Web/CSS) のプロパティで、圏点が描かれる位置を設定します。ルビのテキストと同様、圏点のために十分な空間がない場合は、行の高さが広げられます。 -<pre class="brush:css no-line-numbers">/* 初期値 */ +```css +/* 初期値 */ text-emphasis-position: over right; /* キーワード値 */ @@ -27,115 +30,129 @@ text-emphasis-position: left under; /* グローバル値 */ text-emphasis-position: inherit; text-emphasis-position: initial; +text-emphasis-postition: revert; text-emphasis-position: unset; -</pre> +``` + +## 構文 -<p>{{cssinfo}}</p> +### 値 -<h2 id="Preferred_position" name="Preferred_position">望ましい位置</h2> +- `over` + - : 横書きモードでテキストの上に圏点を描きます。 +- `under` + - : 横書きモードでテキストの下に圏点を描きます。 +- `right` + - : 縦書きモードでテキストの右に圏点を描きます。 +- `left` + - : 縦書きモードでテキストの左に圏点を描きます。 -<p>圏点の望ましい位置は言語に依存します。例えば日本語では、望ましい位置は <span class="css">over right</span> です。一方中国語では、望ましい位置は <span class="css">under right</span> となります。下記の情報の表は、日本語、モンゴル語、中国語における望ましい圏点の位置を要約するものです。</p> +## Description + +圏点の望ましい位置は言語に依存します。例えば日本語では、望ましい位置は `over right` です。一方、中国語では、望ましい位置は `under right` となります。下記の情報の表は、日本語、モンゴル語、中国語における望ましい圏点の位置をまとめたものです。 <table> - <caption>望ましい圏点とルビの位置</caption> - <thead> - <tr> - <th rowspan="2" scope="col">言語</th> - <th colspan="2" scope="col">望ましい位置</th> - <th colspan="2" rowspan="2" scope="col">説明</th> - </tr> - <tr> - <th>横書き</th> - <th>縦書き</th> - </tr> - </thead> - <tbody> - <tr> - <td>日本語</td> - <td rowspan="2">over</td> - <td rowspan="2">right</td> - <td rowspan="2"><img alt="日本語の横書きテキストでは、圏点は強調される各文字の上に表示されます。" src="https://drafts.csswg.org/css-text-decor-3/images/text-emphasis-ja.png" style="height: 28px; width: 225px;" title="日本語のテキストの上に適用された圏点 (分かりやすいよう青で表示)"></td> - <td rowspan="3"><img alt="日本語の縦書きテキストでは、圏点が強調される各文字の右に表示されます。" src="https://drafts.csswg.org/css-text-decor-3/images/text-emphasis-v.gif" style="height: 89px; width: 34px;" title="日本語のテキストの右に適用された圏点"></td> - </tr> - <tr> - <td>モンゴル語</td> - </tr> - <tr> - <td>中国語</td> - <td>under</td> - <td>right</td> - <td><img alt="中国語簡体字の横書きテキストでは、圏点は強調される各文字の下に表示されます。" src="https://drafts.csswg.org/css-text-decor-3/images/text-emphasis-zh.gif" style="height: 28px; width: 133px;" title="中国語のテキストの下に適用された圏点 (分かりやすいよう青で表示)"></td> - </tr> - </tbody> + <caption> + 望ましい圏点とルビの位置 + </caption> + <thead> + <tr> + <th rowspan="2" scope="col">言語</th> + <th colspan="2" scope="col">望ましい位置</th> + <th colspan="2" rowspan="2" scope="col">図</th> + </tr> + <tr> + <th>横書き</th> + <th>縦書き</th> + </tr> + </thead> + <tbody> + <tr> + <td>日本語</td> + <td rowspan="3">over</td> + <td rowspan="3">right</td> + <td rowspan="3"> + <img + alt="日本語の横書きテキストでは、圏点は強調される各文字の上に表示されます。" + src="text-emphasis-ja.png" + title="日本語のテキストの上に適用された圏点 (分かりやすいよう青で表示)" + /> + </td> + <td rowspan="4"> + <img + alt="日本語の縦書きテキストでは、圏点が強調される各文字の右に表示されます。" + src="text-emphasis-v.gif" + title="日本語のテキストの右に適用された圏点" + /> + </td> + </tr> + <tr> + <td>韓国語</td> + </tr> + <tr> + <td>モンゴル語</td> + </tr> + <tr> + <td>中国語</td> + <td>under</td> + <td>right</td> + <td> + <img + alt="中国語簡体字の横書きテキストでは、圏点は強調される各文字の下に表示されます。" + src="text-emphasis-zh.gif" + title="中国語のテキストの下に適用された圏点 (分かりやすいよう青で表示)" + /> + </td> + </tr> + </tbody> </table> -<div class="note"> -<p><strong>メモ</strong>: {{cssxref("text-emphasis")}} 一括指定プロパティを使用して、 <code>text-emphasis-position</code> を設定することはできず、また初期化されることもありません。</p> -</div> - -<h2 id="Syntax" name="Syntax">構文</h2> +> **Note:** {{cssxref("text-emphasis")}} 一括指定プロパティを使用して、 `text-emphasis-position` を設定することはできず、また初期化されることもありません。 -<h3 id="Values" name="Values">値</h3> +## 公式定義 -<dl> - <dt><code><dfn>over</dfn></code></dt> - <dd>横書きモードでテキストの上に圏点を描きます。</dd> - <dt><code><dfn>under</dfn></code></dt> - <dd>横書きモードでテキストの下に圏点を描きます。</dd> - <dt><code><dfn>right</dfn></code></dt> - <dd>縦書きモードでテキストの右に圏点を描きます。</dd> - <dt><code><dfn>left</dfn></code></dt> - <dd>縦書きモードでテキストの左に圏点を描きます。</dd> -</dl> +{{CSSInfo}} -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +## 形式文法 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## Examples + +### ルビを圏点より優先させる場合 -<p>編集者によっては、ルビと競合する場合に圏点を隠すことを好みます。 HTML では、これは次のスタイル規則で実現できます。</p> +編集者によっては、ルビと競合する場合に圏点を隠すことを好みます。 HTML では、これは次のスタイル規則で実現できます。 -<pre class="brush: css">ruby { +```css +ruby { + -webkit-text-emphasis: none; text-emphasis: none; } -</pre> +``` -<p>編集者によっては、圏点と競合する場合にルビを隠すことを好みます。 HTML では、これは次のパターンで実現できます。</p> +### 圏点よりルビを優先させる場合 -<pre class="brush: css">em { - text-emphasis: dot; /* <em> 要素に text-emphasis を設定 */ +編集者によっては、圏点と競合する場合にルビを隠すことを好みます。 HTML では、これは次のパターンで実現できます。 + +```css +em { + -webkit-text-emphasis: dot; + text-emphasis: dot; /* text-emphasis を <em> 要素に設定 */ } em rt { - display: none; /* <em> 要素内のルビを隠す */ -}</pre> - -<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-position-property', 'text-emphasis')}}</td> - <td>{{Spec2('CSS3 Text Decoration')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> + display: none; /* <em> 要素内のルビを隠す */ +} +``` + +## 仕様書 + +{{Specifications}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> +## ブラウザーの互換性 -<p>{{Compat("css.properties.text-emphasis-position")}}</p> +{{Compat}} -<h2 id="See_also" name="See_also">関連情報</h2> +## 関連情報 -<ul> - <li>個別指定プロパティ {{cssxref("text-emphasis-style")}}, {{cssxref("text-emphasis-color")}} および対応する一括指定プロパティ {{cssxref("text-emphasis")}}</li> -</ul> +- 個別指定プロパティ {{cssxref("text-emphasis-style")}}, {{cssxref("text-emphasis-color")}} および対応する一括指定プロパティ {{cssxref("text-emphasis")}} diff --git a/files/ja/web/css/text-emphasis-style/index.md b/files/ja/web/css/text-emphasis-style/index.md index 6c2e0bd827..834cc632d7 100644 --- a/files/ja/web/css/text-emphasis-style/index.md +++ b/files/ja/web/css/text-emphasis-style/index.md @@ -3,20 +3,22 @@ title: text-emphasis-style slug: Web/CSS/text-emphasis-style tags: - CSS - - CSS テキスト装飾 - CSS プロパティ + - CSS テキスト装飾 - Reference - - text-emphasis + - recipe:css-property +browser-compat: css.properties.text-emphasis-style translation_of: Web/CSS/text-emphasis-style --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>text-emphasis-style</code></strong> プロパティは、圏点の表示を設定します。設定や解除に一括指定の {{cssxref("text-emphasis")}} を使用することもできます。</p> +**`text-emphasis-style`** は [CSS](/ja/docs/Web/CSS) のプロパティで、圏点の表示を設定します。設定やリセットに一括指定の {{cssxref("text-emphasis")}} を使用することもできます。 -<pre class="brush:css no-line-numbers">/* 初期値 */ +```css +/* 初期値 */ text-emphasis-style: none; /* 圏点なし */ -/* <string> 値 */ +/* <string> 値 */ text-emphasis-style: 'x'; text-emphasis-style: '点'; text-emphasis-style: '\25B2'; @@ -36,72 +38,61 @@ text-emphasis-style: open sesame; /* グローバル値 */ text-emphasis-style: inherit; text-emphasis-style: initial; +text-emphasis-style: revert; text-emphasis-style: unset; -</pre> - -<p>{{cssinfo}}</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code>none</code></dt> - <dd>圏点なし。</dd> - <dt><code>filled</code></dt> - <dd>図形は単色で塗りつぶされます。 <code>filled</code> も <code>open</code> も指定されない場合は、これが既定値です。</dd> - <dt><code>open</code></dt> - <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> - <dd>記号として大きな円を表示します。 filled circle は <code>'●'</code> (<code>U+25CF</code>)、 open circle は <code>'○'</code> (<code>U+25CB</code>) です。</dd> - <dt><code>double-circle</code></dt> - <dd>記号として二重丸を表示します。 filled double-circle は <code>'◉'</code> (<code>U+25C9</code>)、 open double-circle は <code>'◎'</code> (<code>U+25CE</code>) です。</dd> - <dt><code>triangle</code></dt> - <dd>記号として三角形を表示します。 filled triangle は <code>'▲'</code> (<code>U+25B2</code>)、 open triangle は <code>'△'</code> (<code>U+25B3</code>) です。</dd> - <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> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +``` + +## 構文 + +### 値 + +- `none` + - : 圏点なし。 +- `filled` + - : 図形は単色で塗りつぶされます。 `filled` も `open` も指定されない場合は、これが既定値です。 +- `open` + - : 図形は中抜きになります。 +- `dot` + - : 記号として小さな円を表示します。 filled dot は `'•'` (`U+2022`)、 open dot は `'◦'` (`U+25E6`) です。 +- `circle` + - : 記号として大きな円を表示します。 filled circle は `'●'` (`U+25CF`)、 open circle は `'○'` (`U+25CB`) です。 +- `double-circle` + - : 記号として二重丸を表示します。 filled double-circle は `'◉'` (`U+25C9`)、 open double-circle は `'◎'` (`U+25CE`) です。 +- `triangle` + - : 記号として三角形を表示します。 filled triangle は `'▲'` (`U+25B2`)、 open triangle は `'△'` (`U+25B3`) です。 +- `sesame` + - : 記号としてゴマを表示します。 filled sesame は `'﹅'` (`U+FE45`)、 open sesame は `'﹆'` (`U+FE46`) です。 +- `<string>` + - : 記号として文字列を表示します。`<string>` には 1 *文字*を超える文字列を指定しないでください。ユーザーエージェントは、2 文字以上の書記素クラスターから構成される文字列を短縮したり無視したりする可能性があります。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## Examples -<pre><code>h2 { +### 基本的な例 + +```css +h2 { + -webkit-text-emphasis-style: sesame; text-emphasis-style: sesame; -}</code></pre> - -<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-style-property', 'text-emphasis')}}</td> - <td>{{Spec2('CSS3 Text Decoration')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.text-emphasis-color")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>関連プロパティ: {{cssxref('text-emphasis-color')}}, {{cssxref('text-emphasis')}}</li> - <li>圏点の位置の定義を可能にする {{cssxref('text-emphasis-position')}} プロパティ。</li> -</ul> +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- 関連プロパティ: {{cssxref('text-emphasis-color')}}, {{cssxref('text-emphasis')}} +- 圏点の位置の定義を可能にする {{cssxref('text-emphasis-position')}} プロパティ diff --git a/files/ja/web/css/text-emphasis/index.md b/files/ja/web/css/text-emphasis/index.md index 6d0ae6bf2c..5cfe98ea06 100644 --- a/files/ja/web/css/text-emphasis/index.md +++ b/files/ja/web/css/text-emphasis/index.md @@ -3,44 +3,39 @@ title: text-emphasis slug: Web/CSS/text-emphasis tags: - CSS - - CSS テキスト装飾 - CSS プロパティ + - CSS テキスト装飾 - Reference - - text-emphasis - - text-emphasis-color - - text-emphasis-style - - 一括指定プロパティ + - recipe:css-shorthand-property +browser-compat: css.properties.text-emphasis translation_of: Web/CSS/text-emphasis --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<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> +**`text-emphasis`** は [CSS](/ja/docs/Web/CSS) のプロパティで、 (空白や制御文字を除く) テキストに圏点を適用します。これは {{cssxref("text-emphasis-style")}} と {{cssxref("text-emphasis-color")}} の[一括指定](/ja/docs/Web/CSS/Shorthand_properties)です。 -<div>{{EmbedInteractiveExample("pages/css/text-emphasis.html")}}</div> +{{EmbedInteractiveExample("pages/css/text-emphasis.html")}} -<p><code>text-emphasis</code> プロパティは、 {{cssxref("text-decoration")}} とは大きく異なります。 <code>text-decoration</code> プロパティは継承されず、指定される装飾は要素全体にわたって適用されます。しかし、 <code>text-emphasis</code> は継承されます。これは、子孫に対して圏点を変更できることを意味します。</p> +`text-emphasis` プロパティは、 {{cssxref("text-decoration")}} とは大きく異なります。 `text-decoration` プロパティは継承されず、指定される装飾は要素全体にわたって適用されます。しかし、 `text-emphasis` は継承されます。これは、子孫に対して圏点を変更できることを意味します。 -<p>圏点の大きさは、ルビと同様にフォントの大きさの約 50% であり、 <code>text-emphasis</code> は現在の行間隔が圏点を表示するのに十分でない場合、行の高さに影響を与えることがあります。</p> +圏点の大きさは、ルビと同様にフォントの大きさの約 50% であり、 `text-emphasis` は現在の行間隔が圏点を表示するのに十分でない場合、行の高さに影響を与えることがあります。 -<div class="note"> -<p><code>text-emphasis</code> は、 {{cssxref("text-emphasis-position")}} の値をリセットしません。これは、圏点のスタイルと色がテキストで異なる場合に、圏点の位置を要求することがほとんど見込まれないためです。これを必要とするような珍しい場合は、プロパティ {{cssxref("text-emphasis-position")}} を使用してください。</p> -</div> +> **Note:** `text-emphasis` は、 {{cssxref("text-emphasis-position")}} の値をリセットしません。これは、圏点のスタイルと色がテキストで異なる場合に、圏点の位置を要求することがほとんど見込まれないためです。珍しくもこれを必要とするような場合は、プロパティ {{cssxref("text-emphasis-position")}} を使用してください。 -<h2 id="Constituent_properties">構成要素のプロパティ</h2> +## 構成要素のプロパティ -<p>このプロパティは以下のプロパティの一括指定です。</p> +このプロパティは以下の CSS プロパティの一括指定です。 -<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> +- [`text-emphasis-color`](/ja/docs/Web/CSS/text-emphasis-color) +- [`text-emphasis-style`](/ja/docs/Web/CSS/text-emphasis-style) -<h2 id="Syntax">構文</h2> +## 構文 -<pre class="brush:css no-line-numbers">/* 初期値 */ +```css +/* 初期値 */ text-emphasis: none; /* 圏点なし */ -/* <string> 値 */ +/* <string> 値 */ text-emphasis: 'x'; text-emphasis: '点'; text-emphasis: '\25B2'; @@ -61,72 +56,73 @@ text-emphasis: inherit; text-emphasis: initial; text-emphasis: revert; text-emphasis: unset; -</pre> - -<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> - <dt><code>open</code></dt> - <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> - <dd>記号として大きな円を表示します。 filled circle は <code>'●'</code> (<code>U+25CF</code>)、 open circle は <code>'○'</code> (<code>U+25CB</code>) です。これは、他の図形が与えられていない場合、横書きモードで既定の形状です。</dd> - <dt><code>double-circle</code></dt> - <dd>記号として二重丸を表示します。 filled double-circle は <code>'◉'</code> (<code>U+25C9</code>)、 open double-circle は <code>'◎'</code> (<code>U+25CE</code>) です。</dd> - <dt><code>triangle</code></dt> - <dd>記号として三角形を表示します。 filled triangle は <code>'▲'</code> (<code>U+25B2</code>)、 open triangle は <code>'△'</code> (<code>U+25B3</code>) です。</dd> - <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> - <dt><code><color></code></dt> - <dd>記号の色を定義します。 color を指定しない場合、既定では <code>currentcolor</code> です。</dd> -</dl> - -<h2 id="Formal_definition">公式定義</h2> - -<p>{{CSSInfo}}</p> - -<h2 id="Formal_syntax">形式文法</h2> +``` + +### 値 + +- `none` + - : 圏点なし。 +- `filled` + - : 図形が単色で塗りつぶされます。 `filled` も `open` も指定されていない場合は、これが既定値です。 +- `open` + - : 図形が中抜きになります。 +- `dot` + - : 記号として小さな円を表示します。filled dot は `'•'` (`U+2022`)、open dot は `'◦'` (`U+25E6`) です。 +- `circle` + - : 記号として大きな円を表示します。filled circle は `'●'` (`U+25CF`)、open circle は `'○'` (`U+25CB`) です。これは、他の図形が与えられていない場合、横書きモードで既定の形状です。 +- `double-circle` + - : 記号として二重丸を表示します。filled double-circle は `'◉'` (`U+25C9`)、open double-circle は `'◎'` (`U+25CE`) です。 +- `triangle` + - : 記号として三角形を表示します。filled triangle は `'▲'` (`U+25B2`)、open triangle は `'△'` (`U+25B3`) です。 +- `sesame` + - : 記号としてゴマを表示します。filled sesame は `'﹅'` (`U+FE45`)、open sesame は`'﹆'` (`U+FE46`) です。これは、他の図形が与えられていない場合、縦書きモードで既定の形状です。 +- `<string>` + - : 記号として文字列を表示します。 `<string>` には 1 <em>文字</em>を超える文字列を指定しないでください。ユーザーエージェントは、 1 つより多い書記素クラスターから構成される文字列を短縮したり無視したりする可能性があります。 +- `<color>` + - : 記号の色を定義します。 color を指定しない場合、既定では `currentcolor` です。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 {{csssyntax}} -<h2 id="Examples">例</h2> +## Examples <h3 id="A_heading_with_emphasis_shape_and_color">強調して色を付けた見出し</h3> -<p>この例は、見出しの各文字に三角形の圏点を付けて描画します。</p> +この例は、見出しの各文字に三角形の圏点を付けて描画します。 -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css">h2 { +```css +h2 { + -webkit-text-emphasis: triangle #D55; text-emphasis: triangle #D55; -}</pre> +} +``` -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><h2>これは重要です！</h2></pre> +```html +<h2>これは重要です！</h2> +``` -<h4 id="Result">結果</h4> +#### Result -<p>{{EmbedLiveSample("A_heading_with_emphasis_shape_and_color", 500, 70)}}</p> +{{EmbedLiveSample("A_heading_with_emphasis_shape_and_color", 500, 90)}} -<h2 id="Specifications">仕様書</h2> +## 仕様書 {{Specifications}} -<h2 id="Browser_compatibility">ブラウザーの互換性</h2> +## ブラウザーの互換性 -<p>{{Compat}}</p> +{{Compat}} -<h2 id="See_also">関連情報</h2> +## 関連情報 -<ul> - <li>個別指定プロパティ: {{cssxref('text-emphasis-style')}}, {{cssxref('text-emphasis-color')}}</li> - <li>圏点の位置の定義を可能にする {{cssxref('text-emphasis-position')}} プロパティ。</li> -</ul> +- 個別指定プロパティ: {{cssxref('text-emphasis-style')}}, {{cssxref('text-emphasis-color')}} +- 圏点の位置の定義を可能にする {{cssxref('text-emphasis-position')}} プロパティ diff --git a/files/ja/web/css/text-shadow/index.md b/files/ja/web/css/text-shadow/index.md index 1cfba9a47b..2810367e16 100644 --- a/files/ja/web/css/text-shadow/index.md +++ b/files/ja/web/css/text-shadow/index.md @@ -3,35 +3,29 @@ title: text-shadow slug: Web/CSS/text-shadow tags: - CSS - - CSS Property - - CSS Styles - - CSS Text Decoration + - CSS プロパティ - CSS スタイル - CSS テキスト装飾 - - CSS プロパティ - - HTML Colors - - HTML Styles - - HTML スタイル - HTML 色 + - HTML スタイル - Reference - - Styles - - Styling HTML - - color - - 'recipe:css-property' - スタイル + - HTML のスタイル付け + - color + - recipe:css-property +browser-compat: css.properties.text-shadow translation_of: Web/CSS/text-shadow --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><span class="seoSummary"><strong><code>text-shadow</code></strong> は CSS のプロパティで、テキストに影を追加します。文字列及びその<code><a href="/ja/docs/Web/CSS/text-decoration">装飾</a></code>に適用される影のカンマで区切られたリストを受け付けます。</span>それぞれの影は、要素からの X および Y オフセット、影の明るさ、影の色のうちいくつかの組み合わせで記述します。</p> +**`text-shadow`** は CSS のプロパティで、テキストに影を追加します。文字列およびその装飾 ([`decoration`](/ja/docs/Web/CSS/text-decoration)) に適用される影のリストをカンマで区切ったリストで受け付けます。それぞれの影は、要素からの X および Y オフセット、影の明るさ、影の色のうちいくつかの組み合わせで記述します。 -<div>{{EmbedInteractiveExample("pages/css/text-shadow.html")}}</div> +{{EmbedInteractiveExample("pages/css/text-shadow.html")}} -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers notranslate">/* offset-x | offset-y | blur-radius | color */ +```css +/* offset-x | offset-y | blur-radius | color */ text-shadow: 1px 1px 2px black; /* color | offset-x | offset-y | blur-radius */ @@ -50,101 +44,85 @@ text-shadow: 5px 10px; /* グローバル値 */ text-shadow: inherit; text-shadow: initial; +text-shadow: revert; text-shadow: unset; -</pre> +``` -<p>このプロパティは、影のカンマで区切られたリストとして指定します。</p> +このプロパティは、影のカンマで区切られたリストとして指定します。 -<p>それぞれの影は2つ又は3つの <code><length></code> 値と、任意でその後に <code><color></code> 値を続けることで指定します。最初の2つの <code><length></code> 値は、 <code><offset-x></code> 及び <code><offset-y></code> の値です。3番目の <code><length></code> 値は、任意で、 <code><blur-radius></code> です。 <code><color></code> 値は影の色です。</p> +それぞれの影は 2 つまたは 3 つの `<length>` 値と、任意でその後に `<color>` 値を続けることで指定します。最初の 2 つの `<length>` 値は、 `<offset-x>` および `<offset-y>` の値です。3 番目の `<length>` 値は任意で `<blur-radius>` です。 `<color>` 値は影の色です。 -<p>複数の影が与えられた場合は、影は手前から奥に向けて適用され、最初に指定された影が一番上になります。</p> +複数の影が与えられた場合は、影は手前から奥に向けて適用され、最初に指定された影が一番上になります。 -<p>このプロパティは {{cssxref("::first-line")}} 及び {{cssxref("::first-letter")}} の両方の<a href="/ja/docs/Web/CSS/Pseudo-elements">擬似要素</a>に適用されます。</p> +このプロパティは {{cssxref("::first-line")}} および {{cssxref("::first-letter")}} の両方の[擬似要素](/ja/docs/Web/CSS/Pseudo-elements)に適用されます。 -<h3 id="Values" name="Values">値</h3> +### 値 -<dl> - <dt>{{cssxref("<color>")}}</dt> - <dd>省略可。影の色です。オフセット値の前か後に指定できます。色が指定されなければ、ユーザーエージェントが選択した色が使われるので、ブラウザー間で一貫性を持つには、明示的に定義することが求められます。</dd> - <dt><code><offset-x> <offset-y></code></dt> - <dd>必須。これらの <code><length></code> 値はテキストに対する影のオフセットを指定します。 <code><offset-x></code> は水平方向の距離を指定します。負の値であればテキストの左に影を配置します。 <code><offset-y></code> は垂直方向の距離を指定します。負の値であればテキストの上に影を配置します。両方の値が <code>0</code> ならば、影はテキストの真後ろに配置されますが、 <code><blur-radius></code> の効果により一部だけが見えるかもしれません。</dd> - <dt><code><blur-radius></code></dt> - <dd>省略可。これは {{ cssxref("<length>") }} 値です。指定されなければ、既定では <code>0</code> になります。この値が大きいほど、ぼかしは大きくなり、影は広く薄くなります。</dd> -</dl> +- {{cssxref("<color>")}} + - : 省略可。影の色です。オフセット値の前か後に指定できます。色が指定されなければ、ユーザーエージェントが選択した色が使われるので、ブラウザー間で一貫性を保つために、明示的に定義することが求められます。 +- `<offset-x> <offset-y>` + - : 必須。これらの `<length>` 値はテキストに対する影のオフセットを指定します。 `<offset-x>` は水平方向の距離を指定します。負の値であればテキストの左に影を配置します。 `<offset-y>` は垂直方向の距離を指定します。負の値であればテキストの上に影を配置します。両方の値が `0` ならば、影はテキストの真後ろに配置されますが、 `<blur-radius>` の効果により一部だけが見えるかもしれません。 +- `<blur-radius>` + - : 省略可。これは {{cssxref("<length>")}} 値です。指定されなければ、既定では `0` になります。この値が大きいほど、ぼかしは大きくなり、影は広く薄くなります。 -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> +## 公式定義 -<p>{{CSSInfo}}</p> +{{CSSInfo}} -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> +## 形式文法 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## Examples -<h3 id="Simple_shadow" name="Simple_shadow">単純な影</h3> +<h3 id="Simple_shadow">単純な影</h3> -<div> -<pre class="brush: css notranslate">.red-text-shadow { +```css +.red-text-shadow { text-shadow: red 0 -2px; -}</pre> +} +``` -<pre class="brush: html notranslate"><p class="red-text-shadow">Sed ut perspiciatis unde omnis iste +```html +<p class="red-text-shadow">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, - totam rem aperiam, eaque ipsa quae ab illo inventore.</p></pre> -</div> + totam rem aperiam, eaque ipsa quae ab illo inventore.</p> +``` -<p>{{EmbedLiveSample('Simple_shadow', '660px', '90px')}}</p> +{{EmbedLiveSample('Simple_shadow', '660px', '90px')}} -<h3 id="Multiple_shadows" name="Multiple_shadows">複数の影</h3> +<h3 id="Multiple_shadows">複数の影</h3> -<div> -<pre class="brush:css notranslate">.white-text-with-blue-shadow { +```css +.white-text-with-blue-shadow { text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue; color: white; font: 1.5em Georgia, serif; -}</pre> +} +``` -<pre class="brush: html notranslate"><p class="white-text-with-blue-shadow">Sed ut perspiciatis unde omnis iste +```html +<p class="white-text-with-blue-shadow">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, - totam rem aperiam, eaque ipsa quae ab illo inventore.</p></pre> -</div> - -<p>{{EmbedLiveSample('Multiple_shadows', '660px', '170px')}}</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-shadow-property', 'text-shadow')}}</td> - <td>{{Spec2('CSS3 Text Decoration')}}</td> - <td>CSS プロパティ <code>text-shadow</code> は <a class="external" href="http://www.w3.org/TR/2008/REC-CSS2-20080411/text.html#text-shadow-props">CSS2 で不適切に定義され</a>、 CSS2 (Level 1) で削除されました。 CSS Text Module Level 3 仕様で構文を改善しました。その後、 <a href="https://www.w3.org/TR/css-text-decor-3/">CSS Text Decoration Module Level 3</a> に移動しました。</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.text-shadow")}}</p> - -<h3 id="Quantum_CSS_notes" name="Quantum_CSS_notes">Quantum CSS のメモ</h3> - -<ul> - <li>Gecko には {{cssxref("transition")}} にバグがあり、色が指定された <code>text-shadow</code> から色が指定されていない <code>text-shadow</code> への移行が動作しません ({{bug(726550)}})。これは Firefox の新しいパラレル CSS エンジン (<a href="https://wiki.mozilla.org/Quantum">Quantum CSS</a> 又は <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a> とも呼ばれ、 Firefox 57 でリリースされる予定です) で修正されています。</li> -</ul> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{cssxref("box-shadow")}}</li> - <li>{{cssxref("<color>")}} データ型 (影の色を指定するため)</li> - <li><a href="/ja/docs/Web/HTML/Applying_color">CSS を使った HTML の要素への色の適用</a></li> -</ul> + totam rem aperiam, eaque ipsa quae ab illo inventore.</p> +``` + +{{EmbedLiveSample('Multiple_shadows', '660px', '170px')}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +### Quantum CSS のメモ + +- Gecko には {{cssxref("transition")}} にバグがあり、色が指定された `text-shadow` から色が指定されていない `text-shadow` へのトランジションが動作しません ({{bug(726550)}})。これは Firefox の新しいパラレル CSS エンジン ([Quantum CSS](https://wiki.mozilla.org/Quantum) または [Stylo](https://wiki.mozilla.org/Quantum/Stylo) とも呼ばれ、 Firefox 57 でリリースされる予定です) で修正されています。 + +## 関連情報 + +- {{cssxref("box-shadow")}} +- {{cssxref("<color>")}} データ型 (影の色を指定するため) +- [CSS を使った HTML の要素への色の適用](/ja/docs/Web/HTML/Applying_color) diff --git a/files/ja/web/css/text-underline-position/index.md b/files/ja/web/css/text-underline-position/index.md new file mode 100644 index 0000000000..4eab2b820d --- /dev/null +++ b/files/ja/web/css/text-underline-position/index.md @@ -0,0 +1,133 @@ +--- +title: text-underline-position +slug: Web/CSS/text-underline-position +tags: + - CSS + - CSS Property + - CSS Text Decoration + - Reference + - recipe:css-property +browser-compat: css.properties.text-underline-position +translation_of: Web/CSS/text-underline-position +--- +{{CSSRef}} + +**`text-underline-position`** は [CSS](/ja/docs/Web/CSS) のプロパティであり、{{cssxref("text-decoration")}} プロパティの `underline` の値で設定される下線 (傍線) の位置を指定します。 + +{{EmbedInteractiveExample("pages/css/text-underline-position.html")}} + +## 構文 + +```css +/* 単一のキーワード */ +text-underline-position: auto; +text-underline-position: under; +text-underline-position: left; +text-underline-position: right; + +/* 複数のキーワード */ +text-underline-position: under left; +text-underline-position: right under; + +/* グローバル値 */ +text-underline-position: inherit; +text-underline-position: initial; +text-underline-position: revert; +text-underline-position: unset; +``` + +### 値 + +- `auto` + - : {{glossary("user agent", "ユーザーエージェント")}}は、傍線を文字のベースラインの位置に配置するか、その下に配置するかを独自のアルゴリズムで決定します。 +- `from-font` + - : フォントファイルに推奨される位置についての情報があった場合、その値を使用します。フォントファイルにこの情報がない場合は、`auto` が設定された場合の動作と同様、ブラウザーが適切な位置を選択します。 +- `under` + - : 文字のベースラインの下、ディセンダーを越えない位置に強制的に傍線を設定します。これは、下付き文字が多用される化学式や数式の読みやすさを確保するのに便利です。 +- `left` + - : 縦書きモードでは、このキーワードは強制的に傍線をテキストの*左*端に配置します。横書きモードでは、`under` と同じです。 +- `right` + - : 縦書きモードでは、このキーワードは強制的に傍線をテキストの*右*側に配置します。横書きモードでは、`under` と同じです。 +- `auto-pos` {{non-standard_inline}} + - : `auto` と同じですので、代わりにそちらを使用してください。 +- `above` {{non-standard_inline}} + - : 強制的に傍線をテキストの上部に配置します。東アジアのテキストで使用すると、`auto` キーワードが同様の効果になります。 +- `below` {{non-standard_inline}} + - : 強制的に傍線をテキストの下部に配置します。アルファベットのテキストで使用すると、`auto` キーワードが同様の効果になります。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +<h3 id="A_simple_example">単純な例</h3> + +2 つの段落の例を見てみましょう。 + +```html +<p class="horizontal">Lorem ipsum dolor sit amet, consectetur adipiscing elit. +Nullam consectetur ac turpis vel laoreet. Nullam volutpat pharetra lorem, sit +amet feugiat tortor volutpat quis. Nam eget sodales quam. Aliquam accumsan +tellus ac erat posuere.</p> + +<p class="vertical">Lorem ipsum dolor sit amet, consectetur adipiscing elit. +Nullam consectetur ac turpis vel laoreet. Nullam volutpat pharetra lorem, sit +amet feugiat tortor volutpat quis. Nam eget sodales quam. Aliquam accumsan +tellus ac erat posuere.</p> +``` + +CSS はこのようになります。 + +```css +p { + font-size: 1.5rem; + text-transform: capitalize; + text-decoration: underline; + text-decoration-thickness: 2px; +} + +.horizontal { + text-underline-position: under; +} + +.vertical { + writing-mode: vertical-rl; + text-underline-position: left; +} +``` + +この例では、どちらの段落にも太い下線を引いています。横書きのテキストでは `text-underline-position: under;` を使用して、下線をすべてのディセンダーの下に引いています。 + +[`writing-mode`](/ja/docs/Web/CSS/writing-mode) を縦書きに設定した場合、必要に応じて `left` または `right` を使用して、傍線をテキストの左と右のどちらに引くか決めることができます。 + +ライブサンプルはこのようになります。 + +{{EmbedLiveSample('A_simple_example', '100%', 600)}} + +### グローバルに text-underline-position を設定する + +`text-underline-position` プロパティは継承され、{{cssxref("text-decoration")}} 一括指定プロパティでリセットされないため、グローバルレベルでこの値を設定する方が適切かもしれません。例えば、数多くの化学式や数式があり、下付き文字をたくさん使用している文書では、 `under` の値が適切かもしれません。 + +```css +:root { + text-underline-position: under; +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("text-decoration")}} プロパティは、{{cssxref("text-decoration-line")}}、{{cssxref("text-decoration-color")}}、{{cssxref("text-decoration-style")}} など、ほとんどのテキスト装飾プロパティを設定します。しかし、 `text-underline-position` は設定しません。 +- Microsoft [non-standard values documentation](https://msdn.microsoft.com/en-us/library/ie/ms531176%28v=vs.85%29.aspx) |