CSSテクニック

丸や三角を描く

今回のテクニックは丸や三角を描く。それだけです。 四角を描くよりはちょっと複雑です。
何の役に立つの?という疑問はよこっちょにおいておきましょう。

テクニック使用後

• ○ Δ △

ソースとしては、文字の色と大きさを指定しただけです。

スタイルシート
div.circle{
    font-size:70px;
    color:#CC0000;
}

HTML
<div class="circle">• ○ Δ △</div>

注目して欲しいのは•とΔの部分です。この部分は特殊文字といい、ギリシャ文字や数学記号を使用するときにこのような書き方をします。 ハートや、スペードを描くこともできます。対応表が特殊文字リファレンスにありますので、見てみるといいと思います。
どんな環境でも同じように表示されるわけではないので、注意してください。


使いこなすための+α

今回のテクニックは単体ではほとんど役に立ちませんが、positionやz-indexなどと組み合わせると、 いろいろと応用できます。

ブラウザーの表示に使用しているフォントによっては、何の絵か分からないでしょうが、あまり気にしないでください。

その気になれば大作を描くことも可能?挑戦してみてはいかがでしょうか。


一覧へ戻る


Last Modified 2005-05-18 © きくちゃん 2004 - All Rights Reserved