最終更新日 2021年6月26日

ruby-positionプロパティ

ruby-positionは、ルビの位置を指定するプロパティです。指定できる値は「before」「after」「inter-character」「inline」のいずれかです。

ruby-positionを指定できる要素は、rt要素を持つruby要素のように、「display: ruby-text;」状態の要素を子に持つ要素です。

以下は、関連プロパティです。

CSS3での変更点

・ruby-positionは、CSS3から新しく追加されたプロパティです。

初期値	適用先	継承
before	「display: ruby-text;」状態の要素を子に持つ要素（ruby要素）	あり

値	説明
before	横書きの場合は上側に、縦書きの場合は右側にルビを表示します。（初期値）
after	横書きの場合は下側に、縦書きの場合は左側にルビを表示します。
inter-character	1文字ずつ、文字の右側にルビを表示します。
inline	ルビを適用しないのと同じように、テキストの右側にルビを表示します。

サンプルコード

ruby{
	ruby-position: before;
	ruby-position: after;
	ruby-position: inter-character;
	ruby-position: inline;
	}

ザマワンにエントリーしました！

『ザマワン』は「座間ワンミニッツ」の略称であり、座間市の魅力を１分にギュッと詰め込む動画コンテストです。