ホームページ作成

【ホームページ作成】ハートマークを表示したい！

特殊文字・記号の記述 (HTML)

更新日：2006年08月23日

ハートマークを表示したい！

西村文宏

ホームページ上でハートマークを表示する方法を、わかりやすく解説します。ハートマークは実はとっても簡単に表示できる記号で、色も大きさも自由自在。HTMLの実体参照という特殊記号の表示方法を使います。

ハートマークの記述方法

それでは、ハートマークを表示させる方法をご紹介致しましょう。とても簡単です。
HTMLで次のように書くだけです。

中塗りハートマーク → &hearts; または

中抜きハートマーク →

上記のソースを表示すると、以下のように見えます。

中塗りハートマーク → ♥ または ♥
中抜きハートマーク →

※中塗りのハートマークはテキストで表示していますが、中抜きのハートマークは画像で掲載しています。（中抜きのハートマークは表示できない環境もあるため）

先ほどのソースのような記述方法（「&hearts;」は文字実体参照、「」や「」は数値文字参照と呼びます）で、簡単にハートマークを表示できます。

中抜きのハートマークは、文字実体参照での指定方法はありません。数値文字参照だけです。中塗りのハートマークは、文字実体参照でも数値文字参照でも指定できます。（どちらで書いても表示される記号は同じです。）

ハートマークに色をつけたり大きさを変えたりするには？

ハートマークもHTML上の「特殊文字（記号）」ですから、普通の文字と同じように装飾が可能です。色やサイズの指定は、スタイルシートで以下のように書くとよいでしょう。

赤色ハート：<span style="font-size: 200%; color: red;">&hearts;</span>
青色中抜きハート：<span style="font-size: 300%; color: blue;">

</span>

font-sizeプロパティで大きさを指定し、colorプロパティで色を指定しています。
上記のソースを表示すると、以下のように見えます。

赤色ハート：♥
青色中抜きハート：

いかがでしょうか？このように装飾は自由自在です。

ぜひ、さまざまなハートマークを使ってみて下さい。

※Internet Explorerの場合、「中抜きのハート」が表示できるのは、バージョン6.0以降のみです。比較的古いブラウザでも閲覧できるようにしたいなら、中抜きのハートマークは避け、中塗りのハートマークだけを使うようにした方がよいでしょう。

マネしたくなるアイデア住宅

住まいには、人の個性がよく現れるもの。同じ空間をどのように使うかで、雰囲気も、快適さも大きく変わってくる。ここでは、「建築家と家を建てる」ガイドの川畑博哉氏が厳選した10軒を紹介し、建築家それぞれのこだわりのポイントを紹介しよう。建築のプロたちが考え出した、マネしたくなるアイデアが満載！さぁ、いますぐチェック！