WEBVTT

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

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

3
00:00:04.742 --> 00:00:08.638
HTMLタグ編の三十七本目は、キュータグです。

4
00:00:08.638 --> 00:00:14.058
キュータグは、文章の流れの中にある短い引用を示すためのタグです。

5
00:00:14.058 --> 00:00:18.970
たとえば、誰かのひと言を文の途中で紹介するときに使います。

6
00:00:18.970 --> 00:00:26.422
大きな特徴は、引用符を自分で書かなくても、ブラウザーが自動で前後に付けてくれることです。

7
00:00:26.422 --> 00:00:32.011
意味と見た目を分けて考えられる、引用のための基本タグとして、今回は基本の書き方から、

8
00:00:32.011 --> 00:00:37.600
長い引用との使い分けまでを順に確認していきます。

9
00:00:37.600 --> 00:00:47.932
身近な文章の中にも引用の機会は多いので、早めに使い方を押さえておくと、ほかの文章タグとの使い分けも自然に身についてきます。

10
00:00:47.932 --> 00:00:51.846
どんな場面で使うのか、具体的に考えてみましょう。

11
00:00:51.846 --> 00:00:57.227
講師のひと言を記事の中で紹介する、利用者の感想を一文だけ取り上げる、本や資料の短いフレーズを文中に入れる、

12
00:00:57.227 --> 00:01:02.608
といった場面が代表例です。

13
00:01:02.608 --> 00:01:08.315
共通しているのは、引用する部分が文の一部として溶け込んでいることです。

14
00:01:08.315 --> 00:01:14.838
反対に、自分が強調したいだけの言葉や、鍵括弧で飾りたいだけの表現には使いません。

15
00:01:14.838 --> 00:01:21.687
キュータグは装飾ではなく、これは他から引用した言葉だという意味を示すタグだからです。

16
00:01:21.687 --> 00:01:24.296
まず意味から選ぶことが大切です。

17
00:01:24.296 --> 00:01:31.470
迷ったときは、その言葉が自分以外の誰かの言葉かどうかを基準にすると判断しやすくなります。

18
00:01:31.470 --> 00:01:35.384
出典を意識する習慣も、合わせて身につけましょう。

19
00:01:35.384 --> 00:01:37.575
基本の書き方を確認します。

20
00:01:37.575 --> 00:01:46.169
スライドの例では、段落の中で、まず保存を確認しましょう、という発言部分だけをキュータグで囲んでいます。

21
00:01:46.169 --> 00:01:54.258
前後の文章は段落タグの中にそのまま書き、引用部分だけを開始タグと終了タグで挟むのがポイントです。

22
00:01:54.258 --> 00:01:58.471
ここで大切なのが、引用符を自分で書かないことです。

23
00:01:58.471 --> 00:02:05.381
ブラウザーが自動で付けるため、自分で鍵括弧も書くと、表示が二重になってしまいます。

24
00:02:05.381 --> 00:02:13.975
書いたあとは、囲んだ範囲が引用したい言葉とぴったり一致しているか、文の流れで読み返して確認しましょう。

25
00:02:13.975 --> 00:02:18.610
開始タグと終了タグの位置を間違えると、意図しない範囲まで引用になってしまうため、

26
00:02:18.610 --> 00:02:23.244
保存前の見直しが欠かせません。

27
00:02:23.244 --> 00:02:28.015
よく迷うのが、長い引用に使うブロッククォートとの違いです。

28
00:02:28.015 --> 00:02:33.114
キュータグは文の中に収まる短い引用で、文章の流れを止めません。

29
00:02:33.114 --> 00:02:39.530
一方ブロッククォートは、段落ごと独立して取り上げる、まとまった引用に使います。

30
00:02:39.530 --> 00:02:42.491
判断の目安は文字数ではなく構造です。

31
00:02:42.491 --> 00:02:46.932
自分の文章の一部として組み込むならキュー、引用部分が独立した塊になるならブロッククォート、

32
00:02:46.932 --> 00:02:51.374
と考えてください。

33
00:02:51.374 --> 00:02:55.815
短くても段落全体が引用ならブロッククォートが合います。

34
00:02:55.815 --> 00:03:01.408
逆に、文の途中の一節なら、長さが多少あってもキューで問題ありません。

