HTML で削除されたテキスト

はじめに

HTML の del タグは、文書内の削除されたテキストを示すために使用されます。del タグを使用することで、削除されたテキストを取り消し線付きで表示することができます。この実験では、HTML の del タグを使用して取り消し線付きのテキストを作成する方法を説明します。

注：index.htmlでコーディングを練習し、Visual Studio Code で HTML を書く方法を学ぶことができます。画面右下の「Go Live」をクリックして、ポート 8080 でウェブサービスを実行します。その後、Web 8080タブを更新して、ウェブページをプレビューできます。

取り消し線付きのテキストを作成する

始める前に、index.htmlという名前の HTML ファイルを作成します。このファイルでは、HTML の del タグを使用して取り消し線付きのテキストを作成します。

取り消し線付きのテキストを作成するには、次の手順に従います。

1. コードエディタでindex.htmlファイルを開きます。

2. 取り消し線にするテキストに HTML の del タグ(<del>)を追加します。

   <p>The <del>quick</del> brown fox jumps over the lazy dog.</p>
   

   上記の例では、quickという単語が取り消し線付きで表示されます。

3. index.htmlファイルを保存し、ブラウザで開きます。

HTML の del タグの属性を使用する

HTML の del タグには、2 つの重要な属性「cite」と「datetime」があります。このステップでは、これらの属性をどのように使用するかを見ていきます。

1. cite 属性を追加する - 削除されたテキストを説明するドキュメントの URL を与えるために cite 属性を使用します。

   <p>
     <del cite="http://www.example.com/reason-for-deletion.html"
       >The quick brown fox jumps over the lazy dog.</del
     >
   </p>
   

2. datetime 属性を追加する - テキストが削除された時刻を示すために datetime 属性を使用します。

   <p>
     <del datetime="2022-09-03T17:12:02Z"
       >The quick brown fox jumps over the lazy dog.</del
     >
   </p>
   

挿入されたテキスト付きの取り消し線付きのテキストを作成する

多くの場合、Web ページから一部のテキストを削除する際に、その代わりに別のテキストを挿入したい場合があります。このステップでは、挿入されたテキストを表示するために ins タグをどのように使用するかを見ていきます。

1. コードエディタでindex.htmlファイルを開きます。

2. 削除されたテキストに代わる挿入されたテキストに HTML の ins タグを追加します。

   <p>The <del>quick</del> <ins>brown</ins> fox jumps over the lazy dog.</p>
   

   上記の例では、「quick」という単語が取り消し線付きで表示され、「brown」が挿入されたテキストとして表示されます。

HTML の del タグに CSS スタイルを追加する

HTML の del タグの既定の CSS スタイルは取り消し線です。必要に応じて CSS スタイルを変更できます。

1. 次の CSS コードを HTML ファイルに追加して、del タグの既定のスタイルを変更します。

   <style>
     del {
       color: red;
       text-decoration: line-through;
     }
   </style>
   

上記の例では、del タグの色が赤色に変更されています。

まとめ

HTML の del タグを使用して取り消し線付きのテキストを作成するのは簡単です。この実験では、HTML の del タグを使用して取り消し線付きのテキストを作成し、del タグに属性を追加し、挿入に ins タグを使用し、del タグの CSS スタイルを変更する方法を学びました。