SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

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

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

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

  1. 0:00こんにちは。
  2. 0:00エイチティーエムエル、リファレンス解説です。
  3. 0:04HTMLタグ編の四十二本目は、アウトプットタグです。
  4. 0:08アウトプットは、計算や操作によって生まれた結果を示すためのタグです。
  5. 0:13たとえば人数を変えたら合計金額がその場で変わる、数量を選んだら小計が更新される、
  6. 0:17といった場面を思い浮かべてください。
  7. 0:22その結果を表示する場所こそが、このタグの担当です。
  8. 0:26入力欄が利用者から値を受け取る入り口だとすれば、アウトプットはプログラムが計算した答えを返す出口です。
  9. 0:33今回は基本の書き方、専用属性、そして計算自体はジャバスクリプトが行うという大切な役割分担まで、
  10. 0:38順に確認していきます。
  11. 0:42どんな場面で使うのかを整理します。
  12. 0:45典型例は、フォームの中で入力に連動して変わる結果です。
  13. 0:49人数と単価から料金を求める、個数を変えて小計を出す、条件を選んで見積もりを表示する、
  14. 0:53といった使い方です。
  15. 0:57ポイントは、その数字が最初から決まった文章ではなく、利用者の操作によって変わる結果であることです。
  16. 1:05最初から固定された説明文なら段落のピータグで十分ですし、進み具合を示すならプログレスタグやメータータグが向いています。
  17. 1:14操作の答えとして変化する値を置く場所、それがアウトプットタグだと覚えてください。
  18. 1:20結果であることを意味として伝えられる点が、ただの文字表示と違うところです。
  19. 1:26基本の書き方を確認します。
  20. 1:28アウトプットの開始タグと終了タグで、最初に表示したい値を囲むだけです。
  21. 1:33画面のような例では、料金の横に千という初期値を置いています。
  22. 1:37この時点ではまだ計算は始まっておらず、タグの中身がそのまま最初の表示になります。
  23. 1:42見た目は普通の文字とほとんど変わりませんが、意味ははっきりしています。
  24. 1:47この場所は計算結果を置く場所だ、とブラウザーや支援技術に伝えているのです。
  25. 1:52まずは結果を表示したい位置に、アウトプットタグと初期値を置くことから始めてください。
  26. 1:58あとからプログラムで、この中身を書き換えていきます。
  27. 2:01記事の活用例を、自分の言葉でたどってみましょう。
  28. 2:05構成はとてもシンプルです。
  29. 2:08まずラベルとインプットで人数を入力する欄を用意し、初期値は一人、最小値も一人にしておきます。
  30. 2:15その下の段落の中にアウトプットを置き、ここに料金の結果を表示します。
  31. 2:21単価は一人あたり千円なので、初期表示は千円です。
  32. 2:24ここで大切なのは対応関係です。
  33. 2:27インプットにはカウントというアイディー、アウトプットにはトータルというアイディーを付け、
  34. 2:33どちらが入力で、どちらが結果なのかを区別できるようにしています。
  35. 2:39この対応付けが、次の属性とプログラムの土台になります。
  36. 2:44専用属性の中心、フォー属性を解説します。
  37. 2:47フォー属性には、この結果の計算に関係する入力要素のアイディーを書きます。
  38. 2:54先ほどの例では、人数を入れるインプットのアイディーがカウントなので、アウトプットのフォーにもカウントと指定しています。
  39. 3:04入力が複数ある場合は、空白で区切って並べることもできます。
  40. 3:10ただし誤解しないでください。
  41. 3:12フォーはあくまで関係を示す目印であり、フォーを書いただけで計算が自動で始まるわけではありません。
  42. 3:21実際の計算と更新は、ジャバスクリプトが担当します。
  43. 3:25フォーは、その計算がどの入力に基づくのかを、文書の意味として残すための属性です。
  44. 3:32残り二つの専用属性を確認します。
  45. 3:35フォーム属性は、このアウトプットをどのフォームに関連付けるかを、そのフォームのアイディーで指定します。
  46. 3:43アウトプットがフォームの外に置かれている場合でも、関係をはっきりさせるために使います。
  47. 3:49次にネーム属性は、この結果につける項目名です。
  48. 3:53ほかのフォーム部品と同じように名前を付けられます。
  49. 3:57加えて、アイディーやクラスのような共通属性ももちろん使えます。
  50. 4:01アイディーはプログラムから結果を書き換える際の目印になるので、実務ではほぼ必須です。
  51. 4:08属性は飾りではなく、入力、結果、フォームの三者の関係を表すものだと理解してください。
  52. 4:14いよいよ計算の仕組みです。
  53. 4:17流れは三段階です。
  54. 4:18まずクエリーセレクターで、人数のインプットと結果のアウトプットをプログラムから取得します。
  55. 4:26次に、インプットにインベントリスナーを付け、入力が変わるたびに処理が動くようにします。
  56. 4:34最後に、人数に千を掛けた答えを文字列に直して、アウトプットのバリューに入れ直します。
  57. 4:41これで、人数を二人に変えれば表示は二千円に、三人に変えれば三千円に、その場で切り替わります。
  58. 4:49エイチティーエムエルは場所と意味を用意し、計算と更新はジャバスクリプトが行う。
  59. 4:56この役割分担が、アウトプットタグ理解の核心です。
  60. 5:00実務で欠かせないのが、入力が空っぽだったり不正だったりする場合の扱いです。
  61. 5:06人数欄を空にしたまま計算すると、ゼロや変な文字が料金として表示されてしまうことがあります。
  62. 5:13記事の例では、バリディティで入力が正しいかどうかを確認し、さらに空欄でないこともチェックしています。
  63. 5:20どちらも満たせば通常どおり計算し、そうでなければ料金の代わりにダッシュ記号を表示します。
  64. 5:27結果の欄だからこそ、おかしな答えをそのまま出さない配慮が大切です。
  65. 5:32計算式を書くときは、正常な入力だけでなく、空欄や範囲外の値のときの表示も一緒に決めておきましょう。
  66. 5:40使うときの注意点を三つまとめます。
  67. 5:42一つ目、アウトプットの値は、通常の入力欄のようにそのまま送信されるものではないと理解しておくことです。
  68. 5:51あくまで画面上で結果を見せるための要素であり、サーバーへ確実に送りたい値は、
  69. 5:56別途入力欄などで扱う設計にしてください。
  70. 6:00二つ目、タグを置くだけで計算はできません。
  71. 6:04イベントの監視と計算処理をプログラムで用意しなければ、初期値が表示されたままになります。
  72. 6:11三つ目、見た目と意味の分担です。
  73. 6:14結果を太くしたり色を付けたりするのはシーエスエスの仕事であり、結果であるという意味はアウトプットタグが担います。
  74. 6:23ついでに使うのではなく、意味で選ぶことが大切です。
  75. 6:27ブラウザー互換性を確認します。
  76. 6:29記事が参照するエムディーエヌの記録では、アウトプットタグはクロームが十以降、
  77. 6:35エッジが十八以前の版から、ファイアフォックスが四以降、サファリが七以降で対応しています。
  78. 6:41専用属性のフォー、フォーム、ネームについても、同じ時期から対応が記録されています。
  79. 6:47かなり早い時期から主要ブラウザーにそろって入っている要素なので、対応を理由に使用をためらう場面は少ないでしょう。
  80. 6:55ただし、表示されるかどうかと、計算が正しく動くかどうかは別の話です。
  81. 7:00プログラム側の処理や、スマートフォンなど実際の利用環境での動作確認は、公開前に必ず行ってください。
  82. 7:08最後にまとめです。
  83. 7:09アウトプットタグは、計算や操作による結果を示す、フォームの中の出口でした。
  84. 7:14ポイントは三つです。
  85. 7:15一つ目、入力を受け取る欄ではなく、答えを表示する欄であること。
  86. 7:20二つ目、フォー属性で関係する入力を示し、フォーム属性やネーム属性でフォームとの関係を補えること。
  87. 7:26三つ目、計算自体はジャバスクリプトが行い、アウトプットはその結果を受け取って表示する場所であることです。
  88. 7:33練習として、人数と単価から合計を出す小さな計算ページを作ってみてください。
  89. 7:38入力を変えて結果がその場で変われば、仕組みはもう理解できています。
  90. 7:43お疲れさまでした。
  91. 7:44次回もお楽しみに。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

outputタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。計算や操作による結果を示します。計算処理そのものはJavaScriptなどで実装します。

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