HTML で削除されたテキスト

はじめに

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

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

Skills Graph

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

始める前に、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スタイルを変更する方法を学びました。