HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLで削除されたテキスト（打ち消し線）を表示する方法｜タグの使い方を解説

HTMLで文書から削除されたテキストを表現したい場合は、<del>タグを使用します。このタグで囲まれたテキストは、多くのブラウザでは打ち消し線（取り消し線）付きで表示され、「この部分は削除された」という意味を視覚的かつ意味的に伝えることができます。

<del>タグは、修正履歴や変更履歴を示すドキュメント、ブログ記事の訂正箇所など、テキストが削除されたことを明示したい場面で活用できます。

<del>タグで使用できる主な属性

<del>タグには、以下の2つの属性を指定できます。

属性 値 説明
cite URL テキストが削除された理由を説明する別のドキュメントへのURLを指定します。ユーザーには直接表示されませんが、削除の背景情報を参照できるようにします。
datetime YYYY-MM-DDThh:mm:ss テキストが削除された日時を指定します。機械可読な形式で記録することで、変更履歴の管理に役立ちます。

使用例：削除されたテキストを表示するコード

以下のコードを実行すると、<del>タグを使って削除されたテキストを表示できます。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML del タグの例</title>
   </head>
   <body>
      <p>次のテキストは <del>HTML の del タグ</del> を使って削除されたものです。
   </body>
</html>

実行結果

上記のコードをブラウザで開くと、「HTML の del タグ」の部分が打ち消し線付きで表示されます。

datetime属性を指定した応用例

削除日時を明示したい場合は、以下のようにdatetime属性を追加します。

<p>価格は <del datetime="2024-04-01T10:00:00">5,000円</del> でした。
現在は <ins>3,500円</ins> です。</p>

この例のように、<del>タグと対になる<ins>タグ（挿入されたテキストを表す）と組み合わせると、修正前後の情報を分かりやすく提示でき、セール情報や改定履歴の表現に便利です。

まとめ

  • 削除されたテキストには<del>タグを使用し、ブラウザでは打ち消し線で表示される
  • cite属性で削除理由の参照先URL、datetime属性で削除日時を指定できる
  • <ins>タグと組み合わせることで、追加・削除の履歴を効果的に表現できる
  1. HTMLで削除されたテキストを表す方法｜delタグの使い方と実例付き解説

    HTMLで削除されたテキストを示すには、<del>〜</del>タグを使用します。このタグで囲まれたテキストには、自動的に打ち消し線（取り消し線）が表示されます。<del>タグはHTML5で導入されました。それ以前は<strike>タグが削除済みテキストの表示に使われていましたが、こちらは現在非推奨（廃止予定）となっているため、新しく作成するページでは使用しないようにしましょう。<del>タグを使う際の注意点<del>タグを使用する際は、以下の点に注意してください。開始タグと終了タグの両方が必須です。片方だけでは正しく機能

  2. HTMLでテキストを右から左（RTL）に表示する方法【CSSのdirectionプロパティ】

    HTMLでテキストを右から左（Right-to-Left：RTL）に表示するには、CSSのdirectionプロパティを使用します。style属性と組み合わせることで、特定の要素に対してインラインスタイルとして文字の方向を指定できます。 directionプロパティに指定できる値 directionプロパティでは、以下の3つの値を設定できます。 No.値と説明 1ltr左から右へ記述する（デフォルトの方向） 2rtl右から左へ記述する 3initial初期値に戻す style属性を使った指定方法 テキストを右から左に表示する場合は、style属性でCSSのdirectionプロパテ