以前(HTML4.01)では略語はacronym、頭字語はabbrとなっていましたが、HTML5からは略語・頭字語共にabbrに統一されました。
あまり使う機会も多くはありませんが、覚えておく分には損はないのでご紹介いたします。
abbrタグの使い方
使い方は略語や頭字語をabbrタグで囲うだけと、とても簡単です。
<p>
<abbr title="HyperText Markup Language">HTML</abbr>はマークアップ言語の1つです
</p>上記のような形でabbrタグで囲った中に略語または頭字語を記載します。
title属性は必須ではありませんが、title属性を記述する場合は略語の完全形や用語の説明以外を入れるのは適切ではありませんので注意が必要です。
title属性を記述した場合、下記のようにabbrタグで囲った部分に点線が表示され、カーソルを上に置くとツールチップが表示されます。
※IEなど一部ブラウザでは点線は表示されないようです。
HTMLはマークアップ言語の1つです
点線の色を変更する
デフォルトのままだと点線の色が分かり難いので、点線の色を変更してみます。
/* title属性を持つabbrタグ */
abbr[title] {
text-decoration: underline dashed red; /* 下線の種類と色を変更 */
}title属性を持つabbrタグに対してtext-decorationで線の種類や色を変更しています。
すると、下記のように変更されます。
HTMLはマークアップ言語の1つです
先程説明しましたが、IEなど一部ブラウザでは特に見た目が変わらず、spanタグと同じような挙動になるようです。カーソルをあてればツールチップは表示されますがデフォルトでは点線が表示されませんので、別途CSSでの装飾が必要となるかと思います。
ホバー時のカーソルを変更する
このままではカーソルをあてた時に分かり難いのでカーソルを変更します。
今回はクエスチョンマークが出るように変更してみました。
/* title属性を持つabbrタグ */
abbr[title] {
cursor: help; /* カーソルにクエスチョンマークが出るように変更 */
}HTMLはマークアップ言語の1つです
ブラウザによってカーソルに違いはありますが、ユーザーにも分かりやすくなるので覚えておくといいと思います。
最後に
今回はabbrタグについて説明致しました。
abbrタグは略語や頭字語を表すためのタグになりますので、使用方法を間違わないよう注意してください。
