文字を装飾しよう！（text-decoration プロパティ）

使用プロパティセレクタ { text-decoration: 下線などの装飾; }

CSS一覧プロパティ辞典 … text-decoration プロパティ

text-decoration プロパティを使うと、文字を下線、上線などで装飾したり、逆に表示しないようにできます。値にはnone（下線などを非表示にする）、underline（下線）、overline（上線）、line-through（打ち消し線）、blink（点滅）があります。
※blinkに対応しているブラウザは、FirefoxとOperaのみですので現在は使わないほうがいいでしょう。

下線のみの表示は注意！

underlineで下線のみを表示する場合は、ユーザーがリンクと間違えてクリックする場合があり、ユーザーをサイト内で迷わせてしまうかもしれないので、必要以上に使わないほうがいいでしょう。

使用例

text-decoration プロパティの underline、overline を使用し、h1 要素に下線、上線を引いて装飾しよう！

記述例
<html> <head> <title>一人暮らしの前向き料理</title> <style type="text/css"> h1 { text-decoration: underline overline; } span { font-weight: bold; } p { line-height: 1.7em; } p .copy { font-family: "ＭＳＰ明朝", serif; } </style> </head> <body> <h1>簡単に作れるワンポイント料理</h1> <p>料理を少しおいしくするための<br> ワンポインを紹介します！</p> <p>おいしいチャーハンの作り方</p> <p class="copy">Copyright © 2007 TomMY. All Rights Reserved.</p> </body> </html>

使用例の表示

[text-decorationプロパティ適応前のブラウザでの表示例]
一人暮らしの前向きな料理
簡単に作れるワンポイント料理料理を少しおいしくするためのワンポイントを紹介します！おいしいチャーハンの作り方 Copyright © 2007 TomMY. All Rights Reserved.

[text-decorationプロパティ適応後のブラウザでの表示例]
一人暮らしの前向きな料理
簡単に作れるワンポイント料理料理を少しおいしくするためのワンポイントを紹介します！おいしいチャーハンの作り方 Copyright © 2007 TomMY. All Rights Reserved.

このように h1 要素の上下に線が引かれました！この方法で強調するならば、ユーザーがリンクと間違える事も少ないでしょう。