用途
新着
履歴
言語


HTML 横書きのふりがな

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
このエントリーをはてなブックマークに追加
LINEでシェア
このページの二次元コード

関連するサンプル

search -  category -  about
© 2020 kipure
Top