[ HTML ] CSS – 文字に上線 下線 取り消し線をつける ( text-decoration )

Pocket

ここでは、HTML の文字に対して上線、下線、および取り消し線をつけるサンプルを掲載しています。レッツデコレーション!

スポンサーリンク


文字に上線, 下線または取り消し線をつけるにはスタイルに text-decoration を指定します。以前は blink キーワードによって文字列を点滅させることも一部のブラウザではできましたが、今ではできなくなっています。完全に廃止されています。

キーワード表示内容
none通常表示
underline下線を付ける
overline上線を付ける
line-through取り消し線を付ける

text-decoration のサンプル

<p style="text-decoration: none;">通常表示</p>
<p style="text-decoration: underline;">下線をつける</p>
<p style="text-decoration: overline;">上線をつける</p>
<p style="text-decoration: line-through;">取り消し線をつける</p>
<p style="text-decoration: underline overline line-through;">全部まとめてつける</p>

実際の出力結果

通常表示

下線をつける

上線をつける

取り消し線をつける

全部まとめてつける

スポンサーリンク

Pocket

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>