SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

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

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

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

  1. 0:00こんにちは。
  2. 0:00エイチティーエムエル、リファレンス解説です。
  3. 0:04HTMLタグ編の三十二本目は、サンプタグです。
  4. 0:07サンプは、サンプルアウトプットの略で、プログラムが返した出力結果を示すためのタグです。
  5. 0:14たとえば、処理が成功したときに画面へ出るメッセージや、エラーで表示される文言がこれにあたります。
  6. 0:22人が打ち込む文字と、コンピューターが返す文字は、意味が正反対です。
  7. 0:27その違いを読み手とブラウザーにきちんと伝えることが、この小さなタグの役割です。
  8. 0:33今回は、よく似たタグとの使い分けを中心に、初心者向けに順番に解説します。
  9. 0:38では、どんな場面で使うのか、具体例から見ていきましょう。
  10. 0:43身近なのは、ツールを実行したあとの結果表示です。
  11. 0:46ファイルを変換したら変換が完了しました、という文言が出る。
  12. 0:51保存に失敗したら、保存できませんでした、というエラーが出る。
  13. 0:55こうした、プログラム側から返ってくる文字がサンプの担当です。
  14. 1:00解説記事やマニュアルで、実際にその文言どおり画面に出ますよ、と引用して見せるときに使います。
  15. 1:07自分の感想や説明文ではなく、あくまで機械が出した言葉そのものを示す、という点がポイントです。
  16. 1:14環境によって出力が変わる場合は、その条件も一緒に説明すると親切です。
  17. 1:19基本の書き方を確認します。
  18. 1:21使い方はとてもシンプルで、出力にあたる部分を開始タグと終了タグで囲むだけです。
  19. 1:27画面のスライドは記事の活用事例です。
  20. 1:30成功すると、ビルドコンプリーテッド、と表示されます、という一文の中で、実際にプログラムが出す英語の部分だけをサンプで囲んでいます。
  21. 1:41前後の日本語はふつうの説明文、囲まれた部分だけが出力だ、と意味が分かれるわけです。
  22. 1:48サンプ自体は文章の流れの中で使うインライン要素なので、段落のピーなどの中に置くのが基本です。
  23. 1:55専用の属性はなく、書き方で迷うところはほとんどありません。
  24. 2:00ここが今回いちばん大切な、似たタグとの使い分けです。
  25. 2:04三つを並べて覚えましょう。
  26. 2:06まずケービーディーは、キーボード入力、つまり人が打ち込むコマンドやキーを示します。
  27. 2:13次にコードは、プログラムのソースコードそのものです。
  28. 2:17そしてサンプは、実行した結果としてプログラムが返した出力です。
  29. 2:22たとえば、コマンドを打ち込む、がケービーディー。
  30. 2:26そのコマンドを実行したら、この文言が返ってきた、がサンプです。
  31. 2:31入力と出力は方向が逆なので、混ぜて使うと読み手が混乱します。
  32. 2:36誰が言った言葉なのか、という視点で選ぶと間違えません。
  33. 2:41もう一つの活用例として、エラーメッセージの示し方を見てみましょう。
  34. 2:46スライドの例では、ファイルが見つからないと、エラー、ファイルノットファウンド、
  35. 2:51と表示されます、という文章で、エラーの文言そのものをサンプで囲んでいます。
  36. 2:57初心者がつまずいたとき、エラーの文言で検索して解決策を探すことはよくあります。
  37. 3:03そのため、マニュアルでは文言を要約せず、画面に出る通りに正確に示すことが大切です。
  38. 3:10サンプで囲むことで、ここからここまでが実際の表示ですよ、と境界がはっきりします。
  39. 3:16説明の文章は自分の言葉で、引用する出力はサンプで、と分けて書くのがコツです。
  40. 3:21出力が複数行にわたるときの書き方も覚えておきましょう。
  41. 3:26開始から完了まで何行も流れるログのような出力は、改行や空白をそのまま保つプレタグと組み合わせます。
  42. 3:34プレの中にサンプを置けば、行の並びを崩さずに、これはプログラムの出力です、
  43. 3:38という意味も付けられます。
  44. 3:42コードが主体ならプレの中にコード、出力が主体ならプレの中にサンプ、という選び方です。
  45. 3:49ただし、実際の画面で改行位置が変わることもあるので、長い一行をそのまま載せるときは、
  46. 3:55スマホのような狭い画面で横にはみ出さないかも確認してください。
  47. 4:01属性について整理します。
  48. 4:03サンプには、このタグ専用の属性はありません。
  49. 4:06必要に応じて、すべての要素で使えるグローバル属性を使います。
  50. 4:11代表的なのは三つです。
  51. 4:12アイディーは文書の中で一つだけの目印で、ジャバスクリプトからの参照などに使います。
  52. 4:19クラスはシーエスエスやスクリプトでまとめて選ぶための名前です。
  53. 4:24ラングは、その部分の言語を示すもので、日本語ならジェイエーを指定します。
  54. 4:29ほかに、独自の値を保持するデータ属性もあります。
  55. 4:33注意点として、クラス名を付けても要素の意味自体は変わりません。
  56. 4:37意味はタグで、見た目はシーエスエスで、と役割を分けて考えましょう。
  57. 4:43見た目についても触れておきます。
  58. 4:45多くのブラウザーでは、サンプの内容は等幅フォント、いわゆる文字の幅がそろった書体で表示されます。
  59. 4:52プログラムの出力らしい見た目になるよう、標準でそう決められているのです。
  60. 4:58ただ、これはあくまで標準の見た目です。
  61. 5:01目立たせたい場合は、スライドのようにシーエスエスで背景色や余白を足すことができます。
  62. 5:07逆に、等幅にしたいだけならサンプを使う、という選び方はおすすめしません。
  63. 5:13あくまで意味がプログラムの出力であるときに選び、見た目の調整はシーエスエスに任せる。
  64. 5:19これが正しい役割分担です。
  65. 5:21ブラウザー互換性を確認します。
  66. 5:24記事が参照するエムディーエヌの記録では、サンプ要素は、クロームがバージョン一以降、
  67. 5:29エッジが十二以降、ファイアフォックスが一以降、サファリがバージョン四以前からと、
  68. 5:34とても古くからすべての主要ブラウザーで対応しています。
  69. 5:40安心して使えるタグの一つです。
  70. 5:42ただし、これは要素本体の対応です。
  71. 5:44新しいシーエスエスの見た目などを組み合わせる場合は、そちら側の対応状況は別に確認してください。
  72. 5:51また、スマホのブラウザーでは表示のされ方が異なる場合もあるため、大切なページでは実機でも一度確認しておくと安心です。
  73. 6:00実装前後のチェックポイントをまとめます。
  74. 6:03一つ目、サンプはプログラムの出力専用です。
  75. 6:07強調したい一般の文章や、自分の書いた説明文に使うものではありません。
  76. 6:12タグ名ではなく、内容の意味から判断しましょう。
  77. 6:16二つ目、実際の環境で出力の文言が変わる場合は、バージョンや設定など、変わる条件も一緒に書いておきます。
  78. 6:25読み手が自分の画面と照らし合わせやすくなります。
  79. 6:29三つ目は表示の確認です。
  80. 6:31三百二十ピクセル程度の狭い画面や、文字を拡大したときにも、出力の文言が欠けたりはみ出したりしないか確かめます。
  81. 6:41意味、条件、表示。
  82. 6:42この三点を確認すれば十分です。
  83. 6:45最後に練習とまとめです。
  84. 6:47サンプは、プログラムから返された出力を示すタグでした。
  85. 6:51大切なポイントは三つです。
  86. 6:54一つ目、人が入力する内容はケービーディー、ソースコードはコード、返ってきた出力はサンプと、
  87. 6:59役割で使い分けること。
  88. 7:03二つ目、専用の属性はなく、見た目の調整はシーエスエスで行うこと。
  89. 7:09三つ目、複数行の出力はプレと組み合わせ、エラーの文言は正確に引用することです。
  90. 7:16練習として、よく使うツールの成功メッセージとエラーメッセージを、サンプを使ってマニュアル風に書き分けてみてください。
  91. 7:26お疲れさまでした。
  92. 7:27次回もエイチティーエムエルタグの解説を続けましょう。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

sampタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。プログラムから返された出力。入力と区別して示せます。

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