CODING

[HTML] ルビを振る方法

投稿日:


どうも、べ〜やんです。

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



ルビを振るとは


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

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

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

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


使い方


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

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

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


おわりに


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



-CODING
-,

執筆者:


comment

関連記事

[CSS] CSSで縦書きにする方法

どうも、べ〜やんです。 今回は、CSSで簡単にテキストを縦書きにする方法を紹介します。 和風のデザインやサイドにメニューバーを配置する時などに便利です。 縦書きデザイン 和風テイストのデザインやサイド …

[超初心者] CSSとは

どうも、べ〜やんです。 HTMLに続き超初心者の方用に、マークアップ言語のCSSとはついて書きます。 CSSとは何か? CSSとは、Cascading Style Sheets(カスケーディング・スタ …

[CSS] CSSで背景色と文字色を半々にする方法

どうも、べ〜やんです。 今回は、CSSで背景色と文字色が半々で入れ替わるようなデザインの作り方を紹介します。 おしゃれなデザイン 背景色と文字色が半々で入れ替わるような表現が出来ると、一段とおしゃれな …

[CSS] CSSで文字に影をつける方法

どうも、べ〜やんです。 今回は、CSSで文字に影やアウトラインをつける方法を紹介します。 text-shadow text-shadowは文字に影をつけるプロパティです。 値は4つ使用します。 {te …

[CSS] CSSで吹き出し風デザイン・三角形

どうも、べ〜やんです。 今回は、三角形の作り方と吹き出し風のデザインの作り方を紹介します。 三角形がぴょこって付いているアレです。 三角形 まずはCSSで三角形を作る方法をざっくり紹介します。 三角形 …