こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
日本語Webページを扱っていると、ルビ（ふりがな）を使いたくなるシーンって意外と多いですよね。
たとえば
- 子ども向けの教育コンテンツ
- 文学作品や詩のWeb再現
- 和風デザインや縦書きブログ
HTMLの タグは便利ですが、ルビの表示位置や揃え方を調整したいと思ったことはありませんか？
そんなときに使えるのが、CSSの ruby-align と ruby-position という2つのプロパティです。
まず基本：HTMLでのルビ記法
基本的なルビの記述方法は以下の通りです。
<ruby> 漢字 <rt>かんじ</rt> </ruby> この状態でも表示はされますが、デフォルトの位置や揃え方はブラウザ任せです。
そこで登場するのが ruby-align と ruby-position です。
ruby-align：ルビの文字揃えを調整
ruby-align は、ベース文字（漢字など）とルビ（ふりがな）の長さが異なるときの揃え方を指定するプロパティです。主な値と意味
- start：ルビを左揃え（横書き）／上揃え（縦書き）
- center：ルビを中央揃え
- space-around：ベース文字に合わせてルビを均等配置
- space-between：ベースの両端にルビを合わせる
CSS記述例
ruby {
ruby-align: center;
} ルビが長くても、ベースの文字数ときれいにバランスがとれるようになります。
ruby-position：ルビの位置を上下・左右で指定
ruby-position は、ルビをどこに表示するか（上下 or 左右）を指定します。主な値
- over：横書きでは上／縦書きでは右側に表示
- under：横書きでは下／縦書きでは左側に表示
- inter-character：ベース文字の間に分散して表示（高度な制御）
CSS記述例（縦書き用）
.vertical-ruby {
writing-mode: vertical-rl;
ruby-position: under;
} 縦書きのときに、ルビを左側に置きたい場合は under を指定すればOKです。
右側にしたい場合は over にすれば切り替わります。
縦書き＋ルビの実装例
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
このように書くと、縦書きで左側にルビを整然と配置できます。
特に教育系や詩的表現で縦組み×ルビのコンテンツを作るときに便利です。
まとめ
CSSの ruby-align と ruby-position を使えば、日本語Webタイポグラフィのクオリティが大きく向上します。
- 横書き・縦書きどちらにも対応したルビの配置が可能
- 揃え・位置を自在にコントロールできる
- 教育・文化・出版系のサイトで特に活躍
美しく読みやすいふりがな表示を目指すなら、CSSのルビ調整プロパティは今後のスタンダードです。
縦書きWeb表現の可能性をもっと広げてみませんか？
satokotadesignキャンペーン実施中！
