知ってた？ナルホド！
知ってそうで知らない!?HTML要素たち最終回です。
今回はもしかしたら、使ったことある！日常の案件でも使えそう！な要素かもしれません。
本日の要素はこちら。
- ruby要素
- sub要素
- sup要素
- time要素
- var要素
なんとなく、使い方が想像できそうな要素が多いですね。
1. ruby要素
ruby要素は文字にルビをふるときに使用します。
ルビとは活字で漢字にふりがなをつけたものです。
ルビの由来をご存知ですか？あの宝石のルビーからきています。
私の誕生石でもあり「情熱」や「仁愛」「威厳」という意味があります。
透明度が高く、濃い赤であるほど高級品として扱われている宝石のルビーです。
ルビの由来は5号活字(10.5pt相当)のふりがなに使用していた大きさが7号活字(5.5pt相当)であり、イギリスではこの7号活字をRubyと読んでいたことが由来なんだそうです。
そんなruby要素は単体で使用するものではなく、dl要素やul要素のように決められた子要素と組み合わせて使用します。
rt要素はRuby Textの略でルビテキストとなり、rp要素はRuby Parenthesesの略でルビを囲む括弧等を指定します。Parenthesesは括弧という意味があります。
ruby要素を使用する上で、rt要素は必須要素となりますが、rp要素は必須ではありません。
但し、rp要素はデフォルトのスタイルでdisplay: none;が適用されているため、表示されることはありません。既にほとんどのブラウザではサポートされていますが、rp要素をサポートしていないブラウザの場合はrp要素内の括弧を表示します。
私の誕生石は紅玉です。
私の誕生石は紅玉です。私の誕生石は紅玉です。
私の誕生石は紅玉です。ruby要素はもともとIE5から使用できましたが、HTML5では標準仕様となりました。
2. sub要素
sub要素はsubscriptの略で、下付きの文字であることを表す要素です。
余談ですが、subscriptは添字という意味であり、本文の脇にある小さい文字や送り仮名のことを示します。尚、プログラムで使用する配列の添字はindexです。
化学式のような、正式な表記として下付き文字にしなければならない場合に使用する要素です。
H2Oのような表記に使用することが適切です。
見栄えでどうしても使用した場合には、span要素などで調整するほうが適切でしょう。
sub要素はデフォルトでvertical-align: sub;が適用されていますので、reset.cssなどでのリセットは避けるようにしています。
H2O3. sup要素
superscriptの略で、上付きの文字であること表す要素です。
スプ、サプ、スーパーと呼ぶようです。私は、スーパーと呼んでいます。
superscriptは上付きという意味なんだそうです。
sub用意と同様に、正式な表記として上付き文字にする場合に使用します。
82= 64
82 = 64sup要素とsub要素については、いざマークアップしようと思うとどっちがどっちかわからなくなってしまう・・・という話を聞いたことがあります。
そんなときは、bとpに注目してみましょう。文字の丸が上下どっちにあるかで見極めてしまえばいいのです。
bなら丸が下についているので下付き文字で、pなら丸が上についているので上付き文字ということになります。
4. time要素
time要素は時間を表す要素で、日付や時刻を正確に表せる場合に使用します。
この要素は検索エンジンなどのコンピュータが正確な日時を理解できるようにする場合に使用します。
datetime属性には日時を表しますが、使用する場合は必ず決められた書式で表す必要があります。
このブログを書いたのは、です。5. var要素
var要素はその名の通り、変数であることを表す要素です。
varはvariableの略です。バルやバーと呼んでいるのをよく耳にします。
私はプログラムの変数をすぐに想像してしまうのですが、数学でも数式の中で変数というものを使ったことがあったかもしれません。
数学はとても苦手でしたので、変数を使ったような気がする・・・だけなのです。
もちろん、プログラムのコードである場合はcode要素を使用します。
y= x2+ 5
y = x2 + 56. まとめ
いかがでしたでしょうか。今回で「知ってそうで知らない!?HTML要素たち」は終わりとなります。
他にも知ってそうで知らない!?要素はたくさんありますので、ぜひ、この機会に基本に振り返ってみてはいかがでしょうか！
前回までの記事もご覧ください。
