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

HTMLで取り消し線（打ち消し線）テキストを表示する方法【CSSでの実装手順を解説】

HTMLで取り消し線（打ち消し線）のついたテキストを表示したい場合、かつては<strike>〜</strike>タグが使われていました。このタグは文字通り、テキストに取り消し線を引いて表示します。

しかし、<strike>タグはHTML5では廃止（非推奨）されており、現在のWeb制作では使用すべきではありません。代わりに、CSSのtext-decorationプロパティを使うのが標準的な方法です。

CSSのtext-decorationプロパティを使う方法

CSSで取り消し線を実現するには、text-decoration: line-through;というスタイルを指定します。HTML要素に直接スタイルを適用する場合は、style属性を使用します。style属性はインラインスタイルを指定するためのもので、<p>タグをはじめとするさまざまなHTML要素と組み合わせて使えます。

なお、取り消し線を表現する方法としては、CSS以外にも意味を持たせたタグとして<s>タグ（正確でなくなった内容）や<del>タグ（削除された文書）があります。単なる装飾目的ならCSS、文書上の意味を持たせたい場合はこれらのタグを使い分けるとよいでしょう。

サンプルコード

以下のコードを実行すると、HTMLで取り消し線付きテキストを表示できます。

<!DOCTYPE html>
<html>
<head>
<title>HTML 取り消し線テキスト</title>
</head>

<body>
<h1>見出し</h1>
<p style="text-decoration: line-through;">
取り消し線のついたテキスト
</p>
</body>
</html>

実行結果

このコードをブラウザで開くと、「取り消し線のついたテキスト」という部分に横線が引かれた状態で表示されます。CSSのline-throughは、古いブラウザでも広くサポートされているため、安心して使用できる手法です。

  1. HTMLでテキストの方向を設定する方法【directionプロパティの使い方】

    HTMLでテキストの表示方向を設定するには、style属性を使用します。style属性は要素にインラインスタイルを指定するための属性で、CSSのdirectionプロパティと組み合わせることで、テキストの流れる方向（左から右／右から左）を制御できます。 ただし、style属性で指定したスタイルはインラインスタイルとして扱われるため、<style>タグや外部スタイルシートで定義されたグローバルなスタイルよりも優先される点に注意してください。 directionプロパティに指定できる値 番号値と説明 1ltr左から右へ記述する（left to right）。日本語や英語など、ほ

  2. HTMLで略語や頭字語をマークアップする方法【abbrタグの使い方】

    HTMLで略語や頭字語をマークするには？ HTMLで略語（abbreviation）や頭字語（acronym）をマークアップするには、<abbr>タグを使用します。略語や頭字語とは、言葉を短く省略した形で、一連の文字列として表現されるものです。代表的な例としては、「Mr.」「MRP」「GMT」「NASA」などが挙げられます。 <abbr>タグにtitle属性を指定すると、その要素にマウスカーソルを合わせた際に正式名称がツールチップとして表示されます。これにより、訪問者にとって意味が分かりやすくなり、文書のアクセシビリティやSEOの面でもメリットがあります。 なお、かつて