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/css_ruby/index.md | 56 +++------- files/ja/web/css/ruby-align/index.md | 185 +++++++++++++++++--------------- files/ja/web/css/ruby-position/index.md | 160 +++++++++++++++------------ 3 files changed, 199 insertions(+), 202 deletions(-) (limited to 'files/ja/web/css') diff --git a/files/ja/web/css/css_ruby/index.md b/files/ja/web/css/css_ruby/index.md index 4e0f0119c1..93693dc1b6 100644 --- a/files/ja/web/css/css_ruby/index.md +++ b/files/ja/web/css/css_ruby/index.md @@ -3,55 +3,25 @@ title: CSS ルビレイアウト slug: Web/CSS/CSS_Ruby tags: - CSS - - CSS ルビレイアウト - - Reference + - CSS ルビ + - ガイド - 概要 + - Reference translation_of: Web/CSS/CSS_Ruby --- -
{{CSSRef}}
- -

CSS ルビレイアウト (CSS Ruby Layout) は CSS のモジュールの一つで、ルビ表記の表示に関するレンダリングモデルや整形の制御を提供します。ルビ表記は行間の表記の一種で、ベーステキストに沿った短いテキストで構成されます。これらはふつう東アジアの文書で、発音を示したり、短い説明を提供したりするために使用されます。

- -

リファレンス

- -

プロパティ

- -
- -
- -

仕様書

+{{CSSRef}} - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Ruby')}}{{Spec2('CSS3 Ruby')}}初回定義
+**CSS ルビレイアウト** (CSS Ruby Layout) は [CSS](/ja/docs/Web/CSS) のモジュールの一つで、ルビ表記の表示に関するレンダリングモデルや整形の制御を提供します。ルビ表記は行間の表記の一種で、ベーステキストに沿った短いテキストで構成されます。これらはふつう東アジアの文書で、発音を示したり、短い説明を提供したりするために使用されます。 -

ブラウザーの対応

+## リファレンス -

ruby-align プロパティ

+### プロパティ -
-

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

+- {{cssxref("ruby-align")}} +- {{cssxref("ruby-position")}} -

ruby-position プロパティ

+## 仕様書 -
-

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

-
-
+| 仕様書 | 状態 | 備考 | +| ------------------------- | ---------------------- | -------- | +| {{SpecName('CSS3 Ruby')}} | {{Spec2('CSS3 Ruby')}} | 初回定義 | diff --git a/files/ja/web/css/ruby-align/index.md b/files/ja/web/css/ruby-align/index.md index d50ed7d827..616afedb31 100644 --- a/files/ja/web/css/ruby-align/index.md +++ b/files/ja/web/css/ruby-align/index.md @@ -6,13 +6,16 @@ tags: - CSS プロパティ - CSS ルビ - Reference + - recipe:css-property +browser-compat: css.properties.ruby-align translation_of: Web/CSS/ruby-align --- -
{{CSSRef}}{{SeeCompatTable}}
+{{CSSRef}} -

CSS の ruby-align プロパティは、ベースに対するさまざまなルビの配分を定義します。

+**`ruby-align`** は CSS のプロパティで、ベースに対するさまざまなルビの配分を定義します。 -
/* キーワード値 */
+```css
+/* キーワード値 */
 ruby-align: start;
 ruby-align: center;
 ruby-align: space-between;
@@ -21,130 +24,134 @@ ruby-align: space-around;
 /* グローバル値 */
 ruby-align: inherit;
 ruby-align: initial;
+ruby-align: revert;
 ruby-align: unset;
-
+``` -

{{cssinfo}}

+## 構文 -

構文

+### 値 -

値

+- `start` + - : ルビをベーステキストの始点に揃えることを示すキーワードです。 +- `center` + - : ルビをベーステキストの中央に揃えることを示すキーワードです。 +- `space-between` + - : ルビの要素の範囲内に配分するよう、スペースを付加することを示すキーワードです。 +- `space-around` + - : ルビの要素の範囲内に配分するよう、スペースを付加することを示すキーワードです。また、ルビの周囲にもスペースを付加します。 -
-
start
-
ルビをベーステキストの始点に揃えることを示すキーワードです。
-
center
-
ルビをベーステキストの中央に揃えることを示すキーワードです。
-
space-between
-
ルビの要素の範囲内に配分するよう、スペースを付加することを示すキーワードです。
-
space-around
-
ルビの要素の範囲内に配分するよう、スペースを付加することを示すキーワードです。また、ルビの周囲にもスペースを付加します。
-
+## 公式定義 -

形式文法

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

例

+## 例 -

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

+

ルビをベーステキストの先頭に揃える

-
<ruby>
-  <rb>確認用の長いテキスト</rb>
-  <rp>（</rp><rt>短いルビ</rt><rp>）</rp>
-</ruby>
-
+#### HTML -

ルビをベーステキストの始点に揃える

+```html + + 確認用の長いテキスト + （短いルビ） + +``` - +#### CSS -
ruby {
+```css
+ruby {
   ruby-align: start;
-}
+} +``` + +#### 結果 -

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

+{{EmbedLiveSample("Ruby_aligned_at_the_start_of_the_base_text", 180, 40)}} -

{{EmbedLiveSample("Ruby_aligned_at_the_start_of_the_base_text", 180, 40)}}

+

ルビをベーステキストの中央に揃える

-

ルビをベーステキストの中央に揃える

+#### HTML - +```html + + 確認用の長いテキスト + （短いルビ） + +``` -
ruby {
+#### CSS
+
+```css
+ruby {
   ruby-align: center;
-}
+} +``` + +#### 結果 -

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

+{{EmbedLiveSample("Ruby_aligned_at_the_center_of_the_base_text", 180, 40)}} -

{{EmbedLiveSample("Ruby_aligned_at_the_center_of_the_base_text", 180, 40)}}

+

ルビ要素の範囲内にスペースを配分する

-

ルビ要素の範囲内にスペースを配分する

+#### HTML - +```html + + 確認用の長いテキスト + （短いルビ） + +``` -
ruby {
+#### CSS
+
+```css
+ruby {
   ruby-align: space-between;
-}
+} +``` + +#### 結果 + +{{EmbedLiveSample("Extra_space_distributed_between_ruby_elements", 180, 40)}} -

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

+

ルビ要素内および周囲にスペースを配分する

-

{{EmbedLiveSample("Extra_space_distributed_between_ruby_elements", 180, 40)}}

+#### HTML -

ルビ要素内および周囲にスペースを配分する

+```html + + 確認用の長いテキスト + （短いルビ） + +``` - +#### CSS -
ruby {
+```css
+ruby {
   ruby-align: space-around;
-}
+} +``` -

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

+#### 結果 -

{{EmbedLiveSample("Extra_space_distributed_between_and_around_ruby_elements", 180, 40)}}

+{{EmbedLiveSample("Extra_space_distributed_between_and_around_ruby_elements", 180, 40)}} -

仕様書

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

ブラウザーの対応

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

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

+{{Compat}} -

関連情報

+## 関連情報 - +- HTML のルビ関連要素: {{HTMLElement("ruby")}}, {{HTMLElement("rt")}}, {{HTMLElement("rp")}}, {{HTMLElement("rtc")}} +- CSS のルビ関連プロパティ: {{cssxref("ruby-position")}}, {{cssxref("ruby-merge")}} 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