バナー画像

HTMLを修正したのに、気が付いてもらえない、といった経験はないでしょうか。もし、変更に注目してほしいなら、修正前の内容を取り消し線で削除したことにして、修正後の内容と比較できるように掲示してみましょう。ここでは、HTMLの取り消し線の書き方を解説します。

取り消し線の使い方

Webページを見ていると、稀に、以前書かれた文章の文字の中ほどに線が引かれて、その次に修正後の内容が書かれています。この文字の上に書かれた線は、取り消し線と呼ばれるもので、ワープロソフトなら必ず付いている、文字を修飾する方法の1つです。そして、取り消し線は、HTMLでも使えます。

まずは、取り消し線について解説します。

そもそも取り消し線とは

取り消し線とは、誤って書いてしまった文字や数字を訂正するために、以前書かれた内容を読めるようにして、どう訂正されたか解るように修正する書き方です。手書きの文書が基本だった昔は、誤って書かれた内容を訂正する方法として、よく用いられました。

また、取り消し線は、ワープロで清書するのが当たり前の今でも、役所への申請文書や契約書など、手書きが前提の書類などで使われています。

なお、取り消し線の引き方は、正式には、誤って書いた文字や数字の中ほどの高さで線を引き、さらにその線を引いたのが誰だか解るように訂正印を押します。また、英語の文書では、同じように線を引き、欄外にサインをするのが一般的です。

文字や数字を強調する方法の一つ

最近、取り消し線をよく見かけるのは、商品価格を値下げした案内など、価格や変更点を強調したい広告です。例えば、標準小売価格に取り消し線を引き、それに続いて特別提供価格を載せれば、値引きした価格が協調できます。

そのため、そういったチラシを作る際に使われるワープロソフトや表計算ソフトには、文字を修飾する方法の一つとして、取り消し線を付ける機能が付いています。また、そういったアプリでは、線を二重線にしたり、色を黒や赤などから選べるなど、より強調した書き方も可能です。

HTMLで取り消し線を使うには

ワープロソフトで使える取り消し線は、Webページを表示するためのHTMLでも使えます。そして、Webブラウザが登場した当初から使える機能の1つでした。なお、以前は、取り消し線を表示するのにstrikeタグが使っていましたが、今のHTMLのバージョン5からは使えなくなっています。

HTMLのバージョン5では、Webページの修飾をスタイルシートに記述するのが基本です。取り消し線を引くためのdelタグなどがまだ使えますが、文字を修飾する機能なので推奨されていません。できるだけスタイルシートを利用してください。

スタイルシートを使う方法

HTMLのバージョン5から、文字の修飾に使われるタグは廃止されました。それに伴い、当初から取り消し線を描くためのタグだったstrikeタグは廃止されました。また、後で紹介delタグでも取り消し線を引けますが、将来、使えなくなる可能性があります。新たにWebページを作るのなら、スタイルシートを使いましょう。

次から、スタイルシートを使った、取り消し線を引く方法について紹介します。

取り消し線を引くにはspanタグを使う

文字の修飾に使われる汎用タグは、spanタグです。なお、spanタグは、単体では意味を持ちませんが、文字列などのインライン要素に、スタイルシートとの関連付けする目的でよく使われます。そのため、取り消し線を引くためのタグとしても有効です。

spanを使った例

<p>この部分に<span class="del">取り消し線</span>を設定します。</p>

上の例では、spanタグで、「取り消し線」という文字に、delというクラスを設定しています。そして、スタイルシートで、このdelクラスに対応する、取り消し線を引くためのスタイルを設定します。

取り消し線を設定するスタイルシートの書き方

スタイルシートで取り消し線を設定するには、テキストの下や中央に線を引く、テキスト傍線の機能を使います。そして、テキスト傍線を設定するには、次の3つを組み合わせてください。

・text-decoration-line
テキスト傍線の位置を定義する機能で、行の上、中央、下、点滅の4つを設定できます。

・text-decoration-style
テキスト傍線の種類を定義する機能で、直線の他、二重線、波線などを設定できます。

・text-decoration-color
テキスト傍線の色を定義する機能で、カラーコード、または、カラーネームを指定できます。

例えば、delクラスのapsnで囲まれた文字に取り消し線を設定するには、次のようなスタイルシートを使います。

スタイルシートの例
span.del {
  text-decoration-line: line-through;
  text-decoration-style: solid;
  text-decoration-color: black;
}

取り消し線の設定例

先ほど、スタイルシートによる基本的な取り消し線の例を紹介しましたが、テキスト傍線の機能を使えば、より印象的な取り消し線を作れます。Webサイトのデザインに合わせて、いろいろ試してみてください。

・黒い実線による取り消し線
span.del {
  text-decoration-line: line-through;
  text-decoration-style: solid;
  text-decoration-color: black;
}
・赤い実線による取り消し線
span.del {
  text-decoration-line: line-through;
  text-decoration-style: solid;
  text-decoration-color: red;
}
・黒い二重線による取り消し線
span.del {
  text-decoration-line: line-through;
  text-decoration-style: double;
  text-decoration-color: black;
}
・赤い二重線による取り消し線
span.del {
  text-decoration-line: line-through;
  text-decoration-style: double;
  text-decoration-color: red;
}

