HTMLで2重の取り消し線を引く方法を現役エンジニアが解説【初心者向け】

初心者向けにHTMLで2重の取り消し線を引く方法について解説しています。1重の打ち消し線を引く場合にはdelタグを使用しますが、これは2重の線には対応していません。ここでは2重線を表現する方法と画面上での見え方を確認していきましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

HTMLで2重の取り消し線を引く方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

 

そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まるでしょう。

 

なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。

 

田島悠介

今回は、HTMLに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

2重の取り消し線を引く方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

1重の取り消し線との違い

2重とは異なり、1重の取り消し線はHTMLのdelタグを使用して表現します。

htmlファイルの文字列を直接delタグで囲むことで打ち消しができるため、多用しやすい記述方法です。

また、CSSで取り消し線をつけることも可能です。

 

spanタグを使いclass属性をセレクタにし、打ち消し線を入れたい文字をタグで囲みましょう。

その指定されたclassをcssファイルの方でスタイルを変更します。

text-decorationプロパティの値を、line-throughとすることでhtmlのdelタグで打ち消し線を入れた場合と同じ表示になります。

打ち消し線を入れるのと同時に、文字色や文字の太さなどを調整する場合には、cssで取り消し線を入れるとwebサイトの後での修正や複数人での管理がしやすくなるでしょう。

 

2重の取り消し線の画像を準備しよう

2重線での取り消しはhtmlのタグやcssでのプロパティは用意されていません。

2重線の画像を文字の上に乗せることで2重線を引くことが可能です。

正確には文字の背景に画像を配置し、文字の上に乗せるような表示していることになります。

 

2重線の画像を用意します。

2重線の画像は背景が白いものでも問題ありません。

webサイトの背景色が白色に限定されてしまうため、線の部分以外は透けて見えるようにpng画像で用意をすると汎用性があり他のサイトでも使用可能です。

画像のサイズは大きくする必要はありません。

1文字の大きさに対して2重線が引いてあるような画像を作成すれば良く、実際にはその画像を連続をして使用することで長い文字列の打ち消し線を引くことが可能です。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

CSSで書いてみよう

今回はdouble.pngという2重線の画像をhtmlファイルと同じ階層に入れました。

htmlで文字列の前半を1重線で打ち消し、cssで文字列の後半を1重線で打ち消し、2重線で文字列全部を打ち消しの3種類の表示をしています。

(htmlファイル)

<div>

<p><del>消したい</del>文字列</p>

<p>消したい<spanclass="line">文字列</span></p>

<p><spanclass="negative">消したい文字列</span></p>

</div>

 

(cssファイル)

.line{

text-decoration: line-through;

color:red;

font-weight: bold;

}

.negative{

background-image:url(/double.png);

background-repeat:repeat-x;

background-position: center;

}

 

執筆してくれたメンター

木村勇土

TechAcademyの現役メンター。

現在は行政書士事務所を運営しており、お客様にはプログラマーやフリーランサーも多い。

WordPressを中心とした自社のWebサイトの修正などを行なっている。

 

大石ゆかり

HTMLで2重の取り消し線を引く方法がよく分かったので良かったです!

田島悠介

ゆかりちゃん、これからも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

TechAcademyでは初心者でも、最短4週間でオリジナルWebサイトを公開できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、参加してみてください。