WEBVTT

1
00:00:00.000 --> 00:00:00.836
こんにちは。

2
00:00:00.836 --> 00:00:03.763
エイチティーエムエルリファレンス解説です。

3
00:00:03.763 --> 00:00:08.362
エイチティーエムエルタグ編の百二本目は、ブロッククオートタグです。

4
00:00:08.362 --> 00:00:13.797
ブロッククオートは、他の文書や発言から借りた、まとまった引用文を表す要素です。

5
00:00:13.797 --> 00:00:18.396
段落単位の長めの引用を、自分の文章とは別のブロックとして示します。

6
00:00:18.396 --> 00:00:24.250
今回は、ブロッククオートの意味、サイト属性の使い方、キュータグとの違い、

7
00:00:24.250 --> 00:00:30.103
フィギュアとの組み合わせ、コード例、ブラウザー互換性、そしてよくある間違いまで順番に確認します。

8
00:00:30.103 --> 00:00:35.538
引用を正しく示すことは、読みやすさだけでなく、出典への誠実さにもつながります。

9
00:00:35.538 --> 00:00:39.580
ブログや解説記事でも頻出する、実務でも欠かせない要素です。

10
00:00:39.580 --> 00:00:43.011
まず、ブロッククオートの役割を整理します。

11
00:00:43.011 --> 00:00:50.037
記事やレポートを書いていると、書籍や公式文書の一節をそのまま紹介したい場面があります。

12
00:00:50.037 --> 00:00:59.187
その文章を地の文と同じ段落に混ぜると、どこまでが自分の考えで、どこからが他者の言葉なのかが分かりにくくなります。

13
00:00:59.187 --> 00:01:09.480
ブロッククオートで囲むことで、引用部分が一つのブロックとして独立し、ブラウザーや読み上げソフトにも引用であることが伝わります。

14
00:01:09.480 --> 00:01:14.055
多くのブラウザーは左右に余白を付けて表示しますが、大切なのは見た目ではなく、

15
00:01:14.055 --> 00:01:18.630
引用という意味を正しく示すことです。

16
00:01:18.630 --> 00:01:24.512
逆に言えば、引用でない文章には使わないことが、正しい使い方の第一歩です。

17
00:01:24.512 --> 00:01:26.808
基本の書き方を見ていきます。

18
00:01:26.808 --> 00:01:31.071
この教材では、開始タグと終了タグを明示して書きます。

19
00:01:31.071 --> 00:01:37.466
引用文そのものは、ブロッククオートの中にピータグで段落として書くのが基本です。

20
00:01:37.466 --> 00:01:44.188
引用が二段落にわたる場合も、ブロッククオートを分けずに、一つの中に段落を並べます。

21
00:01:44.188 --> 00:01:49.927
逆に、文章を直接ブロッククオートの中へ裸で書く書き方は避けてください。

22
00:01:49.927 --> 00:01:55.010
段落として構造を作ることで、読み上げの区切りも自然になります。

23
00:01:55.010 --> 00:01:59.929
まずは、引用全体を一つのブロックとして囲む形を覚えましょう。

24
00:01:59.929 --> 00:02:06.324
引用の中にリストや見出しが含まれる場合は、その要素も中へ正しく入れてください。

25
00:02:06.324 --> 00:02:08.564
次に、サイト属性を確認します。

26
00:02:08.564 --> 00:02:13.044
サイト属性には、引用元のページのユーアールエルを指定します。

27
00:02:13.044 --> 00:02:19.316
これにより、プログラムや検索エンジンに対して、引用の出どころを機械的に伝えられます。

28
00:02:19.316 --> 00:02:21.706
ただし、ここが重要な注意点です。

29
00:02:21.706 --> 00:02:28.725
サイト属性を書いただけでは、画面には何も表示されず、読者がクリックできるリンクにもなりません。

30
00:02:28.725 --> 00:02:37.088
読者に原典を確認してもらいたい場合は、ブロッククオートの近くに、出典として通常のリンクを本文にも置いてください。

