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

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

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

執筆者:西村 文宏

更新日:2006年08月23日

この記事の担当ガイド

この記事の担当ガイド
関西大学大学院 総合情報学研究科 博士課程にて情報学を学ぶ傍ら、ホームページに関する書籍の執筆や企業や団体のホームページ製作・フリーソフト開発などを行っている。

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

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

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

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

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

ハートマークの表示例

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

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

 

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

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

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

ハート♥

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

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

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

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

あわせて読みたい

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

良かった

0

この記事を共有する

男なら、一度は憧れるスポーツカー。特にランボルギーニのカウンタックなんて、想像しただけで、胸が躍るかもしれません。そんなディテールを搭載したアイテムを発見! 夢を叶える第一歩になるのではないでしょうか。

デジタル関連ユーザ投稿

「100円ショップで買ってよかったもの」を集めてみました

1度は行ってみたい美味しい名店をピックアップしました

新着・人気記事

All Aboutをフォローしよう!
  • Google+

おすすめ記事

メルマガ登録

【デジタルメルマガ】オトナのオトコなら知っておきたい、PCやデジモノに関する情報をお届けします。

女性向けWebマガジンさらに読む

男性向けWebマガジンさらに読む

ショッピングカタログ

tips+ 毎日そそるヒラメキを