35
00:03:01.408 --> 00:03:05.932
この使い分けができると、読み手にとっても、どこからどこまでが引用なのかがひと目で分かる、

36
00:03:05.932 --> 00:03:10.456
誠実な文章になります。

37
00:03:10.456 --> 00:03:13.119
次に、出典を示すコード例です。

38
00:03:13.119 --> 00:03:19.866
キュータグにはサイト属性があり、引用元のユーアールエルを書くことができます。

39
00:03:19.866 --> 00:03:26.613
スライドの例では、マニュアルのページのアドレスをサイト属性に指定しています。

40
00:03:26.613 --> 00:03:28.744
ただし注意点があります。

41
00:03:28.744 --> 00:03:35.490
この属性は機械向けの情報で、書いただけでは画面にリンクとして表示されません。

42
00:03:35.490 --> 00:03:41.349
読者にたどってほしい場合は、本文中にリンクを別に用意してください。

43
00:03:41.349 --> 00:03:46.498
なお、サイトは英語の綴りで、シーアイティーイーと書きます。

44
00:03:46.498 --> 00:03:53.245
似た名前の別要素と混同しないよう、属性として書く位置も合わせて覚えましょう。

45
00:03:53.245 --> 00:04:03.188
出典をきちんと示すことは、読み手への配慮であるだけでなく、書き手自身が情報の出どころを管理する助けにもなります。

46
00:04:03.188 --> 00:04:06.108
引用符の形についても知っておきましょう。

47
00:04:06.108 --> 00:04:09.905
ブラウザーは、文書の言語に合わせて引用符を選びます。

48
00:04:09.905 --> 00:04:15.599
日本語では鍵括弧、英語では始まりと終わりで形の違う引用符が付くのが一般的です。

49
00:04:15.599 --> 00:04:19.688
その判断のもとになるのが、ラング属性で示す言語情報です。

50
00:04:19.688 --> 00:04:26.550
部分的に外国語を引用するときは、その範囲に言語を指定しておくと、より自然な引用符が選ばれます。

51
00:04:26.550 --> 00:04:31.515
ただし、最終的な形はブラウザーやシーエスエスの指定にも左右されます。

52
00:04:31.515 --> 00:04:36.771
見た目を厳密にそろえたい場合は、実機で表示を確認する習慣を付けましょう。

53
00:04:36.771 --> 00:04:45.240
卒業制作や実務のページでも、引用が多い文章ほど、この言語指定の丁寧さが読みやすさに直結しますので覚えておきましょう。

54
00:04:45.240 --> 00:04:48.032
応用として、入れ子の引用も見ておきます。

55
00:04:48.032 --> 00:04:55.711
引用した発言の中に、さらに別の引用が含まれる場合、キュータグの中にキュータグを入れ子にして書くことができます。

56
00:04:55.711 --> 00:05:02.832
ブラウザーは内側と外側で引用符の形を変えて表示するため、どこが内側の引用なのかが読み手にも伝わります。

57
00:05:02.832 --> 00:05:07.440
スライドの例では、司会者の言葉の中に、先生のひと言が入っています。

58
00:05:07.440 --> 00:05:11.349
ただし、入れ子が深くなると文章自体が読みにくくなります。

59
00:05:11.349 --> 00:05:17.492
三重以上になりそうなときは、文章を分けたり、要約に切り替えたりする工夫も考えてください。

60
00:05:17.492 --> 00:05:21.192
書いたあとは声に出して読んでみると、引用の切れ目が自然かどうかを確認しやすく、

61
00:05:21.192 --> 00:05:24.892
おすすめのチェック方法です。

62
00:05:24.892 --> 00:05:26.307
属性を整理します。

63
00:05:26.307 --> 00:05:31.494
キュータグ専用の属性はサイトで、引用元のユーアールエルを示します。

64
00:05:31.494 --> 00:05:35.109
それ以外は、すべての要素で使える共通属性です。

65
00:05:35.109 --> 00:05:40.689
アイディーは文書の中で一つだけの識別子、クラスはシーエスエスやジャバスクリプトでまとめて選ぶための名前、

66
00:05:40.689 --> 00:05:46.269
ラングはその部分の言語を示す指定です。

