WEBVTT

1
00:00:00.000 --> 00:00:00.868
こんにちは。

2
00:00:00.868 --> 00:00:04.049
エイチティーエムエル、リファレンス解説です。

3
00:00:04.049 --> 00:00:08.821
エイチティーエムエルタグ編の五十九本目は、ケービーディータグです。

4
00:00:08.821 --> 00:00:12.942
ケービーディーは、キーボードという言葉を短くした名前で、利用者が実際に押すキーや、

5
00:00:12.942 --> 00:00:17.063
入力するコマンドを表すタグです。

6
00:00:17.063 --> 00:00:24.438
たとえば、コントロールキーとエスのキーを同時に押して保存する、といった操作説明を思い浮かべてください。

7
00:00:24.438 --> 00:00:30.656
ただ太字にしただけでは、それが押すべきキーなのか、ただ目立つ言葉なのかが伝わりません。

8
00:00:30.656 --> 00:00:36.440
ケービーディーで囲むことで、これは入力するキーです、という意味がはっきりします。

9
00:00:36.440 --> 00:00:41.212
今回は基本の書き方から、似たタグとの使い分けまで順に学びましょう。

10
00:00:41.212 --> 00:00:45.116
どんな場面で使うか、身近な例で考えてみましょう。

11
00:00:45.116 --> 00:00:51.948
パソコンの使い方を説明する記事で、保存はこのキー、コピーはこのキー、と案内する場面。

12
00:00:51.948 --> 00:00:55.852
ソフトのヘルプで、設定画面を開くキーを示す場面。

13
00:00:55.852 --> 00:01:01.382
プログラミングの入門記事で、ターミナルに打ち込むコマンドを示す場面。

14
00:01:01.382 --> 00:01:07.075
これらに共通するのは、読み手が自分の手で入力するものだということです。

15
00:01:07.075 --> 00:01:15.046
画面に表示された結果や、プログラムのコードそのものとは役割が違うので、区別して使うことが大切です。

16
00:01:15.046 --> 00:01:23.504
操作の手順書やチュートリアルを書くとき、押すキーが出てきたらケービーディーの出番だと覚えておきましょう。

17
00:01:23.504 --> 00:01:25.485
基本の書き方を確認します。

18
00:01:25.485 --> 00:01:30.057
画面の例は、コントロールとエスで保存します、という一文です。

19
00:01:30.057 --> 00:01:35.086
ポイントは、キーひとつひとつを別々にケービーディーで囲むことです。

20
00:01:35.086 --> 00:01:40.191
コントロールというキーがひとつ、エスというキーがひとつで、その間にあるプラス記号は、

21
00:01:40.191 --> 00:01:45.296
同時に押すことを示す説明の文字として外に置きます。

22
00:01:45.296 --> 00:01:50.782
開始タグと終了タグの間に、キーの名前や記号をそのまま書くだけで使えます。

23
00:01:50.782 --> 00:01:55.354
エンター、エスケープ、矢印キーなど、文字ではないキーも、読み手に分かる名前で書いて囲めば、

24
00:01:55.354 --> 00:01:59.926
そのままキーとして伝わります。

25
00:01:59.926 --> 00:02:02.364
書き方自体はとてもシンプルです。

26
00:02:02.364 --> 00:02:06.005
キーの組み合わせの表し方を、もう少し詳しく見ます。

27
00:02:06.005 --> 00:02:11.538
同時に押すショートカットは、画面の例のようにキーをプラスでつないで並べます。

28
00:02:11.538 --> 00:02:15.034
大切な注意点が、環境によってキーが違うことです。

29
00:02:15.034 --> 00:02:21.441
ウィンドウズでコントロールを使う操作は、マックではコマンドキーになることが多くあります。

30
00:02:21.441 --> 00:02:26.684
記事でも、マックなど環境でキーが違う場合は併記するよう勧められています。

31
00:02:26.684 --> 00:02:32.800
読み手の環境を想定して、両方を書くか、自分の環境ではどのキーか一言添えると親切です。

32
00:02:32.800 --> 00:02:41.392
また、メニューを開いてから項目を選ぶような、順番に操作する手順も、矢印などを使って順序が分かるように書き分けましょう。

33
00:02:41.392 --> 00:02:44.657
ここで、似たタグとの使い分けを整理します。

34
00:02:44.657 --> 00:02:48.855
ケービーディーは、利用者が入力するキーやコマンドです。

35
00:02:48.855 --> 00:02:54.452
一方、サンプタグは、プログラムや画面から返ってきた出力や結果を示します。

36
00:02:54.452 --> 00:03:01.604
たとえば、キーを押したあとに保存しました、と表示される文字は出力なのでサンプが向いています。

37
00:03:01.604 --> 00:03:06.423
コードタグは、プログラムのコードそのものを示すときに使います。

38
00:03:06.423 --> 00:03:14.041
記事でも、画面に表示される実行結果はサンプに分けると、入力との違いが明確になると説明されています。

39
00:03:14.041 --> 00:03:19.172
自分が打つものか、画面が返すものか、という視点で選ぶと迷いません。

40
00:03:19.172 --> 00:03:22.905
活用例として、操作ガイドの文章を見てみましょう。

41
00:03:22.905 --> 00:03:31.614
画面の例では、エフワンを押すとヘルプが開きます、という手順を示し、続けて画面に現れる結果をサンプで示しています。

42
00:03:31.614 --> 00:03:37.368
このように、押すキーはケービーディー、画面の応答はサンプ、と文章の中で役割を分けると、

43
00:03:37.368 --> 00:03:43.123
読み手は、自分がすることと、起こることとを混同せずに追えます。

44
00:03:43.123 --> 00:03:48.177
ショートカットの一覧表を作る場合も、各キーをケービーディーで囲んでおくと、

45
00:03:48.177 --> 00:03:53.232
あとから見た目をそろえたり、検索したりしやすくなります。

46
00:03:53.232 --> 00:03:57.120
意味で分けることが、読みやすいガイドへの近道です。

47
00:03:57.120 --> 00:03:59.495
見た目について触れておきます。

48
00:03:59.495 --> 00:04:04.324
ケービーディーは、多くのブラウザーで初期状態では等幅フォントで表示されますが、

49
00:04:04.324 --> 00:04:09.152
それだけでは普通の文字とあまり変わりません。

50
00:04:09.152 --> 00:04:15.010
そこでシーエスエスで、薄い背景色、枠線、少しの余白、角の丸みなどを付けると、

51
00:04:15.010 --> 00:04:20.868
実際のキーボードのキーのような見た目になり、ひと目でキーだと分かります。

52
00:04:20.868 --> 00:04:23.084
ただし、大切なのは順番です。

53
00:04:23.084 --> 00:04:29.417
まずケービーディーで意味を正しく付け、そのあとで見た目をシーエスエスで整えます。

54
00:04:29.417 --> 00:04:36.700
太字や色付けだけでキーを表現すると、意味が伝わらないので、見た目と意味は分けて考えましょう。

55
00:04:36.700 --> 00:04:39.463
ケービーディーの属性を確認します。

56
00:04:39.463 --> 00:04:42.875
この要素には、専用の必須属性はありません。

57
00:04:42.875 --> 00:04:46.938
使えるのは、ほかの要素と共通のグローバル属性です。

58
00:04:46.938 --> 00:04:52.381
アイディーは文書の中でひとつだけの目印、クラスはシーエスエスやジャバスクリプトでまとめて選ぶための名前、

59
00:04:52.381 --> 00:04:57.825
ラングは内容の言語を示します。

60
00:04:57.825 --> 00:05:06.275
画面の例では、クラスを付けてキーの見た目をまとめて指定したり、英語のキー名にラングを添えたりしています。

61
00:05:06.275 --> 00:05:11.150
データ属性に個人情報などの秘密を置かない点も共通の注意です。

62
00:05:11.150 --> 00:05:14.888
属性で要素の意味自体が変わることはありません。

63
00:05:14.888 --> 00:05:17.065
よくある間違いを三つ挙げます。

64
00:05:17.065 --> 00:05:23.016
一つ目は、画面上のボタンやリンクの代わりにケービーディーを使ってしまう間違いです。

65
00:05:23.016 --> 00:05:30.564
実際にクリックできる部品には、ボタンやリンクの要素を使い、ケービーディーはあくまでキーの説明に使います。

66
00:05:30.564 --> 00:05:34.919
二つ目は、長いコマンドや文章を丸ごと囲んでしまう間違いです。

67
00:05:34.919 --> 00:05:39.563
キーや短い入力のまとまりに絞ると、読み手に伝わりやすくなります。

68
00:05:39.563 --> 00:05:44.644
三つ目は、キーではない普通の強調したい言葉まで囲んでしまう間違いです。

69
00:05:44.644 --> 00:05:49.143
意味に合わない使い方は、読み上げなどでも誤解のもとになります。

70
00:05:49.143 --> 00:05:51.756
押すキーかどうか、で判断しましょう。

71
00:05:51.756 --> 00:05:53.874
ブラウザー互換性を確認します。

72
00:05:53.874 --> 00:05:59.522
記事が参照するエムディーエヌの記録では、ケービーディー要素はクロームが一以降、

73
00:05:59.522 --> 00:06:05.170
エッジが十二以降、ファイアフォックスが一以降、サファリが四以前から対応しています。

74
00:06:05.170 --> 00:06:09.971
歴史の長い基本要素なので、現在の主要ブラウザーでは安心して使えます。

75
00:06:09.971 --> 00:06:15.902
実装後の確認では、まずキーが文の中で自然に読めるか、次にシーエスエスを付けた場合に三百二十ピクセル程度の細い画面でもキーの表示が欠けたり、

76
00:06:15.902 --> 00:06:21.832
行が崩れたりしないかを見ます。

77
00:06:21.832 --> 00:06:27.904
開発者ツールで、キーが正しくケービーディーとして入っているかも合わせて確認しましょう。

78
00:06:27.904 --> 00:06:29.263
最後にまとめです。

79
00:06:29.263 --> 00:06:34.852
ケービーディータグは、利用者が押すキーや入力するコマンドを示す要素でした。

80
00:06:34.852 --> 00:06:36.363
ポイントは三つです。

81
00:06:36.363 --> 00:06:43.311
一つ目、ショートカットはキーごとにケービーディーで囲み、環境でキーが違う場合は併記すること。

82
00:06:43.311 --> 00:06:47.540
二つ目、自分が入力するものはケービーディー、画面が返す出力はサンプ、コードはコードタグと、

83
00:06:47.540 --> 00:06:51.769
意味で使い分けること。

84
00:06:51.769 --> 00:06:57.509
三つ目、見た目はシーエスエスでキーらしく整え、意味付けはタグで行うことです。

85
00:06:57.509 --> 00:07:05.213
練習として、保存のショートカットをキーごとに囲んで書いてみて、ブラウザーで表示を確認してみてください。

86
00:07:05.213 --> 00:07:06.572
お疲れさまでした。