VIDEO LESSON

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

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

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

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

0:00こんにちは。
0:00エイチティーエムエル、リファレンス解説です。
0:04エイチティーエムエルタグ編の五十九本目は、ケービーディータグです。
0:08ケービーディーは、キーボードという言葉を短くした名前で、利用者が実際に押すキーや、
0:12入力するコマンドを表すタグです。
0:17たとえば、コントロールキーとエスのキーを同時に押して保存する、といった操作説明を思い浮かべてください。
0:24ただ太字にしただけでは、それが押すべきキーなのか、ただ目立つ言葉なのかが伝わりません。
0:30ケービーディーで囲むことで、これは入力するキーです、という意味がはっきりします。
0:36今回は基本の書き方から、似たタグとの使い分けまで順に学びましょう。
0:41どんな場面で使うか、身近な例で考えてみましょう。
0:45パソコンの使い方を説明する記事で、保存はこのキー、コピーはこのキー、と案内する場面。
0:51ソフトのヘルプで、設定画面を開くキーを示す場面。
0:55プログラミングの入門記事で、ターミナルに打ち込むコマンドを示す場面。
1:01これらに共通するのは、読み手が自分の手で入力するものだということです。
1:07画面に表示された結果や、プログラムのコードそのものとは役割が違うので、区別して使うことが大切です。
1:15操作の手順書やチュートリアルを書くとき、押すキーが出てきたらケービーディーの出番だと覚えておきましょう。
1:23基本の書き方を確認します。
1:25画面の例は、コントロールとエスで保存します、という一文です。
1:30ポイントは、キーひとつひとつを別々にケービーディーで囲むことです。
1:35コントロールというキーがひとつ、エスというキーがひとつで、その間にあるプラス記号は、
1:40同時に押すことを示す説明の文字として外に置きます。
1:45開始タグと終了タグの間に、キーの名前や記号をそのまま書くだけで使えます。
1:50エンター、エスケープ、矢印キーなど、文字ではないキーも、読み手に分かる名前で書いて囲めば、
1:55そのままキーとして伝わります。
1:59書き方自体はとてもシンプルです。
2:02キーの組み合わせの表し方を、もう少し詳しく見ます。
2:06同時に押すショートカットは、画面の例のようにキーをプラスでつないで並べます。
2:11大切な注意点が、環境によってキーが違うことです。
2:15ウィンドウズでコントロールを使う操作は、マックではコマンドキーになることが多くあります。
2:21記事でも、マックなど環境でキーが違う場合は併記するよう勧められています。
2:26読み手の環境を想定して、両方を書くか、自分の環境ではどのキーか一言添えると親切です。
2:32また、メニューを開いてから項目を選ぶような、順番に操作する手順も、矢印などを使って順序が分かるように書き分けましょう。
2:41ここで、似たタグとの使い分けを整理します。
2:44ケービーディーは、利用者が入力するキーやコマンドです。
2:48一方、サンプタグは、プログラムや画面から返ってきた出力や結果を示します。
2:54たとえば、キーを押したあとに保存しました、と表示される文字は出力なのでサンプが向いています。
3:01コードタグは、プログラムのコードそのものを示すときに使います。
3:06記事でも、画面に表示される実行結果はサンプに分けると、入力との違いが明確になると説明されています。
3:14自分が打つものか、画面が返すものか、という視点で選ぶと迷いません。
3:19活用例として、操作ガイドの文章を見てみましょう。
3:22画面の例では、エフワンを押すとヘルプが開きます、という手順を示し、続けて画面に現れる結果をサンプで示しています。
3:31このように、押すキーはケービーディー、画面の応答はサンプ、と文章の中で役割を分けると、
3:37読み手は、自分がすることと、起こることとを混同せずに追えます。
3:43ショートカットの一覧表を作る場合も、各キーをケービーディーで囲んでおくと、
3:48あとから見た目をそろえたり、検索したりしやすくなります。
3:53意味で分けることが、読みやすいガイドへの近道です。
3:57見た目について触れておきます。
3:59ケービーディーは、多くのブラウザーで初期状態では等幅フォントで表示されますが、
4:04それだけでは普通の文字とあまり変わりません。
4:09そこでシーエスエスで、薄い背景色、枠線、少しの余白、角の丸みなどを付けると、
4:15実際のキーボードのキーのような見た目になり、ひと目でキーだと分かります。
4:20ただし、大切なのは順番です。
4:23まずケービーディーで意味を正しく付け、そのあとで見た目をシーエスエスで整えます。
4:29太字や色付けだけでキーを表現すると、意味が伝わらないので、見た目と意味は分けて考えましょう。
4:36ケービーディーの属性を確認します。
4:39この要素には、専用の必須属性はありません。
4:42使えるのは、ほかの要素と共通のグローバル属性です。
4:46アイディーは文書の中でひとつだけの目印、クラスはシーエスエスやジャバスクリプトでまとめて選ぶための名前、
4:52ラングは内容の言語を示します。
4:57画面の例では、クラスを付けてキーの見た目をまとめて指定したり、英語のキー名にラングを添えたりしています。
5:06データ属性に個人情報などの秘密を置かない点も共通の注意です。
5:11属性で要素の意味自体が変わることはありません。
5:14よくある間違いを三つ挙げます。
5:17一つ目は、画面上のボタンやリンクの代わりにケービーディーを使ってしまう間違いです。
5:23実際にクリックできる部品には、ボタンやリンクの要素を使い、ケービーディーはあくまでキーの説明に使います。
5:30二つ目は、長いコマンドや文章を丸ごと囲んでしまう間違いです。
5:34キーや短い入力のまとまりに絞ると、読み手に伝わりやすくなります。
5:39三つ目は、キーではない普通の強調したい言葉まで囲んでしまう間違いです。
5:44意味に合わない使い方は、読み上げなどでも誤解のもとになります。
5:49押すキーかどうか、で判断しましょう。
5:51ブラウザー互換性を確認します。
5:53記事が参照するエムディーエヌの記録では、ケービーディー要素はクロームが一以降、
5:59エッジが十二以降、ファイアフォックスが一以降、サファリが四以前から対応しています。
6:05歴史の長い基本要素なので、現在の主要ブラウザーでは安心して使えます。
6:09実装後の確認では、まずキーが文の中で自然に読めるか、次にシーエスエスを付けた場合に三百二十ピクセル程度の細い画面でもキーの表示が欠けたり、
6:15行が崩れたりしないかを見ます。
6:21開発者ツールで、キーが正しくケービーディーとして入っているかも合わせて確認しましょう。
6:27最後にまとめです。
6:29ケービーディータグは、利用者が押すキーや入力するコマンドを示す要素でした。
6:34ポイントは三つです。
6:36一つ目、ショートカットはキーごとにケービーディーで囲み、環境でキーが違う場合は併記すること。
6:43二つ目、自分が入力するものはケービーディー、画面が返す出力はサンプ、コードはコードタグと、
6:47意味で使い分けること。
6:51三つ目、見た目はシーエスエスでキーらしく整え、意味付けはタグで行うことです。
6:57練習として、保存のショートカットをキーごとに囲んで書いてみて、ブラウザーで表示を確認してみてください。
7:05お疲れさまでした。

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

この動画で学べること

kbdタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。利用者が入力するキーやコマンド。例は Ctrl + S です。

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