◆特殊文字とスタイルシートを組み合わせてみよう!◆

·<>·<>·<>·

»»»»»»

特殊文字

»»»»»»

·<>·<>·<>·

このように、そのまま使用しても面白くない特殊文字にスタイルシートを使い、フォントや色の指定をすると、装飾のような感じで表現できることがあります。

しかし、™や®など、例外もありますのでご注意を・・・。

<HEAD>
<STYLE TYPE="text/css">

H1 { color: gold;
font-size: 70; font-weight: bold;
font-family: Verdana; }
H2 { color: firebrick;
font-size: 70; font-weight: bold;
font-family: Verdana; }

</STYLE>

</HEAD>
<BODY>
<H1 align="center">&#183;&lt;&gt;&#183;&lt;&gt;&#183;&lt;&gt;&#183;</H1>
<H2>&#187;&#187;&#187;&#187;&#187;&#187;</H2>
<H2 align="center">特殊文字</H2>
<H2 align="right">&#187;&#187;&#187;&#187;&#187;&#187;</H2>
<H1 align="center">&#183;&lt;&gt;&#183;&lt;&gt;&#183;&lt;&gt;&#183;</H1>
</BODY>
今回は長めのタグで少々面倒くさいですが、頑張っていきましょう。

まずいつものように、<HEAD>と</HEAD>の間に
<STYLE TYPE="text/css">

H1 { color: gold;
font-size: 70; font-weight: bold;
font-family: Verdana; }
H2 { color: firebrick;
font-size: 70; font-weight: bold;
font-family: Verdana; }

</STYLE>
というように、スタイル定義をします。

これで、H1</H1>で囲まれた文字は色がgoldに、フォントサイズが70ピクセルに、書体が太字に、フォントの種類がVerdanaになり、H2</H2>で囲まれた文字は色がfirebrickに、フォントサイズが70ピクセルに、書体が太字に、フォントの種類がVerdanaになるというわけです。

そして実際の特殊文字の部分は<H1>&#183;&lt;&gt;&#183;&lt;&gt;&#183;&lt;&gt;&#183;</H1>というように記述します。

&#183;·を、&lt;<を、&gt;>を表すため、実際には上の例のように表示されるのです。

また、<H2>&#187;&#187;&#187;&#187;&#187;&#187;</H2>という部分の&#187;は、»という二重かっこを表します。

この他にもいろいろな特殊文字を使用して試してみると面白いかもしれませんね。

HTMLにCha☆llengeへ戻ります