【CSS Modules】ruby-overhangプロパティの使い方
ruby-overhangプロパティの使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
ruby-overhangプロパティは、Webページ上でルビ注釈（ふりがななど）が表示される際に、そのルビテキストが親要素のコンテンツからはみ出す挙動を制御するためのプロパティです。ルビとは、漢字の上にひらがなでふりがなを振るなど、特定のテキスト（ルビベース）に小さな補助テキスト（ルビテキスト）を付与する表現方法を指します。
このプロパティは、特にルビテキストがルビベースの幅よりも長くなる場合や、複数のルビ要素が隣接して表示される場合に、ルビテキストが隣接するテキストや要素と重なってしまわないよう、あるいは適切にスペースを確保して表示されるよう調整する役割を持ちます。これにより、ルビテキストの可読性を保ちながら、ページのレイアウトが崩れるのを防ぐことができます。
主な設定値としては、「auto」「none」「whitespace」「start」「end」「any」などがあります。例えば、「auto」はブラウザのデフォルトの振る舞いに任せ、「none」はルビテキストのはみ出しを許可しません。「whitespace」を設定すると、ルビテキストとルビベースの間に空白がある場合、その空白のみがはみ出すことを許可します。「start」や「end」はルビの開始側、または終了側のみのはみ出しを許可し、「any」は両側のはみ出しを許可します。これらの値を使用することで、ルビの表示に関する細かなデザイン要求に対応し、ユーザーにとって読みやすい文書構造を実現するために役立ちます。
公式リファレンス: ruby-overhang
構文(syntax)
1ruby-overhang: auto;
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません