VIDEO LESSON

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

再生時間 7:46動画を別のタブで開く ↗

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

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

0:00こんにちは。
0:00エイチティーエムエル、リファレンス解説です。
0:03エイチティーエムエルタグ編の五十二本目は、マークタグです。
0:08マークは、文章の中で今この文脈で注目してほしい部分を、蛍光ペンで線を引くように目立たせるためのタグです。
0:15代表的な使い方は、検索した言葉と一致した箇所を示すことです。
0:19多くのブラウザーでは、黄色い背景でハイライト表示されます。
0:23今回は、ストロングなど似たタグとの違い、基本の書き方、シーエスエスでの色の変え方まで、
0:27順に学んでいきましょう。
0:31蛍光ペンで大切な行に色を付ける場面を思い浮かべると、使い方のイメージがつかみやすくなります。
0:38まず、どんな場面で使うのかを整理します。
0:41マークが向いているのは、読者が今探しているものと一致する部分や、その場の文脈で特に関連が深い部分です。
0:49たとえば、サイト内検索の結果画面で、検索語と同じ言葉を目立たせる場面です。
0:55読者は長い文章の中から、自分の探した言葉をすぐに見つけられます。
1:01また、引用文の中で、説明のために後から注目してほしい一節を示すときにも使えます。
1:07もともと重要だからではなく、今の文脈で目印が必要だから使う、という点が判断のポイントです。
1:15探している言葉がすぐに目に入るかどうかで、検索結果ページの使いやすさは大きく変わってきます。
1:22基本の形を確認します。
1:24マークは開始タグと終了タグを明示して書き、目立たせたい文字の範囲だけをその間に置きます。
1:31画面の例では、検索結果という文章の中で、エイチティーエムエルという言葉だけをマークで囲んでいます。
1:39これだけで、その言葉が検索語と一致したことが読み手に伝わり、ブラウザーではハイライト表示になります。
1:46段落を表すピー要素など、文章の要素の中に置くのが基本です。
1:51囲む範囲は必要最小限に絞り、文章全体を囲わないようにしましょう。
1:56短いコードですが、意味と見た目が同時に伝わる、マークらしい分かりやすい使い方です。
2:02よく似たタグと比べてみましょう。
2:05ストロングは、警告文のように内容そのものが重要で緊急であることを示します。
2:11エムは、言葉に力を込めて読んでほしい強調を示します。
2:16ビーは、製品名など、ほかの部分と区別して目を引くためのものです。
2:21これらに対してマークは、内容がもともと重要かどうかではなく、検索語への一致のように、
2:27今の文脈で関連がある部分への目印です。
2:32記事でも、恒常的な重要性ならストロングを選ぶと案内されています。
2:37意味の違いで選ぶことが大切です。
2:40迷ったときは、その部分がもともと重要なのか、今だけ注目したいのかを自問してみてください。
2:48マークの属性について説明します。
2:50この要素には、必須となる専用の属性はありません。
2:54必要に応じて、グローバル属性と呼ばれる共通の属性を使います。
2:59代表例は、文書内で一意の識別子であるアイディー、シーエスエスやジャバスクリプトでまとめて選ぶためのクラス、
3:06内容の言語を示すラング、そしてアプリ独自の値を保持するデータ属性です。
3:13画面の例のようにクラスを付けておくと、検索ヒット専用の色をシーエスエスでまとめて指定できます。
3:20属性で意味が変わるわけではない点も覚えておきましょう。
3:24検索結果のページではクラス名をそろえておくと、後から色を一括で直せてとても便利です。
3:31記事の活用事例を、少し広げて読み解きます。
3:34画面の例は、サイト内検索でエイチティーエムエルと検索した結果の一覧で、一致した言葉をすべてマークで囲んだものです。
3:44読者は一覧を上から眺めるだけで、なぜこの結果が出たのかをすぐに理解できます。
3:50ポイントは、一致した箇所だけを正確に囲むことです。
3:55ただし、検索そのものの処理や、一致箇所を探す処理は、マークタグだけでは行えません。
4:01サーバー側やジャバスクリプトの処理で一致を見つけ、結果の表示にマークを使う、
4:06という役割分担になります。
4:10色が付いている理由が一目で分かることが、読者の迷いを減らしてくれます。
4:16見た目の変え方を確認します。
4:18多くのブラウザーでは、マークは黄色い背景に黒い文字で表示されますが、これはあくまで初期の見た目です。
4:25シーエスエスでバックグラウンドとカラーを指定すれば、サイトのテーマに合わせた色に変えられます。
4:32画面の例では、柔らかい黄色の背景に濃い文字色を合わせ、左右に少し余白を付けています。
4:38このとき大切なのは、テーマを変えたあとも背景と文字のコントラスト、つまり読みやすさの差を十分に確保することです。
4:46色だけで意味を伝えない配慮も忘れないようにしましょう。
4:50暗い背景のテーマでは、明るいハイライト色と濃い文字色の組み合わせを試してみましょう。
4:56もう一つの代表的な使い方として、引用文の中での使い方を紹介します。
5:01長い引用文を載せるとき、その中で特に説明したい一節にマークを付けると、読者の視線を自然に導けます。
5:09画面の例では、引用文の中の小さく始めて、という言葉をマークしています。
5:15これは引用した側が後から付けた目印であり、元の文章が強調していたわけではない、
5:20という点がストロングやエムとの違いです。
5:25引用元の意味を変えてしまわないよう、目印を付ける範囲は慎重に選びましょう。
5:31教科書や資料の説明など、長い文章を扱う場面で特に役立つテクニックです。
5:36よくある失敗も確認しておきます。
5:39一つ目は、ただ目立たせたいという見た目だけの理由でマークを使うことです。
5:45意味のない装飾なら、スパン要素とシーエスエスで表現しましょう。
5:50二つ目は、内容が重要だからという理由で使うことです。
5:55それはストロングの役割です。
5:57三つ目は、画面の例のように文章の大部分を囲ってしまうことです。
6:02全部がハイライトされると、かえって何も目立たなくなります。
6:07マークは必要な箇所に絞って使うほど効果を発揮します。
6:12付ける前に、今の文脈で本当に目印が必要かを確認しましょう。
6:16目印は少なく絞るほど、一つひとつの目印が持つ案内役としての力が強くなります。
6:23ブラウザー互換性を確認します。
6:25記事が参照するエムディーエヌの記録では、マーク要素本体は、クロームが七以降、
6:31エッジが十二以降、ファイアフォックスが四以降、サファリが五点一以降と、主要ブラウザーで広く対応しています。
6:38安心して使える要素の一つです。
6:40ただし、これは要素本体の対応であり、検索処理など組み合わせる機能が同じように動く保証ではありません。
6:47作ったあとは、三百二十ピクセル程度の細い画面幅や文字を拡大した状態でも、
6:52ハイライト部分が欠けずに読めるかをあわせて確認してください。
6:56対応が広いからこそ、色や範囲といった使い方の工夫に集中できる要素だと言えます。
7:02最後にまとめです。
7:03マークタグは、検索語への一致のように、今の文脈で注目してほしい部分に付ける目印でした。
7:11ポイントは三つです。
7:12一つ目、重要さを示すストロングとは役割が違い、文脈との関連を示すこと。
7:18二つ目、専用の属性はなく、必要に応じて共通属性を使うこと。
7:23三つ目、見た目はシーエスエスで変えられますが、範囲は必要最小限に絞ることです。
7:30練習として、検索結果の例を作り、検索語の部分だけをマークで囲んでみてください。
7:36お疲れさまでした。
7:38小さな目印を正しく使えるようになると、読み手に寄り添ったページ作りができるようになります。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

markタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。検索語への一致など、その文脈で注目する部分です。

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