67
00:05:46.269 --> 00:05:50.041
ほかに、独自の値を保持するデータ属性もあります。

68
00:05:50.041 --> 00:05:54.756
引用なのにサイト属性がないからといって間違いではありません。

69
00:05:54.756 --> 00:06:01.358
出典が明確な引用ほど付ける価値が高く、発言の引用では出典を本文に書く方法も有効です。

70
00:06:01.358 --> 00:06:04.659
属性を増やすこと自体が目的ではありません。

71
00:06:04.659 --> 00:06:10.160
必要な場面で必要なものだけを指定する、という姿勢を大切にしてください。

72
00:06:10.160 --> 00:06:12.734
見た目の調整について触れておきます。

73
00:06:12.734 --> 00:06:18.596
引用部分の文字色や背景を変えたいときは、キュータグを対象にシーエスエスを書きます。

74
00:06:18.596 --> 00:06:25.746
引用符そのものの形を変えたい場合は、クオーツというプロパティで、始まりと終わりの記号を指定できます。

75
00:06:25.746 --> 00:06:33.753
ただし、ブラウザーが言語に合わせて選ぶ引用符には理由があるため、むやみに変えると読み手が混乱することもあります。

76
00:06:33.753 --> 00:06:40.759
基本は標準の表示に任せ、サイトのデザインに合わせる場合だけ最小限の調整にとどめるのがおすすめです。

77
00:06:40.759 --> 00:06:45.049
意味はタグ、見た目はシーエスエス、という分担を守りましょう。

78
00:06:45.049 --> 00:06:48.909
特に引用符の形は、読み手が引用だと気づく手がかりです。

79
00:06:48.909 --> 00:06:53.628
デザインを優先しすぎて、その手がかりを消さないよう注意しましょう。

80
00:06:53.628 --> 00:06:56.039
ブラウザー互換性を確認します。

81
00:06:56.039 --> 00:07:03.756
記事が参照するエムディーエヌの記録では、キュータグはクロームがバージョン一以降、

82
00:07:03.756 --> 00:07:11.472
エッジが十二以降、ファイアフォックスが一以降、サファリが三以降と、主要ブラウザーで非常に古くから対応しています。

83
00:07:11.472 --> 00:07:15.973
サイト属性についても、同じ範囲で対応が記録されています。

84
00:07:15.973 --> 00:07:20.957
そのため、対応を心配して使用を避ける必要はほとんどありません。

85
00:07:20.957 --> 00:07:28.030
安心して使える一方で、引用符の細かな見た目はブラウザーごとに少しずつ違うことがあります。

86
00:07:28.030 --> 00:07:32.692
公開前に主要なブラウザーで一度表示を眺めておくと安心です。

87
00:07:32.692 --> 00:07:42.016
モバイル側のブラウザーでも基本的な対応はそろっているため、スマートフォン向けページでも同じ書き方で安心して使えます。

88
00:07:42.016 --> 00:07:43.887
最後に注意点とまとめです。

89
00:07:43.887 --> 00:07:45.758
気をつけたいのは三つです。

90
00:07:45.758 --> 00:07:47.917
一つ目、引用符の二重書きです。

91
00:07:47.917 --> 00:07:51.084
自動で付くので、自分では書かないでください。

92
00:07:51.084 --> 00:07:53.387
二つ目、長い引用の取り違えです。

93
00:07:53.387 --> 00:07:57.561
段落ごとのまとまった引用はブロッククォートに分けましょう。

94
00:07:57.561 --> 00:07:59.576
三つ目、用途の取り違えです。

95
00:07:59.576 --> 00:08:04.181
自分の言葉を目立たせるためだけにキュータグを使わないでください。

96
00:08:04.181 --> 00:08:10.371
練習として、誰かのひと言を一文の中に引用し、サイト属性で出典も添えて書いてみましょう。

97
00:08:10.371 --> 00:08:11.666
お疲れさまでした。

98
00:08:11.666 --> 00:08:14.976
次回はプログレス、進捗を示すタグを解説します。

99
00:08:14.976 --> 00:08:21.309
小さなタグですが、引用の作法を身につけることは、信頼されるページ作りの第一歩になります。

100
00:08:21.309 --> 00:08:24.188
ぜひ実際に手を動かして確かめてください。