【ホームページ作成】スペード、クラブ、ダイヤも表示したい！

ハート以外のトランプ記号も表示できる♥♦♠♣

前回、ハートマーク（♥）がウェブ上では簡単に表示できることをご紹介致しました。（記事「ハートマークを表示したい」参照）
それなら、ハートマーク以外のトランプ記号も表示できることをご紹介しないわけにはいかないでしょう。

というわけで、今回は、ハートマーク以外のトランプ記号 「スペード（♠）」・ 「ダイヤ（♦）」・ 「クラブ（♣）」の表示方法をご紹介致します。

すべて実体参照で表示可能

クラブやスペードなどの記号もすべて、「実体参照」という、特殊文字をウェブ上で表現する方法で定義されています。 それぞれ、HTML中に以下のように記述することで表示可能です。

「heart」ではなく「hearts」だったように、「spade」ではなく「spades」、「club」ではなく「clubs」など複数形なので注意して下さい。
このソースを表示させると、次のように見えます。

各トランプ記号が表示されていますね？
※Netscape 4.x以下など古いブラウザでは見えません。

「文字」なので装飾は自在

ハートマークと同様、スペードやクラブも扱いは「文字」（テキスト）ですから、普通の文字と同様に装飾が可能です。 小さいマークをたくさん並べて罫線のように表現したり、 大きなマークをインパクトを出すために使ったり、様々な効果を簡単に出せます。

♣♣♣♣♣♣♣♣♣ ♣♣♣♣♣♣♣♣♣ ♣♣♣♣♣♣♣♣♣
♠ トランプ記号 ♦ いろいろ ♥
♣♣♣♣♣♣♣♣♣ ♣♣♣♣♣♣♣♣♣ ♣♣♣♣♣♣♣♣♣

大きさと色を指定するには、次のようにスタイルシートの font-size プロパティと、color プロパティを使えば簡単です。

font-sizeプロパティに「7em」を指定すると、「7文字分の大きさ」を指定したことになります。
このソースを表示すると、以下のように見えます。

おわりに

今回は、ハートマーク以外のトランプ記号の表示方法についてご紹介致しました。
非常に簡単に表示できて、装飾も自由自在だということがお分かり頂けたと思います。 ぜひ、活用してみて下さい。

関連記事

• ハートマークを表示したい
• 丸囲みの数字など機種依存文字を使うには