VIDEO LESSON

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

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

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

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

0:00こんにちは。
0:00エイチティーエムエル、リファレンス解説です。
0:04エイチティーエムエルタグ編の六十本目は、インス、タグです。
0:08インスは、インサート、つまり挿入という言葉に由来し、文書が公開されたあとに追加された部分を示すタグです。
0:16たとえば、お知らせの開催時間が後から書き換わったとき、古い内容を消して終わりにするのではなく、
0:21何が新しく加わったかを読者に残せます。
0:26ただ下線を引いただけでは装飾にしか見えませんが、インスで囲むことで、これは後から追加された内容です、
0:31という編集上の意味が伝わります。
0:37今回は基本から、削除を表すデルとの組み合わせまで学びましょう。
0:41この考え方は、ニュースやお知らせのように、公開したあとも内容が更新され続けるページで特に役立ちます。
0:49どんな場面で使うか考えてみましょう。
0:52一つ目は、イベントのお知らせで開始時刻や参加費が変わったときです。
0:57新しい情報をインスで示せば、何が変わったかが一目で分かります。
1:01二つ目は、利用規約やキャンペーン案内に一文を追記したときです。
1:06追加した部分を明示すると、前に読んだ人にも変更点が伝わります。
1:11逆に、普通の文章を目立たせたいだけの場面では使いません。
1:15インスは見た目を変える道具ではなく、編集の履歴を意味として残すためのタグです。
1:21後から足されたかどうか、という視点で判断しましょう。
1:25週報や議事録のように、版を重ねる文書でも、どこが新しい情報かを示す手がかりになります。
1:31基本の書き方を確認します。
1:33使い方はシンプルで、追加した語句や文章を、開始タグと終了タグで囲むだけです。
1:39画面の例では、持ち物の説明にタオルという言葉を後から追加したことを示しています。
1:45多くのブラウザーでは、インスの内容は初期状態で下線付きで表示されるため、
1:50見た目でも追加部分に気づきやすくなっています。
1:54ただし、下線はあくまでブラウザーの初期表示です。
1:58リンクと紛らわしい場合は、後で学ぶシーエスエスで色や線の種類を変えて、リンクと区別できるように整えましょう。
2:07文章の一部だけを囲むことも、段落ごと追加した内容を囲むこともでき、追加の単位に合わせて使い分けられます。
2:15インスが最も力を発揮するのは、削除を表すデルタグと組み合わせたときです。
2:20デルは取り消し線で削除された内容を、インスは下線で新しく追加された内容を示します。
2:26画面の例は記事でも紹介されている形で、開催時間が十三時から十四時に変わったことを表しています。
2:33古い時刻をデル、新しい時刻をインスで囲むと、変更前と変更後が一文の中で並び、
2:37読み手は履歴を追えます。
2:41文章を丸ごと書き換えてしまう前に、変更を見せたい部分だけを、この二つのタグで丁寧に示すのがコツです。
2:49取り消しと追加が並ぶことで、読み手は元の文を頭の中で復元しなくても、変更の流れをそのまま追うことができます。
2:57次に、インス専用の属性を見ていきます。
3:00まずデイトタイム属性です。
3:02これは、その部分をいつ追加・編集したかを、機械が読み取れる形式で記録するための属性です。
3:08たとえば二千二十六年九月二十一日に変更したなら、その日付を決められた書式で書きます。
3:14時刻まで含めることもできます。
3:16この値は画面にそのまま表示されるわけではありませんが、検索エンジンや支援技術などが変更時点を理解する手がかりになります。
3:25書くときは、思いつきの表記ではなく、有効な日時の書式になっているかを必ず確認しましょう。
3:32日付だけでなく、時刻まで含めた正確な記録は、あとから履歴を確認するときの目印にもなります。
3:38もう一つの専用属性が、サイト属性です。
3:41サイト属性には、なぜこの変更を行ったのかを説明したページや、変更の出典となる文書のユーアールエルを指定します。
3:48前の画面のデイトタイムと一緒に使うこともできます。
3:52注意したいのは、サイト属性を指定しても、画面上にリンクが自動で表示されるわけではないことです。
3:58読者にも理由を伝えたい場合は、変更のお知らせとして通常の文章やリンクを本文に別途用意しましょう。
4:05属性は機械向けの補足、本文は人向けの説明、と役割を分けて考えると整理しやすくなります。
4:11理由を説明したページが別にある場合は、その場所を示しておくと、変更の信頼性も伝わりやすくなります。
4:17活用例として、お知らせの訂正文を組み立ててみましょう。
4:22開始時刻が十三時から十四時に変わる場合、古い時刻をデル、新しい時刻をインスで示し、
4:27デイトタイムで変更日を添えます。
4:32ここで大切なのが、記事でも注意されている、色や下線だけに頼らないことです。
4:38画面が見づらい環境や、線の意味を知らない読み手には、変更点が伝わらないことがあります。
4:46そこで、十四時に変更します、という通常の文章を一緒に書いておくと、誰にでも確実に伝わります。
4:54タグの意味と文章の説明を両方そろえることが、親切な訂正文のポイントです。
5:00見た目について触れておきます。
5:02インスは多くのブラウザーで下線付きで表示されますが、下線はリンクの表示とも似ているため、
5:07読み手がクリックできるものと誤解するおそれがあります。
5:12その場合はシーエスエスで、下線を消して薄い背景色を付けるなど、リンクとは違う見た目に整えられます。
5:19画面の例では、淡い緑の背景で追加部分をそっと目立たせています。
5:24ただし、見た目を消してしまうと変更点が分からなくなるので、背景や太字など、
5:27別の手がかりは残しましょう。
5:31意味付けはインス、見た目の調整はシーエスエス、という分担は変わりません。
5:36デルとインスで色をそろえておくと、削除は赤系、追加は緑系のように、変更の種類が直感的に伝わります。
5:43似たタグとの使い分けを整理します。
5:45デルは、文書の編集で削除された部分を示し、インスと対で使います。
5:50エスタグは、セール終了後の旧価格のように、もはや正確ではなくなった情報を示すもので、
5:54編集の削除とは意味が違います。
5:57ユータグは、綴りの指摘など、文字に注釈があることを示すためのものです。
6:02下線や取り消し線といった見た目が似ていても、意味はそれぞれ異なります。
6:07後から追加された部分かどうかを基準に、追加ならインス、編集による削除ならデル、
6:11単に古くなった情報ならエス、と選び分けましょう。
6:16ブラウザー互換性を確認します。
6:18記事が参照するエムディーエヌの記録では、インス要素はクロームが一以降、エッジが十二以降、
6:23ファイアフォックスが一以降、サファリが四以前から対応しています。
6:27サイト属性とデイトタイム属性も、各ブラウザーの初期の頃から対応している項目として挙げられています。
6:34歴史の長い基本要素なので、現在の主要ブラウザーでは安心して使えます。
6:38実装後は、開発者ツールで追加部分が正しくインスとして入っているか、細い画面幅でも変更点が欠けずに読めるかを確認しましょう。
6:46最後にまとめです。
6:47インスタグは、文書に後から追加された部分を示す要素でした。
6:52ポイントは三つです。
6:54一つ目、追加した語句や文をインスで囲み、削除された部分のデルと組み合わせると、
6:59変更前と変更後が一目で分かること。
7:03二つ目、デイトタイム属性で変更した日時を、サイト属性で理由の出どころを、
7:08機械が読める形で補えること。
7:12三つ目、下線や色だけに頼らず、変更したという事実を通常の文章でも説明することです。
7:19練習として、お知らせの時刻変更をデルとインスで書いてみて、ブラウザーで表示を確認してみてください。
7:27お疲れさまでした。
7:29まずは身近なお知らせ文を一つ選び、変更前と変更後を並べる練習から始めてみましょう。

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

この動画で学べること

insタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。文書に追加された部分。datetime で編集日時を補足できます。

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