にしし ふぁくとりー(西村文宏 個人サイト)

"CSS Tips Factory" : Presented by Nishishi. Since 1997.

文字に上線と下線を同時に引く [テキスト,]

スタイルシートを使ったテキスト(文字)の装飾の1つに「下線を引く」というスタイルがあります。リンク文字にデフォルトで引かれるのと同じ「下線」(Underline)です。で、実は「上線」というのもあるんですよね。Overlineです。枠線(border)を使うのではなく「テキストの装飾」として「上線」を引くことができます。例えば、以下のような表示になります。

こんな感じで、文字列の上に線を引いたりできます。ちなみに、下線はこんな感じ。まあこれは紹介するまでもないですね。

この「上線」という装飾をいったいどういう場面で使えば良いのかはよく分かりませんが、そういう装飾も可能です。そして、この「上線」と「下線」は同時に引くことも可能です。
上線を引く場合も下線を引く場合も、text-decorationプロパティを使います。このとき、値に「underline」を指定すれば下線が引かれ、「overline」を指定すれば上線が引かれます。この値には複数個を列挙して指定できるので、「underline」と「overline」を同時に記述することで、下線と上線を同時に引けます。

CSSソースは以下のような感じです。

span {
   text-decoration: overline underline;
}

これを使って上線と下線を同時に引いた文字列を表示させてみると、次のようになります。

このように、上線と下線の両方を同時に引けます。

まあ、こんな装飾を使いたいケースはなかなかなさそうな気もしますけども。
今まで見たことのある使用例としては、「a要素のhover疑似クラス(a:hover)」に対して使うという装飾がありました。つまり、「リンク文字の上にマウスポインタが載ったときの装飾」としてです。
その場合の装飾は、マウスポインタの載った箇所を目立たせることが必要になりますから、確かにこの装飾もアリかも知れませんね。

マウスポインタがリンク文字の上に載った際にだけ、リンクテキストに上線と下線を同時に引くCSSソースは以下の通りです。(ついでに、文字色も赤色にしています。)

a:hover {
   text-decoration: overline underline;
   color: red;
}

表示すると以下のように見えます。

リンク文字の上にマウスが載った際にだけ、上線と下線の両方を同時に引くスタイルです。

というわけで、テキストには下線だけでなく上線も引くことができる、というスタイルシートの話でした。
使えそうな場面があったら使ってみて下さい。(^_^;;;

()

スタイルシートTipsふぁくとりーの主要なカテゴリ

下記のカテゴリに区分して、スタイルシートに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報

▼当サイト内外で関連しそうな記事などが自動表示されています。(たぶん)

--- 当サイト内を検索 ---