【CSS Modules】ruby-positionプロパティの使い方
ruby-positionプロパティの使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
ruby-positionプロパティは、HTMLコンテンツ内でルビ（ruby）文字、つまり親文字に付随する小さな注釈や振り仮名などの表示位置を制御するための情報を保持するプロパティです。このプロパティを使用することで、ベースとなるテキスト（親文字）に対するルビがどこに配置されるかを指定し、テキストのレイアウトと読みやすさを向上させることができます。
具体的には、ルビを親文字の上、下、または文字の間に配置するかどうかを設定できます。例えば、aboveという値を指定すると、ルビは親文字の真上に表示され、日本語の一般的な振り仮名と同じ形式になります。belowという値を指定すると、親文字の真下にルビが表示されます。また、inter-characterという値を指定すると、ルビは親文字の個々の文字の間に配置され、主に縦書きのテキストにおけるルビの表示に適しています。
このプロパティは、通常HTMLの<ruby>、<rt>（ルビテキスト）、<rp>（ルビ括弧）といった要素と組み合わせて使用されます。日本語のウェブサイトで漢字に振り仮名を振ったり、中国語のテキストにピンインを付けたりする際に、ルビの表示形式を細かく調整したい場合に非常に有用です。ウェブページのデザインや多言語対応において、ルビの視覚的な整合性とアクセシビリティを確保するために重要な役割を果たします。
公式リファレンス: ruby-position
構文(syntax)
1ruby-position: over;
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません