【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.

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

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

del要素を使う

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

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

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

注意点

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

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

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

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

取り消し線をつける

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

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

色をつける

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

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

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

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

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

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

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

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

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

HTMLのみで好条件の案件獲得はできる？

HTMLはウェブサイト制作の根幹となるスキルではありますが、それだけでは仕事数は少なく、単価の高い仕事も見つけづらいです。

もし、あなたがウェブサイト制作を学んでいって後々は時間や場所に縛られずに働きつつ、ある程度の収入も確保したいならHTML以外にCSSやJavaScript、WordPressやPHPに加えてデザインスキルなどもあるとかなり仕事の幅は広がり、チャンスが増えます。

クラウドワークスでも顧客の要望に応えるためと、限られたスキルだと大量のページを作るなど量をこなす働き方になるため、スキルを磨いて単価の高い仕事を取れるようになることをすすめています。

HTML・CSSコーディングは短納期で大量のページを作成する案件も多く見受けられます。クライアントの要求に応えるため、コスト（1ページあたり単価）・スピード・クオリティの優先度を見極めながら進めるバランス感覚も求められる仕事です。複雑な案件ではHTML/CSSだけに留まらず、JavaScript（AJAX）を使った機能実装、WordPressをはじめとするCMSテンプレートの開発を手がけるケースもあります。このような場合にはプログラミング言語の知識も必要となるでしょう。
引用：CrowdWorks

と不安なあなたは、プログラミングスクールでの学習がおすすめです。経験者から教わることのできるため、着実にスキルアップが見込めます。

侍エンジニアでは、あなたの理想のキャリアから逆算してあなた専用のカリキュラムをマンツーマン学習で指導することで、このまま学んでいけば着実に未来に繋がるという実感の持てる学習指導を心がけています。

受講期間中に案件獲得に成功し、講師と一緒に納品までを体験した卒業生の事例もございます。

無料カウンセリングでは、効率的な学習方法やキャリアプランのご提案などをさせていただきますので、理想はあるけどどうやったらいいかわからないという方は是非お気軽にお申し込みください。オンラインでも受講可能です。

無料カウンセリングを申し込む

まとめ

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

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