VIDEO LESSON

HTMLのabbrタグとは？属性・使い方・ブラウザー互換性と活用例の解説動画

再生時間 7:36動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00エイチティーエムエルリファレンス解説です。
0:03エイチティーエムエルタグ編の百十二本目は、エービービーアール要素です。
0:08これは略語を示すタグです。
0:10エイチティーエムエル、シーエスエス、ユーアールエル。
0:13ウェブの文章には、短く略した言葉がたくさん出てきます。
0:17初めて読む人には、その略語が何の略なのか分からないこともあります。
0:21エービービーアールは、そうした言葉が略語であることを示し、正式名称と結び付けるための要素です。
0:28今回は、タイトル属性の使い方、ディーエフエヌとの組み合わせ、コード例、互換性、
0:32よくある間違いまで順番に確認します。
0:36この動画では要点だけを初心者向けに整理しますので、初めての方も安心して聞いてください。
0:42エービービーアールを使う場面を考えます。
0:44たとえば技術記事で、エイチティーエムエルやシーエスエスといった略称を初めて出すときです。
0:51あるいは組織名や製品名を、長い正式名称の代わりに短い頭字語で繰り返し書くときも当てはまります。
0:57ポイントは、読み手がその略語の意味を知らない可能性があるかどうかです。
1:02誰もが知っている言葉や、略語ではない普通の単語まで囲む必要はありません。
1:07略称と正式名称を結び付けたい場所で使う、という視点を持ってください。
1:12たとえばニュースや解説記事でも、団体名を短く書く場面はよくあります。
1:17そういうときに役立つタグです。
1:19基本の書き方を確認します。
1:21エービービーアールには開始タグと終了タグがあり、その間に略語そのものを書きます。
1:27そして開始タグのタイトル属性に、その略語の正式名称を書きます。
1:32たとえば略語がエイチティーエムエルなら、タイトルにはハイパーテキストマークアップランゲージという正式名称を入れます。
1:41パソコンでは、略語にマウスを合わせると、この正式名称が小さな吹き出し、ツールチップとして表示されることがあります。
1:49書き方はとてもシンプルです。
1:51終了タグを書き忘れると、意図しない範囲まで略語として扱われることがあるので注意しましょう。
1:58ここがこのタグで一番大切な注意点です。
2:01記事も強調している通り、タイトル属性のツールチップは、タッチ操作や読み上げでは頼れません。
2:08スマートフォンではマウスを合わせる操作がありませんし、支援技術がタイトルを必ず読み上げるとも限りません。
2:16ですから、正式名称が重要な情報なら、タイトルだけに入れて終わりにしないでください。
2:22初出の場所では、本文の中にも正式名称を書き、そのあとで略語を使う形にすると、
2:26すべての読み手に確実に伝わります。
2:31迷ったときは、本文に正式名称を一度書いてから略語を使い始める、という順番を意識すると失敗しにくくなります。
2:39記事の活用事例をもとに、コードを読みます。
2:42この例では、段落の中でエイチティーエムエルという略語だけをエービービーアールで囲み、
2:50タイトル属性に正式名称であるハイパーテキストマークアップランゲージを指定しています。
2:57画面にはエイチティーエムエルとだけ表示されますが、パソコンでマウスを合わせると正式名称がツールチップで確認できます。
3:07段落全体ではなく、略語の部分だけを囲むのがポイントです。
3:12実際のページでは、扱う略語ごとに正しい正式名称を調べて書いてください。
3:18ブラウザーで保存して再読み込みし、表示とマウスを合わせたときの見え方を自分で確かめてみてください。
3:26関連する要素として、ディーエフエヌとの組み合わせを紹介します。
3:31ディーエフエヌは、その用語を定義している箇所を示す要素です。
3:35用語集や入門記事で、略語を初めて定義する場面では、この例のようにディーエフエヌの中にエービービーアールを入れて使います。
3:44タイトル属性には正式名称、周辺の文章には用語の説明を書きます。
3:48ただし、すべての略語にディーエフエヌが必要なわけではありません。
3:53定義している場所かどうかで判断し、単なる使用箇所ではエービービーアールだけで十分です。
3:59定義の文章が近くにあることで、辞書のように読み返しやすいページになります。
4:05属性について整理します。
4:07エービービーアールで中心になるのはタイトル属性で、正式名称などの補足情報を書きます。
4:13それ以外に専用の属性はなく、必要に応じてアイディーやクラス、ラングといったグローバル属性、
4:19つまり多くの要素で共通して使える属性を利用します。
4:25たとえば略語が外国語の場合は、ラングで言語を示すこともできます。
4:30繰り返しになりますが、タイトルは補足情報の置き場所です。
4:35読み手全員に必要な説明は本文に書く、という役割分担を意識してください。
4:40属性を増やすこと自体が目的ではありません。
4:44必要な情報だけを、決められた場所に書くことが基本です。
4:48もう一つの例として、複数の略語を並べる形を見ます。
4:52用語一覧の中で、エイチティーエムエル、シーエスエス、ユーアールエルという三つの略語に、
4:58それぞれ正式名称をタイトルで対応させています。
5:03略語ごとにタイトルを分けて書くこと、そして正式名称のつづりを正確に書くことが大切です。
5:11ただし先ほど学んだ通り、タイトルはあくまで補足です。
5:15本当に覚えてほしい用語なら、一覧の本文や説明文の中にも正式名称や意味を併記すると、
5:20より親切なページになります。
5:24この形は、学習用のまとめページや、社内の用語集を作るときにもそのまま応用できます。
5:31見た目についても触れておきます。
5:33エービービーアールは、多くのブラウザーで初期状態では点線の下線が付いて表示されます。
5:40これはブラウザーが用意した標準のスタイルで、略語であることを目でも伝えやすくする工夫です。
5:46気になる場合は、シーエスエスで下線の種類を変えたり消したりすることもできます。
5:52逆に、点線を付けたいだけの理由でエービービーアールを使うのは間違いです。
5:57意味を持つタグの選択と、見た目を整えるシーエスエスの指定は分けて考える習慣が大切です。
6:03最近はスマートフォンでの表示も多いので、線の見え方を実機でも確認しておくと安心です。
6:10ブラウザー互換性を確認します。
6:12記事が紹介するエムディーエヌのデータでは、エービービーアール要素本体は、
6:18クロームが二以降、エッジが十二以降、ファイアフォックスが一以降、サファリが四以降から対応しています。
6:24ファイアフォックスには補足条件があるとされていますが、古くからある基本要素なので、
6:30現在の主要ブラウザーであれば対応を心配する必要はほとんどありません。
6:35ただし、これは要素本体の対応です。
6:38タイトルの表示方法は環境で異なる点は、先ほどの注意と合わせて覚えておきましょう。
6:44モバイル向けのブラウザーでも基本動作は共通ですが、最終的には対象の実機で表示を試すのが確実です。
6:51まとめとして、よくある間違いを三つ挙げます。
6:54一つ目は、正式名称をタイトル属性だけに入れて終わってしまうことです。
7:00タッチ操作や読み上げでは伝わらない場合があるため、初出では本文にも書いてください。
7:07二つ目は、略語ではない普通の言葉まで囲んでしまうことです。
7:11三つ目は、正式名称のつづりの間違いです。
7:15せっかく補足しても内容が違えば逆効果になります。
7:19エービービーアールは、略語と正式名称を結び付ける要素です。
7:23初出で丁寧に伝え、その後は略語で読みやすくする。
7:27この使い分けを試してみてください。
7:30ぜひ手元のページでも試してみてください。
7:33これで解説を終わります。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

abbrタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。略語。title に正式名称を補えますが、重要な説明は本文にも書きます。

解説記事・サンプルコードを読む：HTMLのabbrタグとは？属性・使い方・ブラウザー互換性と活用例 →