TOP ＞ スタイルシートで文字をデザイン ＞ 文字に取り消し線を引くには。
文字に取り消し線を引くには。
以前書き込んだ文字列を取り消したい場合、それもWebページ上から消さずに、『現在はこの文字列は意味がありません』 という風に表現する場合には、取り消し線を利用すると良いでしょう。
HTMLでは<strike>タグを使って取り消し線を引くことが出来ます。もちろんCSSでも可能です。
スタイルシートを使って、取り消し線を引くには、text-decorationプロパティの値として「line-through」 を指定します。HTMLの<strike>タグ同様に文字の真上に線が引かれます。
他のtext-docorationプロパティと併用できますので、underline/overlineを同時に使用することで、 文字の上下と真ん中に線を引くことも出来ます。（あまり意味はないと思いますが、操作としては可能です）
文字に取り消し線を引くには。
【書き方】
text-decoration : line-through;
- サンプルページのコードは以下の通りです。
|
<html> <head> <title>文字に取り消し線を引くにはのサンプル</title> <meta http-equiv="content-type" content="text/html"> <meta http-equiv="content-style-type" content="text/css"> <style type="text/css"> <!-- .s1{ color: #0033ff; background-color: #ffff99; text-decoration: line-through;} .s2{ color: #ff3300; background-color: #99ff99; text-decoration: overline underline line-through;} --> </style> </head> <body bgcolor="silver"> <p>スタイルシートを使って文字列に取り消し線を引いてみましょう。</p> <p><span class="s1">このように文字列の真ん中に線が引かれます。</span></p> <p><span class="s2">underlineとoverlineを同時に指定すれば、文字の上下と真ん中に同時に線を引くこともできます。</span></p> <p> </p> <p>では、HTMLの<strike>タグを使ってみましょう。</p> <p><font color="#0033ff"><strike>見栄えはスタイルシートを使ったものと変わりません。</strike></font></p> </body> </html> |
[
スタイルシートで文字をデザイン ]
