`ruby-align` CSS プロパティ

Baseline 2024

Newly available

Since December 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

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

構文

css

/* キーワード値 */
ruby-align: start;
ruby-align: center;
ruby-align: space-between;
ruby-align: space-around;

/* グローバル値 */
ruby-align: inherit;
ruby-align: initial;
ruby-align: revert;
ruby-align: revert-layer;
ruby-align: unset;

値

start: ルビをベーステキストの先頭に揃えることを示すキーワードです。
center: ルビをベーステキストの中央に揃えることを示すキーワードです。
space-between: ルビの各要素の間に、余白を配分することを示すキーワードです。
space-around: ルビの各要素の間と、その周囲に余白を配分することを示すキーワードです。

公式定義

初期値	`space-around`
適用対象	ルビベース、ルビ注釈、ルビベースコンテナー、ルビ注釈コンテナー
継承	あり
計算値	指定通り
アニメーションの種類	計算値の型による

形式文法

ruby-align = 
  start          |
  center         |
  space-between  |
  space-around

例

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

HTML

html

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

CSS

css

ruby {
  ruby-align: start;
}

結果

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

HTML

html

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

CSS

css

ruby {
  ruby-align: center;
}

結果

ルビ要素の範囲内に余白を配分する

HTML

html

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

CSS

css

ruby {
  ruby-align: space-between;
}

結果

ルビ要素内および周囲に余白を配分する

HTML

html

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

CSS

css

ruby {
  ruby-align: space-around;
}

結果

仕様書

Specification
CSS Ruby Annotation Layout Module Level 1 # ruby-align-property

ブラウザーの互換性

Help improve MDN

Learn how to contribute

This page was last modified on 2026年4月27日 by MDN contributors.

View this page on GitHub • Report a problem with this content

ruby-align CSS プロパティ

HTML

CSS

結果

HTML

CSS

結果

HTML

CSS

結果

HTML

CSS

結果

Help improve MDN

`ruby-align` CSS プロパティ