【CSS Modules】ruby-alignプロパティの使い方

ruby-alignプロパティは、HTMLの<ruby>要素を用いて表示されるルビ（ふりがな）と、その基となるベーステキスト（親文字）の相対的な配置を調整するためのCSSプロパティです。このプロパティは、ルビとベーステキストの長さの違いに関わらず、見た目を整え、文章の可読性を高めることを目的としています。

具体的には、ルビがベーステキストに対してどのように表示されるかを制御します。例えば、「start」はルビの開始位置とベーステキストの開始位置を合わせ、「center」は両者を中央で揃え、「end」は終了位置を合わせるように配置します。さらに、「space-between」や「space-around」といった値を指定することで、ルビの文字列がベーステキストの幅全体に広がるよう、ルビ文字間のスペースを調整することも可能です。

このようにruby-alignプロパティを利用することで、特に日本語のようにふりがなを必要とする言語において、ルビの表示を細かく制御できます。これにより、ウェブコンテンツの視認性と美しさを高め、読みやすいテキスト表現を実現するために重要な役割を担います。

Copy
1.ruby-container {
2  ruby-align: center;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません