SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

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

再生時間 7:55動画を別のタブで開く ↗
動画の字幕・文字起こしを読む

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

  1. 0:00こんにちは。
  2. 0:00エイチティーエムエル、リファレンス解説です。
  3. 0:03HTMLタグ編の三本目は、ブイエーアールと書く、バータグです。
  4. 0:08これは、数式やプログラムの中に登場する変数を表すためのタグです。
  5. 0:12変数とは、値が入り、場面によって中身が変わる名前付きの入れ物のことです。
  6. 0:17文章の中で、その名前がただの単語ではなく変数であることを示したいときに使います。
  7. 0:22今回は、基本の書き方から、コードタグとの使い分け、似た役割のタグとの違いまで、
  8. 0:26初心者向けに順番に解説します。
  9. 0:30小さなタグですが、技術文書の読みやすさを支える大切な役割があります。
  10. 0:35変数という考え方に初めて触れる方も、名前と値の関係からゆっくり理解していきましょう。
  11. 0:40バータグが活躍するのは、変数名を文章の中で説明する場面です。
  12. 0:45たとえば数学の解説で、エックスやワイといった文字が変数であることを示したり、
  13. 0:52プログラムの説明で、ユーザー名や合計金額といった変数名を取り上げたりするときが当てはまります。
  14. 0:59ポイントは、囲むのは変数の名前そのものだけ、という点です。
  15. 1:04数値や計算結果そのものを囲むタグではありません。
  16. 1:08また、長いソースコード全体をバータグで囲むこともありません。
  17. 1:13その場合は、後で紹介するコードタグの出番です。
  18. 1:17まずは、変数名をピンポイントで示すタグ、と覚えてください。
  19. 1:21説明文の中で変数名が目立つと、読み手は式の仕組みを追いやすくなります。
  20. 1:27基本の書き方です。
  21. 1:29バータグは、開始タグと終了タグを向かい合わせに書き、その間に変数名を入れます。
  22. 1:36画面に表示されるのは中の文字だけで、タグ自体は見えません。
  23. 1:41バータグは文章の流れの中に置くタイプの要素なので、段落を表すピータグの中など、
  24. 1:46文の一部として自然に組み込めます。
  25. 1:51特別な準備は要らず、変数名の前後にタグを置くだけで使い始めることができます。
  26. 1:57書いたあとは、タグの閉じ忘れがないか、変数名以外の文字まで囲んでいないかを一度確認する習慣を付けましょう。
  27. 2:07短い一文から試すと、タグの役割が体感として分かりやすくなります。
  28. 2:12記事の活用事例を見てみましょう。
  29. 2:15この例では、面積を求める一文の中で、ウィドスとハイトという二つの変数名がバータグで囲まれています。
  30. 2:23ウィドスは横幅、ハイトは高さを表す変数で、掛け算の記号や、面積は、で求めます、
  31. 2:29といった説明の文章は、タグの外に通常の文字として書かれています。
  32. 2:35つまり、変数名だけを選び取って囲むのがコツです。
  33. 2:39試すときは、エイチティーエムエルファイルを保存して再読み込みし、開発者ツールで構造を確認してみてください。
  34. 2:48変数部分が独立した要素として認識されていれば正解です。
  35. 2:52二つの変数がそれぞれ何を表すのかを、言葉で添えるとさらに親切な説明になります。
  36. 2:59コードタグとの使い分けを整理します。
  37. 3:02バータグは、あくまで変数の名前を示すためのものです。
  38. 3:06一方、コードタグは、プログラムのコードそのものの断片を示すときに使います。
  39. 3:13たとえば、一行の計算式や命令文をまるごと示すならコードタグ、文章の説明の中で変数名だけを取り上げるならバータグ、
  40. 3:18という分け方です。
  41. 3:24複数行にわたるコードを改行や空白を保って表示したい場合は、プリタグとコードタグを組み合わせます。
  42. 3:32迷ったら、示したいのはコード全体か、変数の名前だけか、と自問すると判断しやすくなります。
  43. 3:40この使い分けは、技術文書を書くときの基本的な判断軸になります。
  44. 3:46似た役割のタグと並べて覚えましょう。
  45. 3:48サンプタグは、プログラムが返した出力結果を示します。
  46. 3:51ケービーディータグは、利用者がキーボードなどで入力する内容を示すもので、
  47. 3:55たとえばショートカットキーの説明に使われます。
  48. 3:59そしてバータグは変数、コードタグはコードの断片でした。
  49. 4:03このように、見た目が似ていても、意味はそれぞれ異なります。
  50. 4:07エイチティーエムエルでは、見た目ではなく意味でタグを選ぶことが大切で、これをセマンティックな書き方と呼びます。
  51. 4:14意味を正しく伝えることで、検索や読み上げなどの場面でも情報が正確に届きます。
  52. 4:19四つのタグを表のように整理しておくと、実務でも迷いにくくなります。
  53. 4:24属性について確認します。
  54. 4:25バータグには、このタグ専用の必須属性はありません。
  55. 4:29必要に応じて、すべての要素で使えるグローバル属性を利用します。
  56. 4:34代表的なものとして、文書の中で一意な名前を付けるアイディー、シーエスエスやジャバスクリプトでまとめて選ぶためのクラス、
  57. 4:39内容の言語を示すラングがあります。
  58. 4:45ほかにも、アプリ独自の値を保持するデータ属性が使えますが、秘密情報を置く場所ではない点には注意してください。
  59. 4:53属性は見た目を変えるためではなく、識別や補足のために使う、という意識を持ちましょう。
  60. 4:59クラス名は、後から見返しても用途が分かる名前を付けるのがおすすめです。
  61. 5:04見た目についても触れておきます。
  62. 5:07多くのブラウザーでは、バータグで囲んだ文字は斜体、イタリックで表示されるのが既定です。
  63. 5:13これは、数式の変数を斜体で書く慣習に由来しています。
  64. 5:17ただし大切なのは、斜体にしたいからバータグを使うのではない、という点です。
  65. 5:23タグは意味で選び、見た目の調整はシーエスエスで行うのが原則です。
  66. 5:27斜体をやめたい場合や、太字や色で変数を目立たせたい場合は、シーエスエスでフォントスタイルなどを上書きできます。
  67. 5:36意味と見た目を分けて考える習慣は、ほかのタグでも共通する基本です。
  68. 5:41ブラウザー標準の見た目に頼りすぎず、自分のサイトの読みやすさで判断しましょう。
  69. 5:46活用の広げ方です。
  70. 5:48プログラムの説明文でも、条件に使う変数名をバータグで示すと、読み手が、どこが変わる値なのかを一目で理解できます。
  71. 5:58この例では、スコアという変数が六十以上かどうかで結果が変わることを、一文で伝えています。
  72. 6:05一方、分数や平方根を含む複雑な数式を本格的に表したい場合は、数式専用の仕組みであるマスエムエルを使うことも検討してください。
  73. 6:16実装後は、幅三百二十ピクセル程度の狭い画面や、文字を拡大した状態でも、式や文章が欠けずに読めるかを確認しましょう。
  74. 6:26条件分岐の説明は、入門者がつまずきやすい場所なので、変数を示す工夫が特に役立ちます。
  75. 6:34ブラウザー互換性を確認します。
  76. 6:36記事が参照するエムディーエヌの記録では、バータグはクロームが一以降、エッジが十二以降、
  77. 6:40ファイアフォックスが一以降、サファリが四以前から対応しています。
  78. 6:45つまり、現在の主要なブラウザーでは、長く安定して使える基本的なタグの一つです。
  79. 6:50ただし、この表が示すのは要素本体の対応であり、新しい属性や別の仕組みまで含めた完全な動作を保証するものではありません。
  80. 6:58スマートフォンのブラウザーでは条件が異なる場合もあるため、対象とする実機で表示を確認すると、
  81. 7:01より安心です。
  82. 7:04古くからあるタグほど、環境差を気にせず安心して使える利点があります。
  83. 7:09最後に練習とまとめです。
  84. 7:11バータグは、数式やプログラムの変数名を示すタグでした。
  85. 7:15大切なポイントは三つです。
  86. 7:17一つ目は、囲むのは変数の名前だけにすること。
  87. 7:21二つ目は、長いコード全体にはコードタグを使うこと。
  88. 7:25三つ目は、タグは意味で選び、斜体などの見た目はシーエスエスで調整することです。
  89. 7:31練習として、手元のエイチティーエムエルに面積や合計を求める一文を書き、変数名だけをバータグで囲んで、
  90. 7:36表示と構造を確かめてみてください。
  91. 7:42お疲れさまでした。
  92. 7:43次回もHTMLタグを一つずつ、丁寧に学んでいきましょう。
  93. 7:48小さなタグを一つ正しく使えることが、読みやすいページ作りの積み重ねになります。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

varタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。数式やプログラムの変数。長いコード全体には code を使います。

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