Dreamweaver TechniqueJAVA Script サンプル | CSS sample | JAVA Applet sample | Flash Sample
HTML4.0 reference | DynamicHTMLXHTML | XML sample | XSLT sample | RIKO's ASP Trial
ASP ADO リファレンス | PHP関数リファレンス | MySQL関数リファレンス

文字装飾

■ 文字の装飾

指定した要素に含まれる文字に対して、上線、下線、取り消し線、点滅といった装飾を設定します。

値には、以下のキーワードがあります。

それぞれ半角スペースで区切って並べれば、複数の値を指定することもできます。

■ 作例

HTML文書

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css>
<title>文字装飾</title>
<style type="text/css">
<!--
p.sample1  {text-decoration:none}
p.sample2  {text-decoration:overline underline; color:red}
p.sample3  {text-decoration:line-trough; color:blue}
p.sample4  {text-decoration:blink; color:green}
-->
</style>
</head>
<body>
<p class="sample1">text-decoration:none 装飾なし</p>
<p class="sample2">text-decoration:overline underline 上線と下線</p>
<p class="sample3">text-decoration:line-trough 取り消し線</p>
<p class="sample4">text-decoration:blink 点滅</p>
</body>
</HTML>

text-decoration:none 装飾なし

text-decoration:overline underline 上線と下線

text-decoration:line-trough 取り消し線

text-decoration:blink 点滅

■ 文字装飾を指定するHTMLタグをCSSに改める

HTMLタグで文字を装飾するには、次のようなタグを利用します。

<strike>, <s>, <u>タグはDeprecated(推奨しない)とされており、こうした文字の装飾はスタイルシートで指定することが推奨されています。同様の効果をスタイル氏^とで表現すると下のようになります。

<<<戻る
R HOUSE | RIKO's Trial Page | Shirley's Pettit Case | Shirley's i-box | Shirley's little box | CSS Trial