サイトのデザインによっては、ふりがなをもうちょっと小さめにしたい場合もあるかもしれませんね。タイトルとかのふりがなでは、 頭揃えにしたり、お尻揃えにしたいかもしれません。そんなふりがなのスタイルを調整したい時のためのまとめです。 文字サイズと文字間 ルビテキストの文字サイズは、デフォルトだとルビベースの半分の文字サイズ(50%)になってる(下サンプル上段)んですけれど、このサイズは、普段のテキストと同様に、font-sizeプロパティを使って調整することができます。 下のサンプル(下段)では、ルビベースの30%の文字サイズになるように、指定しています:)。 rt { font-size: 30%; } 一方、ふりがなの文字間を調整する場合はというと、普段のテキストと同様にletter-spacingプロパティで調整しようとしても、上手くいきません…。下のサンプルでは、ルビテキストの文字間を
![ふりがなのスタイル](https://cdn-ak-scissors.b.st-hatena.com/image/square/e8ee73bbec50eefdb6ae980e333064df32b62d10/height=288;version=1;width=512/https%3A%2F%2Flopan.jp%2Fruby-elements%2Fstyle%2Fogp.png)