CODING

[HTML] ルビを振る方法

投稿日:


どうも、べ〜やんです。

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



ルビを振るとは


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

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

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

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


使い方


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

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

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


おわりに


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



-CODING
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

[CSS] 変化Transitionの使い方

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

[HTML] 表を作るtable

どうも、べ〜やんです。 今回はHTMLでtableタグを使って表を作る方法を紹介します。 表の例 表を使う 表を使うと伝えたい情報を分かりやすく伝えることができます。 HTMLには簡単に表を作れる便利 …

[超初心者] HTMLの書き方

どうも、べ〜やんです。 今回は、HTMLの書き方の基本的なルールをざっくりと確認していきます。 以下のHTML文をざっくり説明します。 <!DOCTYPE html> <html&g …

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

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

爆速!!Emmetを使う

どうも、べ〜やんです。 今回は、コーディングのスピードが抜群に速くできる方法のEmmetの使い方を紹介します。 Emmetとは HTMLやCSSを記述するときに全て手打ちしていると時間がかかってしまい …