From 99db2cf0599541ce2730427d4f67606a18570cbe Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 13 Oct 2021 01:52:53 +0900 Subject: CSS ルビレイアウトの各文書を更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/10/11 時点の英語版に同期 --- files/ja/web/css/ruby-position/index.md | 160 ++++++++++++++++++-------------- 1 file changed, 90 insertions(+), 70 deletions(-) (limited to 'files/ja/web/css/ruby-position') diff --git a/files/ja/web/css/ruby-position/index.md b/files/ja/web/css/ruby-position/index.md index 6cb66cd58d..dc12a3ee96 100644 --- a/files/ja/web/css/ruby-position/index.md +++ b/files/ja/web/css/ruby-position/index.md @@ -5,111 +5,131 @@ tags: - CSS - CSS プロパティ - CSS ルビ - - リファレンス + - Reference + - recipe:css-property +browser-compat: css.properties.ruby-position translation_of: Web/CSS/ruby-position --- -
{{CSSRef}}{{SeeCompatTable}}
+{{CSSRef}} -

CSS の ruby-position プロパティは、ベース要素に対するルビ要素の位置を定義します。要素の上方 (over)、下方 (under)、文字の間の右側 (inter-character) に配置できます。

+**`ruby-position`** は CSS のプロパティで、ベース要素に対するルビ要素の位置を定義します。要素の上方 (`over`)、下方 (`under`)、文字の間の右側 (`inter-character`) に配置できます。 -
/* キーワード値 */
+## 構文
+
+```css
+/* キーワード値 */
 ruby-position: over;
 ruby-position: under;
 ruby-position: inter-character;
+ruby-position: alternate;
 
 /* グローバル値 */
 ruby-position: inherit;
 ruby-position: initial;
+ruby-position: revert;
 ruby-position: unset;
-
+``` -

{{cssinfo}}

+### 値 -

構文

+- `over` + - : ![over の例](screen_shot_2015-03-04_at_13.02.20.png)ルビを主テキストの上 (横書きの場合) または右 (縦書きの場合) に配置することを示すキーワードです。 +- `under` + - : ![under の例](screen_shot_2015-03-04_at_13.02.07.png)ルビを主テキストの下 (横書きの場合) または左 (縦書きの場合) に配置することを示すキーワードです。 +- `inter-character` + - : ルビをそれぞれの文字の間に配置することを示すキーワードです。 +- `alternate` + - : 複数のレベルの注釈があった場合に、ルビが上と下の間で交互に表示されることを示すキーワードです。 -

値

+## 公式定義 -
-
over
-
over の例ルビをメインテキストの上 (横書きの場合) または右 (縦書きの場合) に配置することを示すキーワードです。
-
under
-
under の例ルビをメインテキストの下 (横書きの場合) または左 (縦書きの場合) に配置することを示すキーワードです。
-
inter-character
-
ルビをそれぞれの文字の間に配置することを示すキーワードです。
-
+{{cssinfo}} -

形式文法

+## 形式文法 {{csssyntax}} -

例

+## 例 + +

テキストの上に配置したルビ

+ +#### HTML + +```html + + 超電磁砲 + （レールガン） + +``` + +#### CSS + +```css +ruby { +    ruby-position:over; +} +``` + +#### 結果 + +{{EmbedLiveSample("Ruby_positioned_over_the_text", 100, 40)}} + +

テキストの下に配置したルビ

+ +#### HTML -

この HTML は、 ruby-position のそれぞれの値でレンダリングします。

+```html + + 超電磁砲 + （レールガン） + +``` -
<ruby>
-  <rb>超電磁砲</rb>
-  <rp>（</rp><rt>レールガン</rt><rp>）</rp>
-</ruby>
-
+#### CSS -

テキストの上に配置したルビ

+```css +ruby { +    ruby-position:under; +} +``` - +#### 結果 -
ruby {
-    ruby-position:over;
-}
+{{EmbedLiveSample("Ruby_positioned_under_the_text", 100, 40)}} -

結果は以下のとおりです。

+

交互のルビ

-

{{EmbedLiveSample("Ruby_positioned_over_the_text", 100, 40)}}

+#### HTML -

テキストの下に配置したルビ

+```html + + ABC + Above + Below + +``` - +#### CSS -
ruby {
-    ruby-position:under;
-}
+```css +ruby { +    ruby-position: alternate; /* 初期値でもある */ +} +``` -

結果は以下のとおりです。

+#### 結果 -

{{EmbedLiveSample("Ruby_positioned_under_the_text", 100, 40)}}

+{{EmbedLiveSample("Ruby_alternate", 100, 40)}} -

仕様書

+## 仕様書 - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Ruby', '#rubypos', 'ruby-position')}}{{Spec2('CSS3 Ruby')}}初回定義
+{{Specifications}} -

ブラウザーの対応

+## ブラウザーの互換性 -

{{Compat("css.properties.ruby-position")}}

+{{Compat}} -

関連情報

+## 関連情報 - +- HTML のルビ関連要素: {{HTMLElement("ruby")}}, {{HTMLElement("rt")}}, {{HTMLElement("rp")}}, {{HTMLElement("rtc")}} +- CSS のルビ関連プロパティ: {{cssxref("ruby-align")}}, {{cssxref("ruby-merge")}} -- cgit v1.2.3-54-g00ecf