丸付き数字を使ってみよう！

<HEAD>
<style>
.ball { color: deepskyblue;
font-size: 44px;
font-weight: bold;
font-family: Wingdings; }

.title { color: darkblue;
margin-left: 8px;
margin-top: -60px;
font-size: 24px;
font-weight: bold;
font-family: Verdana; }
</style>
</HEAD>
<BODY>
<DIV CLASS=ball>l</DIV>
<DIV CLASS=title>1</DIV>
</BODY>

これはスタイルシートのマージン指定をマイナスにすることによって、別の文字を重ね合わせるというテクニックです。
つまり、○と1という数字を別々に記述してから重ね合わせることによって、丸付き数字を表現しているのです。

まず<HEAD>と</HEAD>の間に
<style>
.ball { color: deepskyblue;
font-size: 44px;
font-weight: bold;
font-family: Wingdings; }

.title { color: darkblue;
margin-left: 8px;
margin-top: -60px;
font-size: 24px;
font-weight: bold;
font-family: Verdana; }
</style>
という記述をしておきます。

.ballはスタイル設定に付ける名前で、ピリオドの後に好きな物を付けます。

そして後で呼び出すのです。

colorで文字の色を、.font-sizeで文字の大きさを、font-familyでフォントの種類を指定します。

○を表すにはWingdingsフォントを使用します。

数字の部分はmargin-leftとmargin-topの指定で位置が決まります。

margin-topの値をマイナスにすると、数が増えるに従って文字がページの上部に移動します。

スタイル定義が終わったら、本文を記述していきます。

<DIV CLASS=に続けて、スタイル定義の際に付けた名前からピリオドを取った物を記述すると、DIVで囲まれた部分にそれぞれのスタイルが反映されます。

Wingdingsではｌが○にあたります。

○の中にうまく数字を当てはめるには、margin-top: -60px;の値を色々と変更しながら調節していけば良いのです。