OR
誰でも自由に記事を投稿・編集できるオープンリファレンス
記事ID:198
区分:プログラム  |  分類:HTML/CSS  |  最終更新日:2012/02/11
クリエイティブ・コモンズ 表示-継承ライセンス 2.1
【HTML】文字列に取り消し線を引く
関連タグ:html, css, カスケーディングスタイルシート, ホームページ, 文字列, 装飾, text-decoration, 取消線, 削除線, 打消線, s, strike, del
このエントリーをはてなブックマークに追加      
本文
履歴
編集
閲覧数: 29,205

HTML で指定の文字に取り消し線を表示させる場合、その方法はいくつかあります。 通常は、スタイルシートを使用する方法がもっとも一般的にですが、s要素strike要素 など、タグを使った方法もあります。 また、スタイルシートや s 要素などを使用した取り消し線は、表示上の文字装飾ですが、HTML 文書の構造的な取り消しを行いたい場合は del要素 を使用します。 各方法の詳細は以下を参照下さい。

 

スタイルシートを使用する方法

文字に取り消し線を表示する方法としてもっとも一般的な方法が、スタイルシートを使用する方法です。 段落全体を取り消したい場合はブロックレベル要素に、文章中の一文などインラインで使用したい場合はインライン要素に、text-decoration プロパティに「line-through」を設定します。

 

【サンプルコード】

<p>文章中の <span style="text-decoration: line-through;">削除テキスト</span> に取り消し線を引きます。</p>

 

【サンプル結果】

文章中の 削除テキスト に取り消し線を引きます。

 

text-decorationプロパティ は文字の装飾を指定するプロパティですが、これに「line-through(取り消し線)」を指定することで、指定の文字に取り消し線を表示させることができます。 ただし、text-decoration プロパティでの文字装飾は、あくまで表示上の取り消し線のため、HTML 文書の構造的な取り消しを示したい場合は、del 要素を使用する必要があります。

s要素、strike要素を使用する方法

取り消し線は s 要素や strike 要素といったタグを使用することでも、表現することができます。 ただし、この 2 つの要素は非推奨要素であり、文字の装飾に関する指定は、なるべくスタイルシートを使用することが推奨されていますので、特に理由がない場合は避けるべき方法となっています。(HTML5 ではどちらも削除される予定です)

 

【サンプルコード】

<p>文章中の<s>削除テキスト</s>に取り消し線を引きます。</p>
<p>文章中の<strike>削除テキスト</strike>に取り消し線を引きます。</p>

 

【サンプル結果】

文章中の 削除テキスト に取り消し線を引きます。
文章中の 削除テキスト に取り消し線を引きます。

 

s 要素と strike 要素は、どちらも同じ表示になります。 また、どちらの要素もインライン要素ですので、ブロックレベルで文章に取り消し線を表示させることはできません。

del要素を使用する方法

スタイルシートを使用する方法や、s 要素、strike 要素を使用する方法は、あくまで表示上の文字の装飾を行う方法ですが、HTML 文書の構造上の取り消しを明示的に示したい場合は、del 要素を使用します。

 

【サンプルコード】

<p>文章中の <del>削除テキスト</del> に取り消し線を引きます。</p>

 

【サンプル結果】

文章中の 削除テキスト に取り消し線を引きます。

 

del 要素は挿入位置により、ブロックレベル要素にもインライン要素にもなる特殊な要素ですが、ブロックレベル要素として使用した場合、一部ブラウザでは取り消し線が表示されないことがあります。

関連記事
外部リンク
外部リンクはありません。
- 記事検索 -