diff options
Diffstat (limited to 'files/ja/web/css/text-emphasis-position/index.html')
| -rw-r--r-- | files/ja/web/css/text-emphasis-position/index.html | 141 |
1 files changed, 0 insertions, 141 deletions
diff --git a/files/ja/web/css/text-emphasis-position/index.html b/files/ja/web/css/text-emphasis-position/index.html deleted file mode 100644 index 7ba827b564..0000000000 --- a/files/ja/web/css/text-emphasis-position/index.html +++ /dev/null @@ -1,141 +0,0 @@ ---- -title: text-emphasis-position -slug: Web/CSS/text-emphasis-position -tags: - - CSS - - CSS テキスト装飾 - - CSS プロパティ - - Reference -translation_of: Web/CSS/text-emphasis-position ---- -<div>{{CSSRef}}</div> - -<p><a href="/ja/docs/Web/CSS" title="CSS">CSS</a> の <strong><code>text-emphasis-position</code></strong> プロパティは、圏点が描かれる位置を設定します。ルビテキストと同様、圏点のために十分な空間がない場合は、行の高さが広げられます。</p> - -<pre class="brush:css no-line-numbers">/* 初期値 */ -text-emphasis-position: over right; - -/* キーワード値 */ -text-emphasis-position: over left; -text-emphasis-position: under right; -text-emphasis-position: under left; - -text-emphasis-position: left over; -text-emphasis-position: right under; -text-emphasis-position: left under; - -/* グローバル値 */ -text-emphasis-position: inherit; -text-emphasis-position: initial; -text-emphasis-position: unset; -</pre> - -<p>{{cssinfo}}</p> - -<h2 id="Preferred_position" name="Preferred_position">望ましい位置</h2> - -<p>圏点の望ましい位置は言語に依存します。例えば日本語では、望ましい位置は <span class="css">over right</span> です。一方中国語では、望ましい位置は <span class="css">under right</span> となります。下記の情報の表は、日本語、モンゴル語、中国語における望ましい圏点の位置を要約するものです。</p> - -<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> -</table> - -<div class="note"> -<p><strong>メモ</strong>: {{cssxref("text-emphasis")}} 一括指定プロパティを使用して、 <code>text-emphasis-position</code> を設定することはできず、また初期化されることもありません。</p> -</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<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> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Examples" name="Examples">例</h2> - -<p>編集者によっては、ルビと競合する場合に圏点を隠すことを好みます。 HTML では、これは次のスタイル規則で実現できます。</p> - -<pre class="brush: css">ruby { - text-emphasis: none; -} -</pre> - -<p>編集者によっては、圏点と競合する場合にルビを隠すことを好みます。 HTML では、これは次のパターンで実現できます。</p> - -<pre class="brush: css">em { - text-emphasis: dot; /* <em> 要素に text-emphasis を設定 */ -} - -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> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("css.properties.text-emphasis-position")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>個別指定プロパティ {{cssxref("text-emphasis-style")}}, {{cssxref("text-emphasis-color")}} および対応する一括指定プロパティ {{cssxref("text-emphasis")}}</li> -</ul> |
