用途
新着
履歴
分類

HTML 横書きのふりがな

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
このページの二次元コード
HTML 横書きのふりがな

人気のサンプル

search -  category -  about
© 2024 kipure
Top