WEBVTT

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

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

3
00:00:03.957 --> 00:00:08.056
エイチティーエムエルタグ編の五十二本目は、マークタグです。

4
00:00:08.056 --> 00:00:15.406
マークは、文章の中で今この文脈で注目してほしい部分を、蛍光ペンで線を引くように目立たせるためのタグです。

5
00:00:15.406 --> 00:00:19.646
代表的な使い方は、検索した言葉と一致した箇所を示すことです。

6
00:00:19.646 --> 00:00:23.745
多くのブラウザーでは、黄色い背景でハイライト表示されます。

7
00:00:23.745 --> 00:00:27.632
今回は、ストロングなど似たタグとの違い、基本の書き方、シーエスエスでの色の変え方まで、

8
00:00:27.632 --> 00:00:31.518
順に学んでいきましょう。

9
00:00:31.518 --> 00:00:38.020
蛍光ペンで大切な行に色を付ける場面を思い浮かべると、使い方のイメージがつかみやすくなります。

10
00:00:38.020 --> 00:00:41.334
まず、どんな場面で使うのかを整理します。

11
00:00:41.334 --> 00:00:49.786
マークが向いているのは、読者が今探しているものと一致する部分や、その場の文脈で特に関連が深い部分です。

12
00:00:49.786 --> 00:00:55.917
たとえば、サイト内検索の結果画面で、検索語と同じ言葉を目立たせる場面です。

13
00:00:55.917 --> 00:01:01.220
読者は長い文章の中から、自分の探した言葉をすぐに見つけられます。

14
00:01:01.220 --> 00:01:07.848
また、引用文の中で、説明のために後から注目してほしい一節を示すときにも使えます。

15
00:01:07.848 --> 00:01:15.305
もともと重要だからではなく、今の文脈で目印が必要だから使う、という点が判断のポイントです。

16
00:01:15.305 --> 00:01:22.928
探している言葉がすぐに目に入るかどうかで、検索結果ページの使いやすさは大きく変わってきます。

17
00:01:22.928 --> 00:01:24.641
基本の形を確認します。

18
00:01:24.641 --> 00:01:31.493
マークは開始タグと終了タグを明示して書き、目立たせたい文字の範囲だけをその間に置きます。

19
00:01:31.493 --> 00:01:39.124
画面の例では、検索結果という文章の中で、エイチティーエムエルという言葉だけをマークで囲んでいます。

20
00:01:39.124 --> 00:01:46.911
これだけで、その言葉が検索語と一致したことが読み手に伝わり、ブラウザーではハイライト表示になります。

21
00:01:46.911 --> 00:01:51.427
段落を表すピー要素など、文章の要素の中に置くのが基本です。

22
00:01:51.427 --> 00:01:56.411
囲む範囲は必要最小限に絞り、文章全体を囲わないようにしましょう。

23
00:01:56.411 --> 00:02:02.796
短いコードですが、意味と見た目が同時に伝わる、マークらしい分かりやすい使い方です。

24
00:02:02.796 --> 00:02:05.537
よく似たタグと比べてみましょう。

25
00:02:05.537 --> 00:02:11.874
ストロングは、警告文のように内容そのものが重要で緊急であることを示します。

26
00:02:11.874 --> 00:02:16.328
エムは、言葉に力を込めて読んでほしい強調を示します。

27
00:02:16.328 --> 00:02:21.809
ビーは、製品名など、ほかの部分と区別して目を引くためのものです。

28
00:02:21.809 --> 00:02:27.033
これらに対してマークは、内容がもともと重要かどうかではなく、検索語への一致のように、

29
00:02:27.033 --> 00:02:32.258
今の文脈で関連がある部分への目印です。

30
00:02:32.258 --> 00:02:37.739
記事でも、恒常的な重要性ならストロングを選ぶと案内されています。

31
00:02:37.739 --> 00:02:40.479
意味の違いで選ぶことが大切です。

32
00:02:40.479 --> 00:02:48.016
迷ったときは、その部分がもともと重要なのか、今だけ注目したいのかを自問してみてください。

33
00:02:48.016 --> 00:02:50.553
マークの属性について説明します。

34
00:02:50.553 --> 00:02:54.358
この要素には、必須となる専用の属性はありません。

35
00:02:54.358 --> 00:02:59.115
必要に応じて、グローバル属性と呼ばれる共通の属性を使います。

36
00:02:59.115 --> 00:03:06.091
代表例は、文書内で一意の識別子であるアイディー、シーエスエスやジャバスクリプトでまとめて選ぶためのクラス、

37
00:03:06.091 --> 00:03:13.068
内容の言語を示すラング、そしてアプリ独自の値を保持するデータ属性です。

38
00:03:13.068 --> 00:03:20.520
画面の例のようにクラスを付けておくと、検索ヒット専用の色をシーエスエスでまとめて指定できます。

39
00:03:20.520 --> 00:03:24.801
属性で意味が変わるわけではない点も覚えておきましょう。

40
00:03:24.801 --> 00:03:31.460
検索結果のページではクラス名をそろえておくと、後から色を一括で直せてとても便利です。

41
00:03:31.460 --> 00:03:34.981
記事の活用事例を、少し広げて読み解きます。

42
00:03:34.981 --> 00:03:44.537
画面の例は、サイト内検索でエイチティーエムエルと検索した結果の一覧で、一致した言葉をすべてマークで囲んだものです。

43
00:03:44.537 --> 00:03:50.908
読者は一覧を上から眺めるだけで、なぜこの結果が出たのかをすぐに理解できます。

44
00:03:50.908 --> 00:03:55.100
ポイントは、一致した箇所だけを正確に囲むことです。

45
00:03:55.100 --> 00:04:01.974
ただし、検索そのものの処理や、一致箇所を探す処理は、マークタグだけでは行えません。

