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

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

 

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

 

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

 

 

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

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

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

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

 

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

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

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

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

 

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

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

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

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

 

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

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

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

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

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

 

[PR] Webデザインで副業する方法とは

CSSで書いてみよう

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

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

（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サイトの修正などを行なっている。

 

 

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

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