[29] abbr要素で略語を示そう

最終更新日:2017年11月04日  (初回投稿日:2011年11月17日)

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

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

この略語とは、
● HTML、NATO、W3Cなど、正式名称の頭文字をとって短く呼称しているもの
● PS(追伸=PostScript)や、ASAP(できるだけ早く=As Soon As Possible)など、慣用句として使ってる略語
などです。
もちろん日本語の略語にも使えます。
日銀(日本銀行)、かもねぎ(鴨が葱をしょって来る)、アラフォー、フリマ、即リプとか...。

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

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

参考:The abbr element - HTML 5.1 - 2nd Edition | W3C Recommendation

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

<abbr>要素は、ブラウザのデフォルトスタイルで、下線が引かれます。

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

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

HTMLはこちら。

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

略語を<abbr> 〜 </abbr>で囲んで、title属性に略す前の言葉を書いてます。

<abbr>要素で使うtitle属性には、略称の正式名称以外のものを書いてはいけないことになってます。

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

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

サンプルを見てみましょう。

WHATWG は、2004年に発足しました。

HTMLはこちら。<dfn>要素内に <abbr>要素を入れ子にしています。

<p><dfn id=whatwg><abbr title="Web Hypertext Application Technology Working Group">WHATWG</abbr></dfn>
は、2004年に発足しました。</p>

下記のように書くこともできます。<dfn>要素と <abbr>要素を並列にしています。

<p><dfn id=whatwg>Web Hypertext Application Technology Working Group</dfn>
(<abbr title="Web Hypertext Application Technology Working Group">WHATWG</abbr>)
は、2004年に発足しました。</p>

プレビューはこちら。

Web Hypertext Application Technology Working GroupWHATWG) は、2004年に発足しました。

次回予告

ということで、次回は定義語を表す<dfn>要素です。
<dfn>要素は、今回の <abbr>要素と一緒に使ったり、ずっと前にやったリストのための <dl>要素)内の <dt>要素の中に使ったりします。

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

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

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

「初心者ですがレンタルサーバーはどこがいい?」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーロリポップ!です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
11 | 2023/12 | 01
- - - - - 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
Profile

yuki★hata

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

メールフォームはこちら

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