TOP ＞ スタイルシートで文字をデザイン ＞ 文字列の上下に線を引くには。
文字列の上下に線を引くには。
重要な単語や強調したいキーワードなどがある場合、文字列の上や下もしくは上下両方に線を入れることができます。
HTMLでは、<u>タグを使うことで下線を引くことが出来ます。ただし、上線や上下同時に線を引くことは出来ません。
スタイルシートを使って、文字の上下に線を引くには、text-decorationプロパティを使用します。
colorプロパティを使ってテキストに色をつけている場合は、 text-decorationプロパティで引いたラインにも同じ色がつきます。ただし、文字列を含まない要素（img要素など） にこのプロパティを指定しても、線を引くことは出来ません。
あくまで、text-decorationプロパティは文字列に線を引くためのものです。
文字列の上下に線を引くには。
【書き方】
下線： text-decoration : underline;
上線： text-decoration : overline;
両方： text-decoration : underline overline;
- サンプルページのコードは以下の通りです。
|
<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; text-decoration: underline;} .s2{ color: #ff3300; text-decoration: overline;} .s3{ color: #000000; text-decoration: underline overline;;} --> </style> </head> <body bgcolor="silver"> <p>ス対すシートを使って文字列の上下に線を引いてみましょう。</p> <p><span class="s1">まずは文字の下に線を引いて見ましょう。</span></p> <p><span class="s2">次は文字の上に線を引いて見ます。</span></p> <p><span class="s3">スタイルシートを使えば、このように上下同時に線を引くことも出来ます。</span></p> <p> </p> <p>では、HTMLの<u>タグを使ってみましょう。</p> <p><font color="#0033ff"><u>下線に関してはスタイルシートを使ったものと見え方は変わりません。</u></font></p> </body> </html> |
[
スタイルシートで文字をデザイン ]
