VIDEO LESSON

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

動画の字幕・文字起こしを読む

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

0:00こんにちは。
0:00エイチティーエムエルリファレンス解説です。
0:03エイチティーエムエルタグ編の百二本目は、ブロッククオートタグです。
0:08ブロッククオートは、他の文書や発言から借りた、まとまった引用文を表す要素です。
0:13段落単位の長めの引用を、自分の文章とは別のブロックとして示します。
0:18今回は、ブロッククオートの意味、サイト属性の使い方、キュータグとの違い、
0:24フィギュアとの組み合わせ、コード例、ブラウザー互換性、そしてよくある間違いまで順番に確認します。
0:30引用を正しく示すことは、読みやすさだけでなく、出典への誠実さにもつながります。
0:35ブログや解説記事でも頻出する、実務でも欠かせない要素です。
0:39まず、ブロッククオートの役割を整理します。
0:43記事やレポートを書いていると、書籍や公式文書の一節をそのまま紹介したい場面があります。
0:50その文章を地の文と同じ段落に混ぜると、どこまでが自分の考えで、どこからが他者の言葉なのかが分かりにくくなります。
0:59ブロッククオートで囲むことで、引用部分が一つのブロックとして独立し、ブラウザーや読み上げソフトにも引用であることが伝わります。
1:09多くのブラウザーは左右に余白を付けて表示しますが、大切なのは見た目ではなく、
1:14引用という意味を正しく示すことです。
1:18逆に言えば、引用でない文章には使わないことが、正しい使い方の第一歩です。
1:24基本の書き方を見ていきます。
1:26この教材では、開始タグと終了タグを明示して書きます。
1:31引用文そのものは、ブロッククオートの中にピータグで段落として書くのが基本です。
1:37引用が二段落にわたる場合も、ブロッククオートを分けずに、一つの中に段落を並べます。
1:44逆に、文章を直接ブロッククオートの中へ裸で書く書き方は避けてください。
1:49段落として構造を作ることで、読み上げの区切りも自然になります。
1:55まずは、引用全体を一つのブロックとして囲む形を覚えましょう。
1:59引用の中にリストや見出しが含まれる場合は、その要素も中へ正しく入れてください。
2:06次に、サイト属性を確認します。
2:08サイト属性には、引用元のページのユーアールエルを指定します。
2:13これにより、プログラムや検索エンジンに対して、引用の出どころを機械的に伝えられます。
2:19ただし、ここが重要な注意点です。
2:21サイト属性を書いただけでは、画面には何も表示されず、読者がクリックできるリンクにもなりません。
2:28読者に原典を確認してもらいたい場合は、ブロッククオートの近くに、出典として通常のリンクを本文にも置いてください。
2:37属性は記録用、リンクは読者用、と役割を分けて覚えると間違いません。
2:42出典のユーアールエルが変わった場合は、属性と本文リンクの両方を更新する習慣を付けましょう。
2:48似た要素であるキュータグとの違いを押さえましょう。
2:52キュータグは、文章の途中に短い引用を差し込むためのインライン要素で、ブラウザーが引用符を自動で付けて表示します。
3:00一方、ブロッククオートは、段落ごと独立させる長い引用のためのブロック要素です。
3:06目安はシンプルで、引用が文の一部ならキュー、引用だけで段落を構成するならブロッククオートです。
3:12短い一文でも、独立した段落として紹介するならブロッククオートが適しています。
3:18逆に、地の文の流れの中に他者の言葉を混ぜるならキューを選んでください。
3:23迷ったときは、その引用を段落として独立させたいかどうかを自問すると判断しやすくなります。
3:29フィギュアとフィグキャプションとの組み合わせも紹介します。
3:34引用文と、その出典説明を一つのまとまりとして扱いたいときは、全体をフィギュアで囲み、
3:39ブロッククオートをその中に入れます。
3:45そして、フィギュアの最初か最後にフィグキャプションを置き、書名や著者名、
3:49出典の説明を目に見える形で書きます。
3:54この構成にすると、引用と出典が構造的にも結び付き、後から引用だけが切り離される心配も減ります。
4:02サイト属性は機械向け、フィグキャプションは読者向けの出典表示、と組み合わせて使うのが実践的です。
4:10レビュー記事やインタビュー記事で、発言と出典を並べるときにも、この組み合わせは役立ちます。
4:18記事の活用事例をもとに、コード例を確認します。
4:22ブロッククオートにサイト属性で出典のユーアールエルを付け、中には段落として引用文を書いています。
4:30そして直後に、出典と書いた段落を置き、原文へのリンクを読者がたどれるようにしています。
4:37書き終えたら、エイチティーエムエル入門で作った練習用ファイルをコピーし、
4:42保存して再読み込みしてください。
4:46そのうえで、開発者ツールのエレメンツで、引用と自分の文章が目的どおり区別された構造になっているかを確認します。
4:55例のドメインは説明用なので、実践では実際の引用元に置き換えてください。
5:01練習では、出典リンクを実際に開いて、原文へ正しくたどれるかまで確認してください。
5:08見た目の整え方についても触れておきます。
5:11ブロッククオートは初期状態でも余白が付きますが、シーエスエスで左側に縦線を引いたり、
5:17薄い背景色を付けたりすると、本文との違いがひと目で伝わります。
5:23余白や文字の色も、読みやすさに合わせて調整できます。
5:27ただし、見た目だけで引用らしく装った段落は、機械には引用と伝わりません。
5:33意味はブロッククオートというタグが担い、見た目はシーエスエスが補助する、
5:38という分担を守ってください。
5:42デザインを変えても、タグの選択は変えないことが大切です。
5:46縦線の色や背景色は、サイト全体の配色に合わせて統一すると、読み手に迷いがなくなります。
5:53ブラウザー互換性を確認します。
5:55記事が紹介するエムディーエヌのデータでは、ブロッククオート要素本体は、クロームが一以降、
6:01エッジが十二以降、ファイアフォックスが一以降、サファリが四以前から対応しています。
6:07サイト属性についても、同じく古いバージョンから対応が記録されています。
6:12エイチティーエムエルの中でも初期からある基本要素の一つで、現在の主要ブラウザーで安心して使えます。
6:19スマートフォンのブラウザーでも同様です。
6:22互換性よりも、引用の範囲や出典の書き方といった、使い方そのものに注意を向けてください。
6:27対応が古くから安定しているため、特別な代替表示を用意する必要は基本的にありません。
6:33実装前後のチェック項目を確認します。
6:36まず、その文章が本当に他者からの引用なのか、タグ名ではなく内容の意味から判断してください。
6:42自分の文章を目立たせるためだけにブロッククオートを使うのは誤りです。
6:47次に、引用の範囲が原文と一致しているか、出典を読者がたどれる形で示したかを確認します。
6:54著作権の観点からも、引用部分と自分の文章を明確に分け、出典を明示することが求められます。
7:00さらに、三百二十ピクセル程度の画面幅や文字拡大時にも、引用文が欠けずに読めるかを試してください。
7:07公開前に一度、自分の文章と引用の境界を声に出して読み返すと、混同に気付きやすくなります。
7:14まとめとして、よくある間違いを三つ挙げます。
7:17一つ目は、文章を字下げしたいだけの理由でブロッククオートを使うことです。
7:22余白が欲しいだけなら、シーエスエスのマージンやパディングで調整してください。
7:28二つ目は、サイト属性だけを書いて出典を示した気になることです。
7:33読者向けの出典リンクや説明は、本文にも必ず置いてください。
7:37三つ目は、自分の文章まで引用として囲んでしまうことです。
7:41引用の範囲は原文どおりに絞りましょう。
7:44ブロッククオートは、まとまった引用を出典とともに誠実に示すための要素です。
7:49これでブロッククオートタグの解説を終わります。
7:53まずは短い引用を一つ、正しい形で書く練習から始めてみてください。

この動画で学べること

blockquoteタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。まとまった引用。出典URLを cite 属性に設定でき、読者向けの出典リンクは本文にも置きます。

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