CODING

[HTML] ルビを振る方法

投稿日:


どうも、べ〜やんです。

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



ルビを振るとは


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

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

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

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


使い方


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

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

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


おわりに


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



-CODING
-,

執筆者:


comment

関連記事

[CSS] 3点リーダーの作り方

どうも、べ〜やんです。 今回は、3点リーダーの作り方を紹介します。 3点リーダーとは 3点リーダーって知ってますか? 文章が長くて表示仕切れない場合に、はみ出た部分を「…」とピリオド3つで …

[超初心者] HTMLのタグ・要素

どうも、べ〜やんです。 今回は、HTMLのよく使うタグ・要素などをまとめました。 タグとは <html>、<head>、<footer>、<div>など …

HTMLの改行方法

どうも、べ〜やんです。 今回はHTML5で改行する方法を紹介します。 タグが必要 HTML5で改行するためには普段文章を書いている感覚と同じようにEnterで改行はできません。 <p>HT …

[CSS] 自動ナンバリングする方法

どうも、べ〜やんです。 今回は、counterを使って自動でナンバリングする方法を紹介します。 自動ナンバリング 見出しなどに番号をつけて表示する場合に、手動で入力すると面倒ですし途中で順番が変わった …

CSSエフェクト紹介サイト!CSSFX

どうも、べ〜やんです。 今回は、CSSのおしゃれなエフェクトを紹介してくれるサイト『CSSFX』を紹介します。 CSSFXとは 引用元:CSSFX CSSFXはCSSのクリック、ホバー、ローディング時 …