今回はすごく簡単なメモ。
ハート、ダイヤ、スペード、クラブ。
この4つの記号をWEB上で表示させる方法です。
すべて実体参照で表示可能
クラブやスペードなどの記号もすべて、「実体参照」という、特殊文字をウェブ上で表現する方法で定義されています。 それぞれ、HTML中に以下のように記述することで表示可能です。
1 2 3 4 |
ハート:♥ ダイヤ:♦ スペード:♠ クラブ:♣ |
「heart」ではなく「hearts」のように、「spade」ではなく「spades」、「club」ではなく「clubs」など複数形なので注意して下さい。
※古いブラウザでは見えません。
「文字」なので装飾は自在
扱いは「文字」(テキスト)なので、普通の文字と同様に装飾が可能です。 小さいマークをたくさん並べて罫線のように表現したり、 大きなマークをインパクトを出すために使ったり、様々な効果を簡単に出せます。
♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥
♠トランプ記号♦
大きさと色を指定するには、次のようにスタイルシートの font-size プロパティと、color プロパティを使えば簡単です。
1 2 3 |
<span style="font-size: 5em; color: blue;">♠</span> <span style="font-size: 8em; color: lime;">♠</span> <span style="font-size: 7em; color: #cccc00;">♠</span> |
font-sizeプロパティに「7em」を指定すると、「7文字分の大きさ」を指定したことになります。
以上、ブログ記事などのアクセントに使ってみてはいかがでしょうか?