このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

`ruby-position` CSS プロパティ

Baseline 2024 *

試してみましょう

ruby-position: over;

ruby-position: under;

<section id="default-example">
 <ruby id="example-element"> 明日 <rp>(</rp><rt>あした</rt><rp>)</rp> </ruby>
</section>

#example-element {
 font-size: 2em;
}

構文

css

/* キーワード値 */
ruby-position: over;
ruby-position: under;
ruby-position: alternate;
ruby-position: alternate over;
ruby-position: alternate under;
ruby-position: inter-character;
/* グローバル値 */
ruby-position: inherit;
ruby-position: initial;
ruby-position: revert;
ruby-position: revert-layer;
ruby-position: unset;

値

over: [画像:over の例] ルビを主テキストの上(横書きの場合)または右(縦書きの場合)に配置することを示すキーワードです。
under: [画像:under の例] ルビを主テキストの下(横書きの場合)または左(縦書きの場合)に配置することを示すキーワードです。
alternate: 複数のレベルの注釈があった場合に、ルビが上と下の間で交互に表示されることを示すキーワードです。
inter-character: 指定された場合、縦書きモードでは over として動作します。それ以外の場合、ルビを異なる文字の間に配置するため、横書きテキストの場合はベーステキストの右側に現れ、ルビ表記コンテナーの子は強制的に書字方向が vertical-rl になります。

公式定義

初期値	`alternate`
適用対象	ルビ注釈コンテナー
継承	あり
計算値	指定通り
アニメーションの種類	離散値

形式文法

ruby-position = 
 [ alternate || [ over | under ] ] | 
 inter-character

例

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

HTML

html

<ruby>
 <rb>超電磁砲</rb>
 <rp>(</rp><rt>レールガン</rt><rp>)</rp>
</ruby>

CSS

css

ruby {
 ruby-position: over;
}

結果

[フレーム]

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

HTML

html

<ruby>
 <rb>超電磁砲</rb>
 <rp>(</rp><rt>レールガン</rt><rp>)</rp>
</ruby>

CSS

css

ruby {
 ruby-position: under;
}

結果

[フレーム]

交互のルビ

HTML

html

<ruby>
 <rb>A</rb><rb>B</rb><rb>C</rb>
 <rtc>Above</rtc>
 <rtc>Below</rtc>
</ruby>

CSS

css

ruby {
 ruby-position: alternate; /* 初期値でもある */
}

結果

[フレーム]

仕様書

仕様書
CSS Ruby Annotation Layout Module Level 1 # rubypos

ブラウザーの互換性

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって 2026年4月27日に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告

ruby-position CSS プロパティ

HTML

CSS

結果

HTML

CSS

結果

HTML

CSS

結果

MDN の改良に協力

`ruby-position` CSS プロパティ