SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

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

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

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

  1. 0:00こんにちは。
  2. 0:00エイチティーエムエルリファレンス解説です。
  3. 0:03エイチティーエムエルタグ編の九十六本目は、サイトタグです。
  4. 0:08サイトは、作品の題名を示す要素です。
  5. 0:10たとえば本の名前、映画のタイトル、曲名や記事の題名など、創作物の名前を文章の中で示したいときに使います。
  6. 0:18多くのブラウザーでは斜体で表示されるため、周りの文章と見分けやすくなります。
  7. 0:23今回は、サイトの意味、引用元のユーアールエルを入れるサイト属性との違い、
  8. 0:29基本の使い方、コード例、ブラウザー互換性、そしてよくある間違いまで、順番に確認します。
  9. 0:35まず、サイトの役割を整理します。
  10. 0:37サイトは、ここは作品の題名です、と意味で伝えるための要素です。
  11. 0:42対象になるのは、本、映画、音楽、テレビ番組、絵画、ゲーム、ウェブサイトの記事など、
  12. 0:46創作された作品の名前です。
  13. 0:50画面の例では、本の題名だけをサイトで囲んでいます。
  14. 0:54大切なのは、斜体にしたいから使うのではない、という点です。
  15. 0:59見た目だけを変えたいならシーエスエスで対応し、内容が本当に作品の題名かどうかで判断します。
  16. 1:06普通の強調や、ただ目立たせたい単語に使うのは、意味がずれてしまうため避けましょう。
  17. 1:12サイトの書き方と配置を確認します。
  18. 1:16サイトは、開始タグと終了タグをセットで書き、その間に作品の題名を入れます。
  19. 1:23空要素ではないので、終了タグの書き忘れに注意してください。
  20. 1:29サイトは文章の流れの中に置けるインラインの要素で、段落や見出し、リストの中などに自然に入れられます。
  21. 1:39記事の説明でも、段落の中で題名だけを囲む形が基本になっています。
  22. 1:46特定の親要素の中にしか置けない、といった強い制限は基本の使い方ではありませんが、
  23. 1:53周りの文章の構造を崩さないよう、必要な範囲だけを囲むのが大切です。
  24. 2:01意味を持つタグの選択と、見た目の指定は分けて考えましょう。
  25. 2:07ここがサイトで最も間違いやすいポイント、サイト要素とサイト属性の違いです。
  26. 2:13名前は同じですが、役割はまったく別です。
  27. 2:16サイト要素は、画面に表示される作品の題名そのものを囲むタグです。
  28. 2:21一方、サイト属性は、ブロッククォートやキューのような引用要素に付ける属性で、
  29. 2:26引用元のユーアールエルを値として書きます。
  30. 2:31属性の値は通常、画面には表示されません。
  31. 2:34プログラムや支援技術が参照するための情報です。
  32. 2:37つまり、読者に見せたい題名はサイト要素、引用元のアドレスを機械向けに残したいときはサイト属性、
  33. 2:42と覚えてください。
  34. 2:46この区別が今回の核心です。
  35. 2:49基本のコード例を見ていきます。
  36. 2:51記事の活用事例のテーマは、作品の題名を示すことです。
  37. 2:55画面の一行目が、記事に載っている例です。
  38. 2:58参考文献という言葉のあとに、本の題名だけをサイトで囲んでいます。
  39. 3:04これだけで、これは普通の単語ではなく、作品の名前だ、と読み手にもプログラムにも伝わります。
  40. 3:11二つ目の例のように、文章の途中に入れても自然に読めます。
  41. 3:15逆に言えば、文章全体をサイトで囲む必要はありません。
  42. 3:20題名の部分だけを囲むことで、文章の読みやすさと、出典の分かりやすさが両立します。
  43. 3:26まずはこの一行の使い方をしっかり身に付けましょう。
  44. 3:30応用として、リンクや引用と組み合わせる方法です。
  45. 3:34サイト要素自体には、リンク先を指定する機能はありません。
  46. 3:39読者が出典を実際に開けるようにしたい場合は、画面のようにエー要素と組み合わせて、
  47. 3:44題名から出典ページへリンクします。
  48. 3:49また、長い文章を引用するときは、引用全体をブロッククォートで囲み、その下に出典としてサイトで題名を示す形が分かりやすくなります。
  49. 4:00引用元のユーアールエルをサイト属性に書いただけでは、読者の画面には何も出ません。
  50. 4:07読者に伝えるべき出典は、必ず本文の中にも見える形で置いてください。
  51. 4:12対象の範囲について、注意点を押さえます。
  52. 4:15記事がはっきり伝えているのは、サイトは人物の名前そのものを示すためのタグではない、
  53. 4:19ということです。
  54. 4:22たとえば著者の名前や、発言した人の名前を、それだけでサイトで囲むのは適切ではありません。
  55. 4:28囲んでよいのは、あくまでその人が作った作品の題名のほうです。
  56. 4:32本人の名前を出典として伝えたい場合は、通常の文章で書くか、リンクが必要ならエー要素を使います。
  57. 4:39人名を見たら機械的にサイトを付ける、という覚え方は間違いのもとです。
  58. 4:44作品の題名かどうか、という基準で毎回判断してください。
  59. 4:48属性について確認します。
  60. 4:50サイトには、この要素専用の必須属性はありません。
  61. 4:54必要に応じて、アイディー、クラス、ラングなどの共通属性を使います。
  62. 5:01ここで、前にお話しした引用要素のサイト属性と混同しないでください。
  63. 5:07サイト要素自体にユーアールエルを入れる属性はない、というのがポイントです。
  64. 5:14見た目については、多くのブラウザーで斜体になるのが標準ですが、画面の例のようにシーエスエスで斜体をやめて太字にするなど、
  65. 5:20自由に整えられます。
  66. 5:27ただし、見た目を変えても要素の意味は変わりません。
  67. 5:31データスター属性に秘密情報を置かない点も共通です。
  68. 5:36関連する要素との使い分けも押さえておきます。
  69. 5:42文中の短い引用を示すときはキュー、まとまった引用を示すときはブロッククォートが担当します。
  70. 5:54そして、その引用がどの作品から来たのか、題名を示すのがサイトの役割です。
  71. 6:04また、斜体で表示される点が似ているアイ要素は、専門用語や通常とは性質の異なる文字を示すもので、
  72. 6:13作品の題名とは意味が異なります。
  73. 6:22イーエムの強調とも別です。
  74. 6:25見た目が似ていても、意味が違う要素が用意されているのがエイチティーエムエルの特徴です。
  75. 6:37何を伝えたいのかを先に考え、その意味に合った要素を選びましょう。
  76. 6:46ブラウザー互換性を確認します。
  77. 6:48記事が紹介するエムディーエヌのデータでは、サイト要素本体は、クロームが一以降、
  78. 6:54エッジが十二以降、ファイアフォックスが一以降、サファリが四以前の版から対応しています。
  79. 7:00かなり古くから使われてきた基本要素なので、現在の主要ブラウザーでは安心して使えると考えてよいでしょう。
  80. 7:07ただし、この表は要素本体の対応を示すもので、組み合わせるリンク先の仕組みや、
  81. 7:12追加の機能まで保証するものではありません。
  82. 7:16新しい仕組みを組み合わせる場合は、その対応状況を別に確認してください。
  83. 7:21モバイル環境でも実機で表示を試すと確実です。
  84. 7:24まとめとして、よくある間違いを三つ挙げます。
  85. 7:28一つ目は、著者など人物の名前そのものにサイトを付けてしまうことです。
  86. 7:32サイトが示すのは作品の題名です。
  87. 7:35二つ目は、サイト要素と、引用元のユーアールエルを入れるサイト属性を混同してしまうことです。
  88. 7:41表示される題名か、機械向けのアドレスか、で区別してください。
  89. 7:45三つ目は、斜体にしたいだけの理由で、作品の題名ではない文章までサイトで囲んでしまうことです。
  90. 7:52意味で選ぶ、という原則を思い出してください。
  91. 7:55サイトは、作品の題名を示す要素です。
  92. 7:58これでサイトタグの解説を終わります。
  93. 8:00ぜひ、自分のページで本の題名を囲む練習から始めてみてください。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

citeタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。作品の題名。人物の名前そのものを示すためのタグではありません。

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