CODING

[HTML] ルビを振る方法

投稿日:


どうも、べ〜やんです。

今回こんかいは、HTMLでルビを方法ほうほう紹介しょうかいします。



ルビを振るとは


ご存知の方がほとんどだと思いますが、ルビとは(ふりがな)のことです。

なんで(ふりがな)がルビなんだよと思って調べてみると、宝石のルビーからきてるらしいですね。

昔イギリスでは活字の大きさ別に宝石の名前をつけて読んでいたそうで、ふりがなに丁度いい大きさの活字がルビーと呼ばれていたそうです。

HTMLには、ruby要素を使ってルビを振ることができます。


使い方


<ruby>要素で囲み、ふりがな部分は<rt>で囲んで記述します。

<rt>とはRuby Textの略です。

See the Pen dyyrZyM by beeyan (@orientado) on CodePen.


おわりに


今回は、HTMLでルビを振る方法を紹介しました。



-CODING
-,

執筆者:


comment

関連記事

[CSS] white-spaceの使い方/空白・改行

どうも、べ〜やんです。 今回は、半角スペースや改行の表示を指定するプロパティのwhite-spaceを紹介します。 white-spaceとは white-spaceとはHTMLに書いた半角スペースや …

[CSS] :beforeと:afterでハンバーガーメニューを作る

どうも、べ〜やんです。 今回は、:beforeと:afterでハンバーガーメニューを作る方法を紹介します。 :beforeと:afterを使った方法 以前spanを使ったハンバーガーメニューの作り方も …

[css] 横並び、flexboxの使い方

どうも、べ〜やんです。 今回は、CSSで要素を横並びにする方法のflexboxの基本的な使い方を紹介します。 flexboxとは? 要素を横並びに配置する方法のひとつに、flexboxがあります。 f …

[超初心者] HTMLとは

どうも、べ〜やんです。 webデザインやプログラミングを学びはじめたとき、最初にHTMLとCSSから学ぶ人が多いのではないでしょうか?私も一番最初にHTMLから学びました。ということで、今回はHTML …

[CSS] 変化Transitionの使い方

どうも、べ〜やんです。 今回は、変化の詳細を指定するTransitionを紹介します。 CSSだけで設定できるので初心者の方にもおすすめですよ。 Transitionとは transitionとは:h …