【HTML入門】取り消し線をstrike,s,delタグで引いてはダメな理由とは

こんにちは!侍エンジニア塾ブログ編集部のシホです!

HTMLで文字に取り消し線を引きたいとき、

どうやったら取り消し線を引けるの??
色々タグがあってよく分からない!

とどのタグを使えばいいのか迷うときはありませんか?

今回はHTMLで取り消し線を引く3つの方法に加え、CSSを使った取り消し線のレイアウト方法も解説します!

ぜひ参考にしてみてください!

HTMLで取り消し線を付ける方法

取り消し線とは打ち消し線とも言われ、 取り消し線 のように文字の上に取り消し線を引くことができます。

文章の内容が誤った場合、Deleteキーで削除するのが一般的ですが、取り消し線は誤った内容を明示したり、一度公開された情報を後から訂正したりする場合に、あえて修正記録のテキストを残しておきたい場合に使われています。

ただし、HTMLで取り消し線を引く方法は3つありますが、非推奨であったり廃止されていたりするので、これらについての注意点も説明していきますね!

strike要素、s要素を使う

strikeとsは、「Strike-through(削除する)」の略です。

<strike> ~ </strike>または<s&gt; ~ </s>で取り消したい文字を囲むと取り消し線をつけることができます。

See the Pen YLEXWw by Shiho Sakai (@shiho-sakai) on CodePen.0

ただし、これらは古いHTML要素なので、HTML4とXHTML1では非推奨となり、HTML5では完全に廃止されています。

また、単に「取り消し線を引く」という表示方法を指定する意味しか持ってないので、「削除されたテキスト内容」という意味をつけて表示するには「del要素」を使いましょう。

del要素を使う

delとは「delete(削除する)」の略です。del要素は、上のstrike要素、s要素が「訂正」というニュアンスに対し、「削除」という意味を持っています。

削除した内容を表したい時は、こちらのdel要素を使いましょう。

See the Pen GdOvWb by Shiho Sakai (@shiho-sakai) on CodePen.0

注意点

これまでHTMLで打ち消し線を引く方法を3つ紹介しましたが、非推奨や廃止になっていたり、今後バージョンアップによって要素の定義も変わる可能性もあります。

なので、文字などを装飾したい時は、できるだけCSSを使用しましょう。

CSSはテキストを装飾するということがメインで意味合いを持たないので、なるべくCSSを使うのがおすすめです。

CSSで取り消し線をつける方法

取り消し線をつける

「text-decoration」プロパティに「line-through」を指定することによって、取り消し線を引くことができます

See the Pen vjWOBO by Shiho Sakai (@shiho-sakai) on CodePen.0

色をつける

取り消し線を赤にする例でみてみましょう。

この場合、文字の色は黒、取り消し線の色は赤と別々で指定してあげる必要があります。

もし文字の色を黒と指定しなければ、文字も一緒に赤になってしいます。

<span> ~ </span>で囲んでグループ化し、この範囲の文字の色に黒を指定していましょう。

色の指定は「color」プロパティに「色(英語表記orカラーコード)」で指定します。

See the Pen ELbjYr by Shiho Sakai (@shiho-sakai) on CodePen.0

太さを変える・二重線にする

残念ながらHTML・CSSで打ち消し線の太さを変えたり、二重線にしたりする方法はありません。

どうしてもという場合は、理想の太さの線や二重線の背景に文字をのせるという視点でやることも1つの解決策です!

まとめ

いかがでしたでしょうか。

HTMLで打ち消し線を引く場合は少しリスクがあるので、なるべくCSSで書くことをおすすめします。ぜひ実践してみてください!

未経験者でも安心の徹底サポート!まずは完全無料の体験レッスン!

「プログラミングに興味があるけど未経験だし、、、」とお悩みの方はご安心ください。

  • 24時間質問し放題
  • あなただけのオーダーメイドカリキュラムで学習の効率化
  • 仕事獲得方法からオリジナルアプリ開発方法

侍エンジニア塾では徹底したサポートによる「オーダーメイドカリキュラム」を作成しています。

まずは無料体験レッスンで、「挫折しない学習方法」や「あなただけの学習ロードマップ」を知り、学習の効率化をしましょう。独学の難点である「オリジナルアプリの作り方やエラーの対処法」についてもアドバイスさせていただきます。

詳しいサービス内容は、下記よりご参照ください。

cta_mtm1

LINEで送る
Pocket

書いた人

シホ

シホ

1990年生まれ。長崎県出身。趣味は歌・登山・暗闇ボクシング。
最近HTMLとCSSの勉強を再スタートしました!
「初心者の方にもわかりやすく」をモットーにライターとして日々精進中です★

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説