SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

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

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

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

  1. 0:00こんにちは。
  2. 0:01エイチティーエムエル、リファレンス解説です。
  3. 0:04HTMLタグ編の三十七本目は、キュータグです。
  4. 0:08キュータグは、文章の流れの中にある短い引用を示すためのタグです。
  5. 0:14たとえば、誰かのひと言を文の途中で紹介するときに使います。
  6. 0:18大きな特徴は、引用符を自分で書かなくても、ブラウザーが自動で前後に付けてくれることです。
  7. 0:26意味と見た目を分けて考えられる、引用のための基本タグとして、今回は基本の書き方から、
  8. 0:32長い引用との使い分けまでを順に確認していきます。
  9. 0:37身近な文章の中にも引用の機会は多いので、早めに使い方を押さえておくと、ほかの文章タグとの使い分けも自然に身についてきます。
  10. 0:47どんな場面で使うのか、具体的に考えてみましょう。
  11. 0:51講師のひと言を記事の中で紹介する、利用者の感想を一文だけ取り上げる、本や資料の短いフレーズを文中に入れる、
  12. 0:57といった場面が代表例です。
  13. 1:02共通しているのは、引用する部分が文の一部として溶け込んでいることです。
  14. 1:08反対に、自分が強調したいだけの言葉や、鍵括弧で飾りたいだけの表現には使いません。
  15. 1:14キュータグは装飾ではなく、これは他から引用した言葉だという意味を示すタグだからです。
  16. 1:21まず意味から選ぶことが大切です。
  17. 1:24迷ったときは、その言葉が自分以外の誰かの言葉かどうかを基準にすると判断しやすくなります。
  18. 1:31出典を意識する習慣も、合わせて身につけましょう。
  19. 1:35基本の書き方を確認します。
  20. 1:37スライドの例では、段落の中で、まず保存を確認しましょう、という発言部分だけをキュータグで囲んでいます。
  21. 1:46前後の文章は段落タグの中にそのまま書き、引用部分だけを開始タグと終了タグで挟むのがポイントです。
  22. 1:54ここで大切なのが、引用符を自分で書かないことです。
  23. 1:58ブラウザーが自動で付けるため、自分で鍵括弧も書くと、表示が二重になってしまいます。
  24. 2:05書いたあとは、囲んだ範囲が引用したい言葉とぴったり一致しているか、文の流れで読み返して確認しましょう。
  25. 2:13開始タグと終了タグの位置を間違えると、意図しない範囲まで引用になってしまうため、
  26. 2:18保存前の見直しが欠かせません。
  27. 2:23よく迷うのが、長い引用に使うブロッククォートとの違いです。
  28. 2:28キュータグは文の中に収まる短い引用で、文章の流れを止めません。
  29. 2:33一方ブロッククォートは、段落ごと独立して取り上げる、まとまった引用に使います。
  30. 2:39判断の目安は文字数ではなく構造です。
  31. 2:42自分の文章の一部として組み込むならキュー、引用部分が独立した塊になるならブロッククォート、
  32. 2:46と考えてください。
  33. 2:51短くても段落全体が引用ならブロッククォートが合います。
  34. 2:55逆に、文の途中の一節なら、長さが多少あってもキューで問題ありません。
  35. 3:01この使い分けができると、読み手にとっても、どこからどこまでが引用なのかがひと目で分かる、
  36. 3:05誠実な文章になります。
  37. 3:10次に、出典を示すコード例です。
  38. 3:13キュータグにはサイト属性があり、引用元のユーアールエルを書くことができます。
  39. 3:19スライドの例では、マニュアルのページのアドレスをサイト属性に指定しています。
  40. 3:26ただし注意点があります。
  41. 3:28この属性は機械向けの情報で、書いただけでは画面にリンクとして表示されません。
  42. 3:35読者にたどってほしい場合は、本文中にリンクを別に用意してください。
  43. 3:41なお、サイトは英語の綴りで、シーアイティーイーと書きます。
  44. 3:46似た名前の別要素と混同しないよう、属性として書く位置も合わせて覚えましょう。
  45. 3:53出典をきちんと示すことは、読み手への配慮であるだけでなく、書き手自身が情報の出どころを管理する助けにもなります。
  46. 4:03引用符の形についても知っておきましょう。
  47. 4:06ブラウザーは、文書の言語に合わせて引用符を選びます。
  48. 4:09日本語では鍵括弧、英語では始まりと終わりで形の違う引用符が付くのが一般的です。
  49. 4:15その判断のもとになるのが、ラング属性で示す言語情報です。
  50. 4:19部分的に外国語を引用するときは、その範囲に言語を指定しておくと、より自然な引用符が選ばれます。
  51. 4:26ただし、最終的な形はブラウザーやシーエスエスの指定にも左右されます。
  52. 4:31見た目を厳密にそろえたい場合は、実機で表示を確認する習慣を付けましょう。
  53. 4:36卒業制作や実務のページでも、引用が多い文章ほど、この言語指定の丁寧さが読みやすさに直結しますので覚えておきましょう。
  54. 4:45応用として、入れ子の引用も見ておきます。
  55. 4:48引用した発言の中に、さらに別の引用が含まれる場合、キュータグの中にキュータグを入れ子にして書くことができます。
  56. 4:55ブラウザーは内側と外側で引用符の形を変えて表示するため、どこが内側の引用なのかが読み手にも伝わります。
  57. 5:02スライドの例では、司会者の言葉の中に、先生のひと言が入っています。
  58. 5:07ただし、入れ子が深くなると文章自体が読みにくくなります。
  59. 5:11三重以上になりそうなときは、文章を分けたり、要約に切り替えたりする工夫も考えてください。
  60. 5:17書いたあとは声に出して読んでみると、引用の切れ目が自然かどうかを確認しやすく、
  61. 5:21おすすめのチェック方法です。
  62. 5:24属性を整理します。
  63. 5:26キュータグ専用の属性はサイトで、引用元のユーアールエルを示します。
  64. 5:31それ以外は、すべての要素で使える共通属性です。
  65. 5:35アイディーは文書の中で一つだけの識別子、クラスはシーエスエスやジャバスクリプトでまとめて選ぶための名前、
  66. 5:40ラングはその部分の言語を示す指定です。
  67. 5:46ほかに、独自の値を保持するデータ属性もあります。
  68. 5:50引用なのにサイト属性がないからといって間違いではありません。
  69. 5:54出典が明確な引用ほど付ける価値が高く、発言の引用では出典を本文に書く方法も有効です。
  70. 6:01属性を増やすこと自体が目的ではありません。
  71. 6:04必要な場面で必要なものだけを指定する、という姿勢を大切にしてください。
  72. 6:10見た目の調整について触れておきます。
  73. 6:12引用部分の文字色や背景を変えたいときは、キュータグを対象にシーエスエスを書きます。
  74. 6:18引用符そのものの形を変えたい場合は、クオーツというプロパティで、始まりと終わりの記号を指定できます。
  75. 6:25ただし、ブラウザーが言語に合わせて選ぶ引用符には理由があるため、むやみに変えると読み手が混乱することもあります。
  76. 6:33基本は標準の表示に任せ、サイトのデザインに合わせる場合だけ最小限の調整にとどめるのがおすすめです。
  77. 6:40意味はタグ、見た目はシーエスエス、という分担を守りましょう。
  78. 6:45特に引用符の形は、読み手が引用だと気づく手がかりです。
  79. 6:48デザインを優先しすぎて、その手がかりを消さないよう注意しましょう。
  80. 6:53ブラウザー互換性を確認します。
  81. 6:56記事が参照するエムディーエヌの記録では、キュータグはクロームがバージョン一以降、
  82. 7:03エッジが十二以降、ファイアフォックスが一以降、サファリが三以降と、主要ブラウザーで非常に古くから対応しています。
  83. 7:11サイト属性についても、同じ範囲で対応が記録されています。
  84. 7:15そのため、対応を心配して使用を避ける必要はほとんどありません。
  85. 7:20安心して使える一方で、引用符の細かな見た目はブラウザーごとに少しずつ違うことがあります。
  86. 7:28公開前に主要なブラウザーで一度表示を眺めておくと安心です。
  87. 7:32モバイル側のブラウザーでも基本的な対応はそろっているため、スマートフォン向けページでも同じ書き方で安心して使えます。
  88. 7:42最後に注意点とまとめです。
  89. 7:43気をつけたいのは三つです。
  90. 7:45一つ目、引用符の二重書きです。
  91. 7:47自動で付くので、自分では書かないでください。
  92. 7:51二つ目、長い引用の取り違えです。
  93. 7:53段落ごとのまとまった引用はブロッククォートに分けましょう。
  94. 7:57三つ目、用途の取り違えです。
  95. 7:59自分の言葉を目立たせるためだけにキュータグを使わないでください。
  96. 8:04練習として、誰かのひと言を一文の中に引用し、サイト属性で出典も添えて書いてみましょう。
  97. 8:10お疲れさまでした。
  98. 8:11次回はプログレス、進捗を示すタグを解説します。
  99. 8:14小さなタグですが、引用の作法を身につけることは、信頼されるページ作りの第一歩になります。
  100. 8:21ぜひ実際に手を動かして確かめてください。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

qタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。文中の短い引用。長い引用は blockquote に分けます。

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