ホームページ作成/特殊文字・記号の記述 (HTML)

スペード、クラブ、ダイヤも表示したい!

ウェブ上で簡単に表示できるのはハートマークだけではありません。それ以外のトランプ記号(クラブ・スペード・ダイヤ)も簡単に表示させられます。実体参照を使ってトランプ記号をいろいろ表示させてみましょう。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

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

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

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

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

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

スペード:♠ クラブ:♣
ダイヤ:♦ ハート:♥

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

スペード:♠   クラブ:♣
ダイヤ:♦   ハート:♥

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

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

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

♣♣♣♣♣♣♣♣♣ ♣♣♣♣♣♣♣♣♣ ♣♣♣♣♣♣♣♣♣
トランプ記号 いろいろ
♣♣♣♣♣♣♣♣♣ ♣♣♣♣♣♣♣♣♣ ♣♣♣♣♣♣♣♣♣

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

<span style="font-size: 5em; color: blue;">&spades;</span>
<span style="font-size: 8em; color: lime;">&spades;</span>
<span style="font-size: 7em; color: #cccc00;">&spades;</span>

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

おわりに

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

関連記事

【編集部おすすめの購入サイト】
楽天市場でホームページ作成関連の書籍を見るAmazon でホームページ作成の参考書を見る
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます