WEBVTT

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

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

3
00:00:03.851 --> 00:00:08.115
HTMLタグ編の三本目は、ブイエーアールと書く、バータグです。

4
00:00:08.115 --> 00:00:12.517
これは、数式やプログラムの中に登場する変数を表すためのタグです。

5
00:00:12.517 --> 00:00:17.469
変数とは、値が入り、場面によって中身が変わる名前付きの入れ物のことです。

6
00:00:17.469 --> 00:00:22.971
文章の中で、その名前がただの単語ではなく変数であることを示したいときに使います。

7
00:00:22.971 --> 00:00:26.684
今回は、基本の書き方から、コードタグとの使い分け、似た役割のタグとの違いまで、

8
00:00:26.684 --> 00:00:30.398
初心者向けに順番に解説します。

9
00:00:30.398 --> 00:00:35.075
小さなタグですが、技術文書の読みやすさを支える大切な役割があります。

10
00:00:35.075 --> 00:00:40.852
変数という考え方に初めて触れる方も、名前と値の関係からゆっくり理解していきましょう。

11
00:00:40.852 --> 00:00:45.789
バータグが活躍するのは、変数名を文章の中で説明する場面です。

12
00:00:45.789 --> 00:00:52.783
たとえば数学の解説で、エックスやワイといった文字が変数であることを示したり、

13
00:00:52.783 --> 00:00:59.777
プログラムの説明で、ユーザー名や合計金額といった変数名を取り上げたりするときが当てはまります。

14
00:00:59.777 --> 00:01:04.549
ポイントは、囲むのは変数の名前そのものだけ、という点です。

15
00:01:04.549 --> 00:01:08.498
数値や計算結果そのものを囲むタグではありません。

16
00:01:08.498 --> 00:01:13.435
また、長いソースコード全体をバータグで囲むこともありません。

17
00:01:13.435 --> 00:01:17.220
その場合は、後で紹介するコードタグの出番です。

18
00:01:17.220 --> 00:01:21.992
まずは、変数名をピンポイントで示すタグ、と覚えてください。

19
00:01:21.992 --> 00:01:27.752
説明文の中で変数名が目立つと、読み手は式の仕組みを追いやすくなります。

20
00:01:27.752 --> 00:01:29.333
基本の書き方です。

21
00:01:29.333 --> 00:01:36.186
バータグは、開始タグと終了タグを向かい合わせに書き、その間に変数名を入れます。

22
00:01:36.186 --> 00:01:41.281
画面に表示されるのは中の文字だけで、タグ自体は見えません。

23
00:01:41.281 --> 00:01:46.201
バータグは文章の流れの中に置くタイプの要素なので、段落を表すピータグの中など、

24
00:01:46.201 --> 00:01:51.121
文の一部として自然に組み込めます。

25
00:01:51.121 --> 00:01:57.797
特別な準備は要らず、変数名の前後にタグを置くだけで使い始めることができます。

26
00:01:57.797 --> 00:02:07.109
書いたあとは、タグの閉じ忘れがないか、変数名以外の文字まで囲んでいないかを一度確認する習慣を付けましょう。

27
00:02:07.109 --> 00:02:12.732
短い一文から試すと、タグの役割が体感として分かりやすくなります。

28
00:02:12.732 --> 00:02:15.401
記事の活用事例を見てみましょう。

29
00:02:15.401 --> 00:02:23.575
この例では、面積を求める一文の中で、ウィドスとハイトという二つの変数名がバータグで囲まれています。

30
00:02:23.575 --> 00:02:29.496
ウィドスは横幅、ハイトは高さを表す変数で、掛け算の記号や、面積は、で求めます、

31
00:02:29.496 --> 00:02:35.418
といった説明の文章は、タグの外に通常の文字として書かれています。

32
00:02:35.418 --> 00:02:39.422
つまり、変数名だけを選び取って囲むのがコツです。

33
00:02:39.422 --> 00:02:48.263
試すときは、エイチティーエムエルファイルを保存して再読み込みし、開発者ツールで構造を確認してみてください。

34
00:02:48.263 --> 00:02:52.766
変数部分が独立した要素として認識されていれば正解です。

35
00:02:52.766 --> 00:02:59.272
二つの変数がそれぞれ何を表すのかを、言葉で添えるとさらに親切な説明になります。

36
00:02:59.272 --> 00:03:02.399
コードタグとの使い分けを整理します。

37
00:03:02.399 --> 00:03:06.916
バータグは、あくまで変数の名前を示すためのものです。

38
00:03:06.916 --> 00:03:13.344
一方、コードタグは、プログラムのコードそのものの断片を示すときに使います。

39
00:03:13.344 --> 00:03:18.990
たとえば、一行の計算式や命令文をまるごと示すならコードタグ、文章の説明の中で変数名だけを取り上げるならバータグ、

40
00:03:18.990 --> 00:03:24.636
という分け方です。

41
00:03:24.636 --> 00:03:32.975
複数行にわたるコードを改行や空白を保って表示したい場合は、プリタグとコードタグを組み合わせます。

42
00:03:32.975 --> 00:03:40.619
迷ったら、示したいのはコード全体か、変数の名前だけか、と自問すると判断しやすくなります。

43
00:03:40.619 --> 00:03:46.004
この使い分けは、技術文書を書くときの基本的な判断軸になります。

44
00:03:46.004 --> 00:03:48.417
似た役割のタグと並べて覚えましょう。

45
00:03:48.417 --> 00:03:51.903
サンプタグは、プログラムが返した出力結果を示します。

46
00:03:51.903 --> 00:03:55.859
ケービーディータグは、利用者がキーボードなどで入力する内容を示すもので、

47
00:03:55.859 --> 00:03:59.814
たとえばショートカットキーの説明に使われます。

48
00:03:59.814 --> 00:04:03.434
そしてバータグは変数、コードタグはコードの断片でした。

49
00:04:03.434 --> 00:04:07.322
このように、見た目が似ていても、意味はそれぞれ異なります。

50
00:04:07.322 --> 00:04:14.697
エイチティーエムエルでは、見た目ではなく意味でタグを選ぶことが大切で、これをセマンティックな書き方と呼びます。

51
00:04:14.697 --> 00:04:19.791
意味を正しく伝えることで、検索や読み上げなどの場面でも情報が正確に届きます。

52
00:04:19.791 --> 00:04:24.216
四つのタグを表のように整理しておくと、実務でも迷いにくくなります。

53
00:04:24.216 --> 00:04:25.995
属性について確認します。

54
00:04:25.995 --> 00:04:29.703
バータグには、このタグ専用の必須属性はありません。

55
00:04:29.703 --> 00:04:34.300
必要に応じて、すべての要素で使えるグローバル属性を利用します。

56
00:04:34.300 --> 00:04:39.935
代表的なものとして、文書の中で一意な名前を付けるアイディー、シーエスエスやジャバスクリプトでまとめて選ぶためのクラス、

57
00:04:39.935 --> 00:04:45.570
内容の言語を示すラングがあります。

58
00:04:45.570 --> 00:04:53.578
ほかにも、アプリ独自の値を保持するデータ属性が使えますが、秘密情報を置く場所ではない点には注意してください。

59
00:04:53.578 --> 00:04:59.806
属性は見た目を変えるためではなく、識別や補足のために使う、という意識を持ちましょう。

60
00:04:59.806 --> 00:05:04.996
クラス名は、後から見返しても用途が分かる名前を付けるのがおすすめです。

61
00:05:04.996 --> 00:05:07.379
見た目についても触れておきます。

62
00:05:07.379 --> 00:05:13.785
多くのブラウザーでは、バータグで囲んだ文字は斜体、イタリックで表示されるのが既定です。

63
00:05:13.785 --> 00:05:17.658
これは、数式の変数を斜体で書く慣習に由来しています。

64
00:05:17.658 --> 00:05:23.170
ただし大切なのは、斜体にしたいからバータグを使うのではない、という点です。

