4-13-7a　文字に線を引く

文字に線を引く方法です。text-decorationプロパティを利用致します。（下記の見本では「body」部を全て一括で指定しております）。

<head> ～ </head> 内に記述して下さい。

<style type="text/css">
<!--
body {
text-decoration: underline; /* 下線を引く */
}
-->
</style>

text-decoration: none ;
何も設定致しません。（これが初期値です）
text-decoration: underline ;
指定したテキストに下線が付きます。（いわゆる<u>タグの事です）
text-decoration: overline ;
指定したテキストに上線が付きます。
text-decoration: line-through ;
指定したテキストに打ち消し線が付きます。（いわゆる<s>タグの事です）
text-decoration: blink ;
指定したテキストが点滅致します。

同じ文字に線を引くのでも、リンクに関する設定の仕方はこちら（HP-TIPS > CSS > リンクに関するレシピ）をご覧下さい。

[ 関連事項 ： HP-TIPS > CSS > 外部スタイルシートの記述方法 ]

pagetop

4-13-7b　具体的な見本

この文字は何も設定していない見本です。

この文字は「underline（下線付）」の見本です。

この文字は「overline（上線付）」の見本です。

この文字は「line-through（打ち消し線）」の見本です。

この文字は「blink（点滅）」の見本です。

上記の文字をIE、NN、OPERA、Firefoxでそれぞれ見比べてみました。 （詳細はこちらから ご覧下さいませ［静止画像です。約9.82KB］）。IE以外は皆キチンと「blink」指定した物は点滅しております。 （心なしかFirefoxで指定した物は他の物より早めに点滅している感じが致します）


その他、特定のセレクタ（例：「body」、「p」等）に複数のプロパティ（「color」、「font-size」等）を設定する見本は 『4-9　見出しを修飾する』 をご覧下さい。

[ 関連事項 ： HP-TIPS > HPの作り方 > 用語集 > セレクタ ]
[ 関連事項 ： HP-TIPS > HPの作り方 > 用語集 > プロパティ ]

pagetop