33歳主婦プログラマーを目指す

33歳主婦がプログラマーを目指してあれこれ奮闘する日記です

略語、名前の特記、住所の表現について

本日の教材動画はこちら 

<abbr>タグ

「ここは略語ですよ~」ということを知らせるタグ。使い方は<addr></addr>。ただこれだけでは見た目上何も変化が起きないため、後述するタグとセットで使う。

<title>属性について

<abbr>タグだけでは何も起きないので、一緒に「略語の元はこれですよ~」というタグをつけてあげる必要がある。それがこのtitle属性で、使い方は<abbr title="省略前の単語"></abbr>となる。

 

title属性をつけてあげることにより、abbrタグで囲んだ文字にカーソルを合わせると省略前の単語が見えるようになる(マウスオーバーすることでtitleで入力した単語が表示される)

 

ちなみに動画では「見た目はかわりませんが~…」と言っていたが、私の環境下ではabbr指定した単語に下点線が表示された。ブラウザによって表示方法が異なるようだ。

<cite>タグ

注意点はciteは「名前を特記するのに使う」タグらしく、映画や漫画、新聞など何かしらの作品タイトルを表記する際に用いる。そのため人名には使えない。(恐らく人名記載しても分からないとは思うが、厳密には使ってはいけないんだとか)使い方は<cite></cite>。

 

動画では「斜体になる」と説明されていたが、私の環境下ではならなかった。ただ英語にしてみたところ斜体になったのでこれもブラウザによるのかもしれない。こういうブラウザ依存の表示を固定化するにはCSSで指定してあげる必要があるようだ。

 

前回の記事でcite属性について触れたが、今回も登場した当タグ。違いが正直よくわからないので調べてみたところ、citeタグは「作品タイトル」を表す際に使用し、「作品の内容」を引用する場合は <blockquote>や<q>タグを使用すればいいようだ。

<addres>タグ

単語の通り住所を表記する際に使う。使い方は<addres></addres>。こっちも動画では斜体になっていたが私の環境下ではらなかった。これもブラウザの表示依存なんだろう。

<br>タグ

あと今まで私もナチュラルに記載してましたが、brタグは改行タグです!!動画のほうでも自然に「brタグで改行してあげましょう」とか言ってますが、厳密に今までの動画でbrタグについて説明していなかったので一応記載しておきます。

 

本日勉強した内容

本日勉強した内容

出来上がったページ

出来上がったページ

 

【本日の参照サイト】★HTML5タグリファレンス