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

更新日:2006年08月23日

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

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

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

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

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

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

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

ハートマークの表示例

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

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

 

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

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

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

ハート♥

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

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

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

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

1 2
  • 印刷する
  • ブックマークする
  • 携帯に送る
  • ブログに書く

あわせて読みたい

この記事の担当ガイド

写真

西村 文宏

関西大学大学院 総合情報学研究科 博士課程にて情報学を学ぶ傍ら、ホームページに関する書籍の執筆や企業…

続きを読む

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

人気ホームページ作成ランキング

Powered by 価格.com

デジタル関連コミュニティ

北欧好きが、愛用の北欧モノを見せ合うコミュニティ

メルマガ登録

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

ショッピングカタログ

All About ウェブマガジン

女性向け

雨が楽しくなる!レイングッズ15

男性向け

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

All About モバイル

QRコード

All Aboutがケータイで読める!

オススメ記事をメールでチェック

知識・経験を生かして、記事を書いてみませんか?