取り消し線を引くタグ

先ほどスタイルシートで取り消し線を引く方法を紹介しましたが、タグで指定することも可能です。ただし、HTMLのバージョン5では廃止されていたり、非推奨になっているなど、長く使うにはリスクがあるので、それを理解して使ってください。

HTMLのバージョン5では廃止されたstrikeタグ

HTMLのバージョン5が公表される前は、取り消し線を引くタグとしてstrikeタグが使われていました。しかし、このタグは、HTMLのバージョン4.01で非推奨となり、HTMLのバージョン5では廃止されています。

しかし、まだ多くのWebブラウザでstrikeタグが使えてしまいます。とはいえ、いつ使えなくなるか解りません。Webページを新しく作るのなら、strikeタグは使わないようにしましょう。

sタグのsは、strikeoutのs

英語で取り消し線を表す言葉は、strikeoutです。そして、その頭文字のsを使ったタグが、取り消しを意味するsタグです。このsタグは、HTMLのバージョン5でも、まだ使えます。

なお、sタグの機能は、先ほど紹介したstrikeタグと機能は同じです。そして、このsタグは、厳密には、既に正確でなくなった内容に取り消し線を引く、という意味のタグです。

sタグの使用例

<p>この部分に<s>取り消し線</s>を設定します。</p>

delタグでも取り消し線が引ける

先ほど紹介したsタグは、既に正確でなくなった内容を記述するためのタグでしたが、同じように取り消し線を引くタグとして、delタグもあります。そして、delタグは、削除された部分であることを示す、という意味のタグです。

なお、delタグは、cite属性を使って変更について説明するURLを、また、datetime属性で変更した日時をグローバル日時を指定できます。また、使い方は、これまで紹介したstrikeタグやsタグと同じで、取り消し線を引きたい文字をタグで囲みます。

delタグの使用例

<p><del>この部分は削除しました。</del>ここからはそのままです。</p>

取り消し線の応用例

先ほど紹介したように、スタイルシートを使えば、いろいろな取り消し線が作れます。先ほど紹介したtext-decorationを使った方法が一般的ですが、text-decorationを使わずに、文字の背景に横線を引いて取り消し線を引く方法もあります。ここでは、text-decorationを使った、取り消し線の応用例を紹介します。

取り消し線の応用例

<p>文章の例を紹介すると、ここは<del>取り消しした文章</del>で、ここから残る文章です。</p>

<style>
del {
 text-decoration: line-through;
 text-decoration-style: solid;
 text-decoration-color: red;
 color: #888;
 margin: 0 4px;
}
</style>

この例では、赤い一本の実線の取り消し線で、取り消し線を引いています。また、取り消しした文字を灰色にし、さらに、若干の空白を入れることで、周りの文字と区別しやすくしてみました。

まとめ

これまで紹介したように、HTMLで取り消し線を引く方法は一つではありません。しかし、タグで線を引くのではなく、文字への修飾としてスタイルシートに書くのが正しい書き方です。ただし、後から読み易いように、delタグを活用し、どのような線を引くかをスタイルシートに書くことも可能です。ぜひ、後で見て読み易い書き方を工夫してみましょう。

エンジニアになりたい人に選ばれるプログラミングスクール「ポテパンキャンプ 」

ポテパンキャンプは卒業生の多くがWebエンジニアとして活躍している実践型プログラミングスクールです。 1000名以上が受講しており、その多くが上場企業、ベンチャー企業のWebエンジニアとして活躍しています。

基礎的な学習だけで満足せず、実際にプログラミングを覚えて実践で使えるレベルまで学習したいという方に人気です。 プログラミングを学習し実践で使うには様々な要素が必要です。

それがマルっと詰まっているポテパンキャンプでプログラミングを学習してみませんか?

卒業生の多くがWebエンジニアとして活躍

卒業生の多くがWeb企業で活躍しております。
実践的なカリキュラムをこなしているからこそ現場でも戦力となっております。
活躍する卒業生のインタビューもございますので是非御覧ください。

経験豊富なエンジニア陣が直接指導

実践的なカリキュラムと経験豊富なエンジニアが直接指導にあたります。
有名企業のエンジニアも多数在籍し品質高いWebアプリケーションを作れるようサポートします。

満足度高くコスパの高いプログラミングスクール「ポテパンキャンプ」

運営する株式会社ポテパンは10,000人以上のエンジニアのキャリアサポートを行ってきております。
そのノウハウを活かして実践的なカリキュラムを随時アップデートしております。

代表の宮崎もプログラミングを覚えサイトを作りポテパンを創業しました。
本気でプログラミングを身につけたいという方にコスパ良く受講していただきたいと思っておりますので、気になる方はぜひスクール詳細をのぞいてくださいませ。