VIDEO LESSON

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

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

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

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

0:00こんにちは。
0:00エイチティーエムエルリファレンス解説です。
0:03エイチティーエムエルタグ編の八十九本目は、デルタグです。
0:07デルは、文書の編集で削除された部分を示す要素です。
0:10ただ消してしまうのではなく、以前はこう書かれていた、という履歴を読み手に残すのが役割です。
0:16多くのブラウザーでは取り消し線付きで表示されます。
0:19今回は、デルが表す意味、インスとの組み合わせ、サイト属性とデイトタイム属性、
0:25具体的な使い方、ブラウザー互換性、よくある間違いまで、順番に確認していきましょう。
0:30削除と追加はセットで語られることが多いので、インスとの対比も意識しながら聞いてください。
0:36使う場面を整理します。
0:38デルが向いているのは、会場や日程、料金などが変更になったときに、古い内容を削除として残し、
0:42新しい内容と並べて見せる場面です。
0:47たとえば案内文の訂正で、何をどう直したのかが一目で分かれば、読み手は混乱しません。
0:54逆に、記事がはっきり注意している通り、デルは情報を隠すタグではありません。
1:00囲んだ文字はエイチティーエムエルの中にそのまま残るので、機密情報や個人情報は、
1:06デルで隠したつもりにならず、そもそも公開ページに出力しないことが大前提です。
1:12価格改定のお知らせなど、読み手が以前の情報を知っている場面では、特に効果を発揮します。
1:18基本の書き方を確認します。
1:21この教材では、開始タグと終了タグを明示して、その間に削除された内容を入れます。
1:27画面の例では、会場は、という文章の中で、第一教室の部分だけをデルで囲み、
1:32続けて第二教室と新しい情報を書いています。
1:37デルは文の一部分を囲む使い方が基本ですが、段落全体の削除を示すこともできます。
1:44シーエスエスで取り消し線を引くだけでも見た目は似ますが、デルを使うと、これは編集で削除された部分だ、
1:50という意味まで機械や支援技術に伝えられる点が大きな違いです。
1:57タグで意味付けしておけば、後から見直したときにも編集の意図がそのまま残ります。
2:04記事の活用事例を読み解きます。
2:06例では、会場、という案内文の中で、第一教室をデルで囲み、デイトタイム属性で二千二十六年九月二十一日という変更日を添えています。
2:16その直後に、第二教室へ変更しました、と新しい内容を続けています。
2:21閉じた情報ではなく、古い内容と新しい内容が並ぶことで、変更の経緯がその場で理解できます。
2:28試すときは、練習用ファイルのボディの適切な位置にこの例を写し、保存して再読み込みしてください。
2:35開発者ツールのエレメンツで、入れ子が崩れていないかも合わせて確認しましょう。
2:41日付を添えることで、それがいつの変更なのかも読み手に同時に伝わります。
2:46相方の要素、インスとの組み合わせを確認します。
2:50インスは、文書に追加された部分を示す要素で、多くのブラウザーでは下線付きで表示されます。
2:57デルで古い内容を削除として残し、すぐ隣にインスで新しい内容を置くと、何が何に置き換わったのかという差分が一目瞭然になります。
3:07画面の例は参加費の変更で、三千円が削除され、二千五百円が追加されたことが読み取れます。
3:14片方だけでも意味は通りますが、変更の前後を伝えたい場面では、この二つをセットで使うのが基本と考えてください。
3:23順序は、古い内容のデルを先に、新しい内容のインスを後に置くのが自然です。
3:28サイト属性についてです。
3:30サイト属性には、なぜ削除や変更を行ったのか、その理由を説明する文書や案内ページのユーアールエルを指定します。
3:39機械やブラウザーが参照するための補足情報という位置づけです。
3:44ここで大切な注意点があります。
3:46サイト属性を指定しても、画面に自動でリンクが表示されるわけではありません。
3:52読み手にも変更理由を知ってほしい場合は、属性だけに頼らず、本文の中にも理由や案内へのリンクをきちんと書いてください。
4:02属性はあくまで裏側の補足、本文が表側の説明、と分けて考えると整理しやすくなります。
4:09指定は任意ですが、大きな訂正ほど、根拠を示しておく価値が高くなります。
4:14デイトタイム属性についてです。
4:17デイトタイム属性には、その削除が行われた日時を、機械が読み取れる決まった書式で指定します。
4:24基本は、二千二十六年十月一日のように、年、月、日をハイフンでつないだ形です。
4:30必要に応じて、画面の二つ目の例のように、大文字のティーを挟んで時刻まで含めることもできます。
4:37この属性があると、いつ変更されたのかをプログラムが正確に拾えます。
4:42逆に、人間向けの感覚的な表現をそのまま書くと無効な値になってしまうので、
4:47必ず決められた書式で書くことを意識してください。
4:52日付だけでも十分に役立ちますので、まずは日単位の指定から始めてみてください。
4:58似た要素、エスタグとの違いを確認します。
5:01エスタグも取り消し線で表示されますが、意味が違います。
5:05エスは、もはや正確ではなくなった情報や、関係がなくなった情報を示すものです。
5:10一方デルは、文書を編集する過程で削除した、という履歴を示します。
5:15古い価格が単に無効になっただけならエス、編集の経緯として削除を残すならデル、
5:19と使い分けてください。
5:23見た目については、取り消し線の有無や色をシーエスエスで調整できますが、色だけに頼らず、
5:28線と文脈でも削除だと分かる形を保ちましょう。
5:33迷ったときは、編集の履歴なのか、情報の失効なのか、という視点で判断してください。
5:39ブラウザー互換性を確認します。
5:41記事が紹介するエムディーエヌのデータでは、デル要素本体は、クロームが一以降、
5:46ファイアフォックスが一以降、エッジが十二以降、サファリが四以前から対応している、
5:51非常に古くから使える要素です。
5:57今回扱ったサイト属性とデイトタイム属性についても、クローム一以降、エッジ十二以降、
6:03ファイアフォックス一以降、サファリ三以降という対応状況が示されています。
6:09実務では安心して使える部類ですが、数値は確認時点の記録です。
6:14モバイル環境も含め、対象端末で表示を一度確かめる習慣は付けておきましょう。
6:20特別な配慮が必要になる場面は少ないと言えます。
6:24よくある間違いを三つ挙げます。
6:27一つ目は、文書の編集とは関係のない、単に古くなった情報までデルで囲んでしまうことです。
6:33その場合はエスタグが適切で、デルは編集履歴を示す場面に絞ります。
6:38二つ目は、見せたくない情報をデルで囲んで隠したつもりになることです。
6:43ソースを表示すれば誰でも読めてしまうので、公開できない内容は最初から出力しません。
6:49三つ目は、デイトタイム属性の書式を崩してしまうことです。
6:54機械可読な値でなければ属性の意味が失われます。
6:57あわせて、小さい画面幅や文字拡大でも、前後の文章と一緒に読みやすいかを確認してください。
7:04この三つを避けるだけで、読み手に伝わる履歴の質が大きく変わります。
7:09まとめです。
7:10デルは、文書の編集で削除された部分を、履歴として読み手に残すための要素です。
7:15最後にチェックリストで確認しましょう。
7:18まず、その削除が本当に編集の経緯として示すべきものか、単なる無効情報ならエスタグではないか。
7:24次に、追加された内容があるなら、インスと並べて前後関係が分かる形になっているか。
7:29そして、必要な場面では、サイト属性で理由を、デイトタイム属性で日時を、正しい書式で補えているか。
7:36秘密情報を隠す用途には使わない、という線引きも忘れないでください。
7:41これでデルタグの解説を終わります。
7:43ぜひ、案内文や料金表を改訂する場面で、実際に試してみてください。

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

この動画で学べること

delタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。文書から削除された部分。古い価格などの単なる無効情報とは区別します。

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