CSSでデザイン調整可能なルビ - Qiita<p><ruby>吾輩<rt>わがはい</rt></ruby>は猫である。名前はまだ無い。</p> <p>どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番<ruby>獰悪<rt>どうあく</rt></ruby>な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。</p> すると、こうなる。 ルビが入ることで行間が変化して、いまいち格好悪い。そして一部のブラウザ（Chromeなど）ではルビの位置をCSS微調整することができず、使いにくい。 別の方法を考える そこで、<ruby>タグを使わないで以下のようにHTMLを組んでみる。 <p><span data-ruby="わがはい">吾輩</span>は猫である。名前はまだ無い