46
00:04:01.974 --> 00:04:06.249
サーバー側やジャバスクリプトの処理で一致を見つけ、結果の表示にマークを使う、

47
00:04:06.249 --> 00:04:10.524
という役割分担になります。

48
00:04:10.524 --> 00:04:16.392
色が付いている理由が一目で分かることが、読者の迷いを減らしてくれます。

49
00:04:16.392 --> 00:04:18.394
見た目の変え方を確認します。

50
00:04:18.394 --> 00:04:25.543
多くのブラウザーでは、マークは黄色い背景に黒い文字で表示されますが、これはあくまで初期の見た目です。

51
00:04:25.543 --> 00:04:32.263
シーエスエスでバックグラウンドとカラーを指定すれば、サイトのテーマに合わせた色に変えられます。

52
00:04:32.263 --> 00:04:38.268
画面の例では、柔らかい黄色の背景に濃い文字色を合わせ、左右に少し余白を付けています。

53
00:04:38.268 --> 00:04:46.274
このとき大切なのは、テーマを変えたあとも背景と文字のコントラスト、つまり読みやすさの差を十分に確保することです。

54
00:04:46.274 --> 00:04:50.135
色だけで意味を伝えない配慮も忘れないようにしましょう。

55
00:04:50.135 --> 00:04:56.140
暗い背景のテーマでは、明るいハイライト色と濃い文字色の組み合わせを試してみましょう。

56
00:04:56.140 --> 00:05:01.560
もう一つの代表的な使い方として、引用文の中での使い方を紹介します。

57
00:05:01.560 --> 00:05:09.608
長い引用文を載せるとき、その中で特に説明したい一節にマークを付けると、読者の視線を自然に導けます。

58
00:05:09.608 --> 00:05:15.356
画面の例では、引用文の中の小さく始めて、という言葉をマークしています。

59
00:05:15.356 --> 00:05:20.201
これは引用した側が後から付けた目印であり、元の文章が強調していたわけではない、

60
00:05:20.201 --> 00:05:25.047
という点がストロングやエムとの違いです。

61
00:05:25.047 --> 00:05:31.124
引用元の意味を変えてしまわないよう、目印を付ける範囲は慎重に選びましょう。

62
00:05:31.124 --> 00:05:36.872
教科書や資料の説明など、長い文章を扱う場面で特に役立つテクニックです。

63
00:05:36.872 --> 00:05:39.566
よくある失敗も確認しておきます。

64
00:05:39.566 --> 00:05:45.627
一つ目は、ただ目立たせたいという見た目だけの理由でマークを使うことです。

65
00:05:45.627 --> 00:05:50.846
意味のない装飾なら、スパン要素とシーエスエスで表現しましょう。

66
00:05:50.846 --> 00:05:55.223
二つ目は、内容が重要だからという理由で使うことです。

67
00:05:55.223 --> 00:05:57.581
それはストロングの役割です。

68
00:05:57.581 --> 00:06:02.800
三つ目は、画面の例のように文章の大部分を囲ってしまうことです。

69
00:06:02.800 --> 00:06:07.682
全部がハイライトされると、かえって何も目立たなくなります。

70
00:06:07.682 --> 00:06:12.060
マークは必要な箇所に絞って使うほど効果を発揮します。

71
00:06:12.060 --> 00:06:16.942
付ける前に、今の文脈で本当に目印が必要かを確認しましょう。

72
00:06:16.942 --> 00:06:23.340
目印は少なく絞るほど、一つひとつの目印が持つ案内役としての力が強くなります。

73
00:06:23.340 --> 00:06:25.458
ブラウザー互換性を確認します。

74
00:06:25.458 --> 00:06:31.885
記事が参照するエムディーエヌの記録では、マーク要素本体は、クロームが七以降、

75
00:06:31.885 --> 00:06:38.311
エッジが十二以降、ファイアフォックスが四以降、サファリが五点一以降と、主要ブラウザーで広く対応しています。

76
00:06:38.311 --> 00:06:40.429
安心して使える要素の一つです。

77
00:06:40.429 --> 00:06:47.491
ただし、これは要素本体の対応であり、検索処理など組み合わせる機能が同じように動く保証ではありません。

78
00:06:47.491 --> 00:06:52.151
作ったあとは、三百二十ピクセル程度の細い画面幅や文字を拡大した状態でも、

79
00:06:52.151 --> 00:06:56.812
ハイライト部分が欠けずに読めるかをあわせて確認してください。

80
00:06:56.812 --> 00:07:02.320
対応が広いからこそ、色や範囲といった使い方の工夫に集中できる要素だと言えます。

81
00:07:02.320 --> 00:07:03.842
最後にまとめです。

82
00:07:03.842 --> 00:07:11.115
マークタグは、検索語への一致のように、今の文脈で注目してほしい部分に付ける目印でした。

83
00:07:11.115 --> 00:07:12.806
ポイントは三つです。

84
00:07:12.806 --> 00:07:18.726
一つ目、重要さを示すストロングとは役割が違い、文脈との関連を示すこと。

85
00:07:18.726 --> 00:07:23.631
二つ目、専用の属性はなく、必要に応じて共通属性を使うこと。

86
00:07:23.631 --> 00:07:30.227
三つ目、見た目はシーエスエスで変えられますが、範囲は必要最小限に絞ることです。

87
00:07:30.227 --> 00:07:36.823
練習として、検索結果の例を作り、検索語の部分だけをマークで囲んでみてください。

88
00:07:36.823 --> 00:07:38.345
お疲れさまでした。

89
00:07:38.345 --> 00:07:45.956
小さな目印を正しく使えるようになると、読み手に寄り添ったページ作りができるようになります。