65
00:05:23.170 --> 00:05:27.937
タグは意味で選び、見た目の調整はシーエスエスで行うのが原則です。

66
00:05:27.937 --> 00:05:36.130
斜体をやめたい場合や、太字や色で変数を目立たせたい場合は、シーエスエスでフォントスタイルなどを上書きできます。

67
00:05:36.130 --> 00:05:41.046
意味と見た目を分けて考える習慣は、ほかのタグでも共通する基本です。

68
00:05:41.046 --> 00:05:46.856
ブラウザー標準の見た目に頼りすぎず、自分のサイトの読みやすさで判断しましょう。

69
00:05:46.856 --> 00:05:48.433
活用の広げ方です。

70
00:05:48.433 --> 00:05:58.245
プログラムの説明文でも、条件に使う変数名をバータグで示すと、読み手が、どこが変わる値なのかを一目で理解できます。

71
00:05:58.245 --> 00:06:05.954
この例では、スコアという変数が六十以上かどうかで結果が変わることを、一文で伝えています。

72
00:06:05.954 --> 00:06:16.818
一方、分数や平方根を含む複雑な数式を本格的に表したい場合は、数式専用の仕組みであるマスエムエルを使うことも検討してください。

73
00:06:16.818 --> 00:06:26.805
実装後は、幅三百二十ピクセル程度の狭い画面や、文字を拡大した状態でも、式や文章が欠けずに読めるかを確認しましょう。

74
00:06:26.805 --> 00:06:34.164
条件分岐の説明は、入門者がつまずきやすい場所なので、変数を示す工夫が特に役立ちます。

75
00:06:34.164 --> 00:06:36.072
ブラウザー互換性を確認します。

76
00:06:36.072 --> 00:06:40.840
記事が参照するエムディーエヌの記録では、バータグはクロームが一以降、エッジが十二以降、

77
00:06:40.840 --> 00:06:45.609
ファイアフォックスが一以降、サファリが四以前から対応しています。

78
00:06:45.609 --> 00:06:50.569
つまり、現在の主要なブラウザーでは、長く安定して使える基本的なタグの一つです。

79
00:06:50.569 --> 00:06:58.072
ただし、この表が示すのは要素本体の対応であり、新しい属性や別の仕組みまで含めた完全な動作を保証するものではありません。

80
00:06:58.072 --> 00:07:01.442
スマートフォンのブラウザーでは条件が異なる場合もあるため、対象とする実機で表示を確認すると、

81
00:07:01.442 --> 00:07:04.812
より安心です。

82
00:07:04.812 --> 00:07:09.136
古くからあるタグほど、環境差を気にせず安心して使える利点があります。

83
00:07:09.136 --> 00:07:11.086
最後に練習とまとめです。

84
00:07:11.086 --> 00:07:15.472
バータグは、数式やプログラムの変数名を示すタグでした。

85
00:07:15.472 --> 00:07:17.584
大切なポイントは三つです。

86
00:07:17.584 --> 00:07:21.158
一つ目は、囲むのは変数の名前だけにすること。

87
00:07:21.158 --> 00:07:25.220
二つ目は、長いコード全体にはコードタグを使うこと。

88
00:07:25.220 --> 00:07:31.556
三つ目は、タグは意味で選び、斜体などの見た目はシーエスエスで調整することです。

89
00:07:31.556 --> 00:07:36.998
練習として、手元のエイチティーエムエルに面積や合計を求める一文を書き、変数名だけをバータグで囲んで、

90
00:07:36.998 --> 00:07:42.441
表示と構造を確かめてみてください。

91
00:07:42.441 --> 00:07:43.903
お疲れさまでした。

92
00:07:43.903 --> 00:07:48.452
次回もHTMLタグを一つずつ、丁寧に学んでいきましょう。

93
00:07:48.452 --> 00:07:54.788
小さなタグを一つ正しく使えることが、読みやすいページ作りの積み重ねになります。