catnose
catnose
<abbr>タグに囲まれた部分は略語であることを表します。主に段落（pタグ）やリスト（liタグ）の中で使用します。
<p>実は<abbr title="学生割引">学割</abbr>もあります。</p>
😺abbrは、abbreviation（省略や短縮という意味）の略です。
title属性を指定する
<p><abbr title="HyperText Markup Language">HTML</abbr>の教材はこちらです。</p>
👆タグ内のtitle属性に略語の完全形や説明を記入することで、アクセシビリティが高まります。特にユーザーが知らない可能性のある専門用語に使うと効果的です。
title属性について
- Google Chromeなどのブラウザでは、title属性をもつabbrタグには自動で下線が引かれます
- title属性に「略語の完全形」や「用語の説明」以外のテキストを入れるのはやめましょう
- title属性の記述は必須ではありません
CSSでabbrの装飾を変更する
以下、サンプルコードです。マウスポインターがabbrタグ上で静止したときに、クエスチョンマークが表示されるようにCSSで指定しています。
/* title属性を持つabbrタグに対して */
abbr[title] {
cursor: help; /* カーソルをはてなに */
text-decoration: underline dotted orange; /* 下線の種類と色 */
}
ブラウザや端末によります。マウスポインターがないモバイル端末では、このような表示による効果は期待はできません。 ↩︎
abbrで囲まれたテキストの上にマウスポインターをのせるとtitle属性に指定されたテキストが表示されることがあります。[1]