《2007/4/29 日曜日 12:22:37 公開》
上線と下線を同時に引く [テキスト, 線]
スタイルシートを使ったテキストの装飾の1つに、「下線を引く」というのがあります。リンク文字にデフォルトで引かれるのと同じ「下線」(Underline)です。で、実は「上線」というのもあるんですよね。Overlineです。枠線(border)を使うのではなく、「テキストの装飾」として「上線」を引くことができます。例えば、以下のよーな感じ。
こんな感じで、文字列の上に線を引いたりできます。ちなみに、下線はこんな感じ。まあこれは紹介するまでもないですね。
この「上線」という装飾をいったいどういう場面で使えば良いのかよく分からんのですが、まあそういう装飾が可能です。んで、ここで重要なのは、「上線」と「下線」は同時に引けるということです。
上線も下線も、text-decorationプロパティを使うのですが、その値に「underline」と指定すれば下線が引かれ、「overline」と指定すれば上線が引かれます。この値には複数記述できるので、「underline」と「overline」を同時に記述することで、下線と上線を同時に引けます。
ソースは以下のよーなもの。
span {
text-decoration: overline underline;
}
これを使って表示させてみると、次のようになります。
このように、上線と下線の両方を同時に引けます。
まあ、こんな装飾を普段使うことはないでしょうけどね。
今まで見たことのある使用例としては、「hover疑似クラスのa要素」に対して使うというのがありました。つまり、「リンク文字の上にマウスポインタが載ったときの装飾」として。
その場合の装飾は、マウスポインタの載った箇所を目立たせることが必要になると思うので、確かにこの装飾もアリかも知れませんね。
ソースは以下のよーな感じ。
a:hover {
text-decoration: overline underline;
}
まあ、こんなこともできますよ、ということで。(^_^;)
私は使ってませんけどね。(^_^;;;
このCSS TIPSへのコメントはお気軽に! [コメントはまだありません。]
| « 強調の装飾を無効にする |
前後のCSS TIPS < 旧 / 新 > | 画像を右端に寄せた上で本文と適度に間隔を取る » |
このCSS TIPSへのトラックバックURLは以下の通りです。
※言及リンクがないトラックバックは拒否されますのでご注意下さい。また、文字コードはUTF-8でお送りいただける方が望ましいです。
コメントはまだありません。