HTML 横書きのふりがな

文字の上にふりがな（ルビ）を付けたいときに使えるrubyタグのサンプルです。

漢字の読み方を記述するときにふりがなを使います。

HTMLではふりがな用のタグが用意されてます。

ふりがなは概ねのブラウザで横書きの上に配置されます。

猫ねこを描えがく

<div class="demo_furigana">
    <ruby>
        猫<rt>ねこ</rt>
    </ruby>
    を
    <ruby>
        描<rt>えが</rt>
    </ruby>
    く
</div>

ふりがなを文字の下に配置するCSSもありますが、2020年1月現在FireFoxとEdgeしか対応していないようです。

猫ねこを描えがく

    .demo_furigana2 ruby{
        ruby-position:under;
    }

このようなCSSがあたっています。

下への配置が対応してないブラウザは通常どおり上に配置されます。

さて、普通のふりがなもどんな応用ができるでしょう。

例えばこんな当て字。

あの男アイツは本気ガチの好敵手ライバルだ

道路標識風なローマ字のふりがなもできます。

東京Tokyo

漢字もふりがなにできます。

Apple林檎 Lemon檸檬 Rose薔薇

ふりがなも応用すれば、いろいろなテキストの演出になりそうです。

公開 2019-12-28 23:05:25
更新 2020-01-05 21:49:49

このページの二次元コード

人気のサンプル