[29] <abbr>で略語を示そう

<abbr>は、略語を示す要素です。

略語をこれで囲み、title属性 で略語の元の言葉(略す前のことば)を書いておくと、カーソルのロールオーバーで元の言葉が表示できます。ビジターに親切ですよね。

この略語とは、
● HTML、NATO、TPPなど、正式名称の頭文字をとって短く呼称しているもの
● PS(追伸=PostScript)や、ASAP(できるだけ早く=As Soon As Possible)など、慣用句として使ってる略語
などです。
もちろん日本語の略語にも使えます。日銀(日本銀行)ナベツネ(渡邉恒雄さん)かもねぎ(鴨が葱をしょって来る…意味は親とかに聞いてw)、アラフォー、フリマ、ワンセグとか。

使用する要素 <abbr> 〜 </abbr>

「abbr」は「abbreviate」の略。abbreviateは「○○に略す」という意味です。

<abbr>を使ってみましょう

<abbr>は主なブラウザのデフォルトで、下線が引かれたテキストになります。

サンプルを見てみましょう。下線が引かれた部分(QED)にカーソルを合わせると元の言葉(略す前の言葉)が現れますね。

QEDって、エラリー・クィーンがよく言ってますね。推理の説明後に。
日本語訳では「証明終わり」って訳されていますが、QEDはラテン語で、「かく(このように)示された」という意味だそうです。

HTMLソースはこちらです

<p>
<abbr title="Quod Erat Demonstrandum">QED</abbr>って、エラリー・クィーンがよく言ってますね。推理の説明後に。<br >
日本語訳では「証明終わり」って訳されていますが、QEDはラテン語で、「かく(このように)示された」という意味だそうです。
</p>

略語を<abbr></abbr>で囲んで、 title属性に略す前の言葉を書いてます。
これで、略語のところにカーソルを合わせると、略す前の言葉を表示できるんです。

<dfn>とセットで使うことが多いです

<dfn>は「定義語」を表す要素なんですが(これは次回登場します)、
この「定義語」が略語のときに<dfn>の中に<abbr>を入れたりします。
ですので、<dfn>と<abbr>はセットで使う事が多いんです。

次回予告

次回は定義語を表す<dfn>要素です。
<dfn>は、今回の<abbr>と一緒に使ったり、ずっと前にやった「用語の記述リスト(dl要素)」内の<dt>の中に使ったりします。これらの要素の関連性は、知識としては重要かも。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
07 | 2017/08 | 09
- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31 - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.