rubyタグとrtタグの二つを使ってテキストにルビ（ふりがな）を振ります。rtタグはふりがな、rubyタグはテキストとふりがな（rtタグを含む）の両方を囲います。
<p><ruby>蜜柑<rt>みかん</rt></ruby></p>ふりがなはテキスト全体に対し均等割り付けで表示されます。1文字ごとにルビを振りたい場合は文字の直後にrtタグをそれぞれ設定します。
<p><ruby>蜜<rt>み</rt>柑<rt>かん</rt></ruby></p>2020.07.05
rubyタグでテキストにルビ（ふりがな）を振る
関連記事
2022.08.30
linear-gradientを利用した文字の下線
background-imageプロパティのlinear-gradientを利用して複数行の文字に下線を引きます。複数行に対応させるため、inline要素に適用…
2021.12.01
transformプロパティのskewで写真を傾斜変形
transformプロパティのskewで写真を傾斜変形させます。単純に傾斜変形させるだけでは写真がゆがみ左右がコンテンツの外側にはみ出してしまうので、それも調整…
2021.08.26
svgをCSSのbackground-imageに指定
svgをCSSのbackground-imageに指定します。IE11への対応で書き方が変わりますが、今回はIE11にも対応させます。svgのコードは以下の通り…
2024.08.19
縦書き文字の配置について
縦書きの文字を写真の左上・左中・左下・右上・右中・右下に配置します。デモページはこちら 以下のhtml構造で確認します。 CSSはpositionとtransf…
2020.08.19
iOS Safariのツールバーと表示エリアの挙動
iOS Safariで表示される画面下部のツールバーは、下にスクロールすると非表示になります。正確には上部のアドレスバーが小さくなり、下部のツールバーが消えます…