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-align/index.md | 185 ++++++++++++++++++----------------- 1 file changed, 96 insertions(+), 89 deletions(-) (limited to 'files/ja/web/css/ruby-align') 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")}} -- cgit v1.2.3-54-g00ecf