31
00:02:37.088 --> 00:02:42.016
属性は記録用、リンクは読者用、と役割を分けて覚えると間違いません。

32
00:02:42.016 --> 00:02:48.736
出典のユーアールエルが変わった場合は、属性と本文リンクの両方を更新する習慣を付けましょう。

33
00:02:48.736 --> 00:02:52.353
似た要素であるキュータグとの違いを押さえましょう。

34
00:02:52.353 --> 00:03:00.456
キュータグは、文章の途中に短い引用を差し込むためのインライン要素で、ブラウザーが引用符を自動で付けて表示します。

35
00:03:00.456 --> 00:03:06.099
一方、ブロッククオートは、段落ごと独立させる長い引用のためのブロック要素です。

36
00:03:06.099 --> 00:03:12.899
目安はシンプルで、引用が文の一部ならキュー、引用だけで段落を構成するならブロッククオートです。

37
00:03:12.899 --> 00:03:18.397
短い一文でも、独立した段落として紹介するならブロッククオートが適しています。

38
00:03:18.397 --> 00:03:23.462
逆に、地の文の流れの中に他者の言葉を混ぜるならキューを選んでください。

39
00:03:23.462 --> 00:03:29.828
迷ったときは、その引用を段落として独立させたいかどうかを自問すると判断しやすくなります。

40
00:03:29.828 --> 00:03:34.826
フィギュアとフィグキャプションとの組み合わせも紹介します。

41
00:03:34.826 --> 00:03:39.996
引用文と、その出典説明を一つのまとまりとして扱いたいときは、全体をフィギュアで囲み、

42
00:03:39.996 --> 00:03:45.166
ブロッククオートをその中に入れます。

43
00:03:45.166 --> 00:03:49.819
そして、フィギュアの最初か最後にフィグキャプションを置き、書名や著者名、

44
00:03:49.819 --> 00:03:54.473
出典の説明を目に見える形で書きます。

45
00:03:54.473 --> 00:04:02.572
この構成にすると、引用と出典が構造的にも結び付き、後から引用だけが切り離される心配も減ります。

46
00:04:02.572 --> 00:04:10.845
サイト属性は機械向け、フィグキャプションは読者向けの出典表示、と組み合わせて使うのが実践的です。

47
00:04:10.845 --> 00:04:18.600
レビュー記事やインタビュー記事で、発言と出典を並べるときにも、この組み合わせは役立ちます。

48
00:04:18.600 --> 00:04:22.462
記事の活用事例をもとに、コード例を確認します。

49
00:04:22.462 --> 00:04:30.523
ブロッククオートにサイト属性で出典のユーアールエルを付け、中には段落として引用文を書いています。

50
00:04:30.523 --> 00:04:37.744
そして直後に、出典と書いた段落を置き、原文へのリンクを読者がたどれるようにしています。

51
00:04:37.744 --> 00:04:42.111
書き終えたら、エイチティーエムエル入門で作った練習用ファイルをコピーし、

52
00:04:42.111 --> 00:04:46.477
保存して再読み込みしてください。

53
00:04:46.477 --> 00:04:55.713
そのうえで、開発者ツールのエレメンツで、引用と自分の文章が目的どおり区別された構造になっているかを確認します。

54
00:04:55.713 --> 00:05:01.591
例のドメインは説明用なので、実践では実際の引用元に置き換えてください。

55
00:05:01.591 --> 00:05:08.308
練習では、出典リンクを実際に開いて、原文へ正しくたどれるかまで確認してください。

56
00:05:08.308 --> 00:05:11.611
見た目の整え方についても触れておきます。

57
00:05:11.611 --> 00:05:17.639
ブロッククオートは初期状態でも余白が付きますが、シーエスエスで左側に縦線を引いたり、

58
00:05:17.639 --> 00:05:23.666
薄い背景色を付けたりすると、本文との違いがひと目で伝わります。

59
00:05:23.666 --> 00:05:27.960
余白や文字の色も、読みやすさに合わせて調整できます。

60
00:05:27.960 --> 00:05:33.905
ただし、見た目だけで引用らしく装った段落は、機械には引用と伝わりません。

61
00:05:33.905 --> 00:05:38.034
意味はブロッククオートというタグが担い、見た目はシーエスエスが補助する、

62
00:05:38.034 --> 00:05:42.163
という分担を守ってください。

63
00:05:42.163 --> 00:05:46.787
デザインを変えても、タグの選択は変えないことが大切です。

64
00:05:46.787 --> 00:05:53.888
縦線の色や背景色は、サイト全体の配色に合わせて統一すると、読み手に迷いがなくなります。

65
00:05:53.888 --> 00:05:55.956
ブラウザー互換性を確認します。

66
00:05:55.956 --> 00:06:01.814
記事が紹介するエムディーエヌのデータでは、ブロッククオート要素本体は、クロームが一以降、

67
00:06:01.814 --> 00:06:07.673
エッジが十二以降、ファイアフォックスが一以降、サファリが四以前から対応しています。

68
00:06:07.673 --> 00:06:12.497
サイト属性についても、同じく古いバージョンから対応が記録されています。

69
00:06:12.497 --> 00:06:19.252
エイチティーエムエルの中でも初期からある基本要素の一つで、現在の主要ブラウザーで安心して使えます。

70
00:06:19.252 --> 00:06:22.009
スマートフォンのブラウザーでも同様です。

71
00:06:22.009 --> 00:06:27.936
互換性よりも、引用の範囲や出典の書き方といった、使い方そのものに注意を向けてください。

72
00:06:27.936 --> 00:06:33.588
対応が古くから安定しているため、特別な代替表示を用意する必要は基本的にありません。

73
00:06:33.588 --> 00:06:36.244
実装前後のチェック項目を確認します。

74
00:06:36.244 --> 00:06:42.886
まず、その文章が本当に他者からの引用なのか、タグ名ではなく内容の意味から判断してください。

75
00:06:42.886 --> 00:06:47.903
自分の文章を目立たせるためだけにブロッククオートを使うのは誤りです。

76
00:06:47.903 --> 00:06:54.249
次に、引用の範囲が原文と一致しているか、出典を読者がたどれる形で示したかを確認します。

77
00:06:54.249 --> 00:07:00.743
著作権の観点からも、引用部分と自分の文章を明確に分け、出典を明示することが求められます。

78
00:07:00.743 --> 00:07:07.826
さらに、三百二十ピクセル程度の画面幅や文字拡大時にも、引用文が欠けずに読めるかを試してください。

79
00:07:07.826 --> 00:07:14.320
公開前に一度、自分の文章と引用の境界を声に出して読み返すと、混同に気付きやすくなります。

80
00:07:14.320 --> 00:07:17.563
まとめとして、よくある間違いを三つ挙げます。

81
00:07:17.563 --> 00:07:22.871
一つ目は、文章を字下げしたいだけの理由でブロッククオートを使うことです。

82
00:07:22.871 --> 00:07:28.473
余白が欲しいだけなら、シーエスエスのマージンやパディングで調整してください。

83
00:07:28.473 --> 00:07:33.044
二つ目は、サイト属性だけを書いて出典を示した気になることです。

84
00:07:33.044 --> 00:07:37.319
読者向けの出典リンクや説明は、本文にも必ず置いてください。

85
00:07:37.319 --> 00:07:41.447
三つ目は、自分の文章まで引用として囲んでしまうことです。

86
00:07:41.447 --> 00:07:44.248
引用の範囲は原文どおりに絞りましょう。

87
00:07:44.248 --> 00:07:49.703
ブロッククオートは、まとまった引用を出典とともに誠実に示すための要素です。

88
00:07:49.703 --> 00:07:53.094
これでブロッククオートタグの解説を終わります。

89
00:07:53.094 --> 00:07:57.812
まずは短い引用を一つ、正しい形で書く練習から始めてみてください。