CODING

[HTML] ルビを振る方法

投稿日:


どうも、べ〜やんです。

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



ルビを振るとは


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

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

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

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


使い方


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

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

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


おわりに


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



-CODING
-,

執筆者:


comment

関連記事

[jQuery] jQueryでハンバーガーメニューを作る

どうも、べ〜やんです。 今回は、jQueryを使ってハンバーガーメニューを作る方法を紹介します。 ハンバーガーメニューとは ハンバーガーメニューとは、例えばヘッダーのメニューを隠しておいてアイコンをク …

[HTML] リストの作り方ul・ol・liタグ

どうも、べ〜やんです。 今回はHTMLでリストや箇条書きをざっくり作る方法を紹介します。 リストとは ul・ol・liタグを使うとリストや箇条書きを作ることができます。 目次や手順、メニュー、スライド …

[css] Flexboxの子要素

どうも、べ〜やんです。 今回は、Flexboxの使い方の子要素に使うプロパティを紹介します。 横並び、親要素についてはこちら↓ [css] 横並び、flexboxの使い方 flexboxの種類 (子要 …

[css] font-sizeの種類

どうも、べ〜やんです。 今回は、CSSで指定するフォントサイズの種類と簡単な使い方をまとめて紹介します。 フォントサイズの種類 フォントサイズを適当に決めてませんか?なんとなくpxだけを使ってませんか …

[HTML] 特殊文字で空白スペース

どうも、べ〜やんです。 今回は、特殊文字を使って空白スペースを挿入する方法を紹介します。 空白スペース htmlではひとつの半角スペースは空白スペースとして使用できますが、連続した半角スペースはひとつ …