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

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

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

この記事の担当ガイド

Web作成が楽しくなるお手伝い。分かりやすい解説を探求するWeb職人

  • このエントリーをはてなブックマークに追加

ハートマークはとっても簡単に表示できます!

「なぜパソコン上ではハートマークが表示できないのか!?」と思ったことはありませんか?ブログが普及してたくさんの人々が日記を書くようになった今、ハートマークの需要は多いのではないかと思います。

ハートマークは、ウェブ上ではとても簡単に表示できます。

ハートマークの画像を作成して、毎回画像を文中に挿入する形でがんばっている方々もいらっしゃいますが、 そんな手間をかける必要はありません。HTMLソースにある文字列を書くだけで、様々な大きさ、様々な色でハートマークを表示させられます。

以下のような感じで、中塗りと中抜きのハートマークを表示できます。色や大きさはスタイルシートを使って自由に指定できます。

ハートマークの表示例

ハートマークの表示例 (このサンプルは画像で掲載しています。)

※Netscape 4以下など、かなり古いブラウザでは見えません。また、Mac版Firefoxで表示フォントが「ヒラギノ」の場合は見えません。(他のフォントなら見えます。)
※IE5.5以下では、中抜きのハートは見えません。

 

ハートマークも特殊記号の1つ

このハートマークは、HTMLの「実体参照」という特殊文字(特殊記号)の表示方法で定義されています。

テキスト(文字)ですから、当然、(普通の文字と同じように)色やサイズを自由自在に指定できます。 スタイルシートを使えば、巨大なハートや極小のハートまで、さまざまに指定し放題です。
例えば、以下は、大きさを72ptに指定した赤色のハートマークです。 比較のために「ハート」という文字も一緒に書いてみました。

ハート♥

この方法は、HTMLで定義されている実体参照を使ったものですから、少なくとも最近のブラウザであればOSに関係なく表示できます。
上記のサンプルは画像ではありません。実際にテキストとして表示されています。(文字列を範囲選択してコピーすることもできます。)

※ちなみに、日本国内でのSNS(ソーシャル・ネットワーキング・サービス)の代表格 mixi 上でも、この方法でハートマークを書くことができます。

で、肝心のハートマークの書き方は・・・ 次のページで!

驚くほど簡単なハートマークの表示方法とは >>

更新日:2006年08月23日

あわせて読みたい

    この記事を読んで良かったですか?

    良かった

    2

    この記事を共有する