はじめに
HTML では、<s> タグは取り消し線付きのテキストまたは線が引かれたテキストを表します。これは、関係ないまたはもはや正確でないテキストコンテンツを表示するために使用できます。文書編集目的では、<del> タグの代わりに <s> タグを使用することは不可欠です。この実験では、<s> タグを使用して HTML で取り消し線付きのテキストを作成する方法を学びます。
注：
index.htmlでコーディングを練習し、Visual Studio Code で HTML を書く方法 を学ぶことができます。画面右下の「Go Live」をクリックして、ポート 8080 でウェブサービスを実行します。その後、Web 8080 タブを更新してウェブページをプレビューできます。
基本的な HTML ファイルを作成する
index.html という名前の HTML ファイルを作成します。以下は、基本的な HTML 構造を作成する方法です。
<!doctype html>
<html>
<head>
<title>Creating a Strikethrough Text in HTML</title>
</head>
<body>
<!-- Your HTML code will go here -->
</body>
</html>
取り消し線付きのテキストを追加する
HTML ファイルの body タグ内に、取り消し線付きのテキストを表す <s> タグを追加します。基本構文の書き方は以下の通りです。
<s>This text has a strikethrough.</s>
HTML の出力では、上記のテキストに線が引かれた状態で表示されます。
属性を追加する
<s> タグには特定の属性はありませんが、グローバル属性とイベント属性の両方をサポートしています。以下は、<s> タグにイベント属性を追加する方法です。
<s onclick="alert('This is a strikethrough text.')">Click me!</s>
上記のコードでは、onclick イベント属性をクリックすると、取り消し線付きのテキストに関連するアラートメッセージが表示されます。
CSS スタイルを追加する
取り消し線付きのテキストの外観を変更するために、独自の CSS スタイルを追加することもできます。以下は、<s> タグに CSS スタイルを追加する方法です。
<style>
s {
text-decoration: line-through;
color: red;
font-size: 20px;
}
</style>
上記のコードでは、text-decoration プロパティが取り消し線を作成し、color プロパティが文字色を赤色に変更し、font-size プロパティが文字サイズを 20px に設定します。
まとめ
この実験では、<s> タグを使用して HTML で取り消し線付きのテキストを作成する方法を学びました。CSS スタイルやイベント属性を追加することで、テキストの外観をカスタマイズできます。<s> タグは、もはや正確でないか関連性のないテキストを示すために最適であり、文書編集目的にも役立ちます。
