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

様々な記号の中でもハートマークは特に需要の高い記号でしょう。昔はパソコン上でハートマークを表示するには、画像として作ったり特殊なフォントを指定したり大変面倒な手間が必要でした。しかし、現在ではUnicodeの中に文字としてハートマークも含まれているため、簡単にハートマークを表示できます。もちろん、ウェブページ上に表示することも簡単です。

ハートマークも文字として定義されているので、色やサイズはCSSで自由に装飾できる (Edgeでの表示例)

ハートマークも文字として定義されているので、色やサイズはCSSで自由に装飾できる (Edgeでの表示例)


ハートマークも文字の1つ
他の多くの記号と同様にハートマークも「文字」として表示できるため、CSS(スタイルシート)を使えば上図のようにハートの色も大きさも自由自在に変更できます。CSSを駆使すれば、ハートに影を付けたり縁取りをしたりする加工も画像化することなく簡単に実現できます。

下図は大きさを72ptと36ptに指定した赤色のハートマークです。比較のために「ハート」という文字も一緒に書きました。巨大なハートから極小のハートまで何でも作り放題です。このハートマークも文字の一種ですから、マウスなどを使って範囲選択してコピーすることもできます。

ハートマークも文字なので範囲選択してコピーなどもできる

ハートマークも文字なので範囲選択してコピーなどもできる


絵文字としてのハートマークの見た目は環境によって異なる
ウェブ上で表示できるハートマークは、上図でご紹介したようなシンプルな形以外にも下図のようなバリエーションがあります。どれもUnicodeで定義されているので文字として表示できます。ただし、これらのハートマークは環境(ブラウザ)によって見た目が異なります。

環境によって見た目が異なるハートマークもある

環境によって見た目が異なるハートマークもある
左上:Chrome56、右下:Edge14 (共にWindows10版での表示例)


上図の左上側には、携帯端末などでよく目にする絵文字のようにカラフルなハートマークが表示されています。右下側には、シンプルな1色のハートマークが表示されています。これらはどちらも同じコードで表されるハートマークです。このように、環境(ブラウザ)によって、

  • カラフルに表示される代わりに色の変更ができない(Firefox・Chromeなど)
  • 自由な色を指定できる代わりに1色しか使えない(IE・Edgeなど)

といった差があります。ただ、どちらも「文字」という扱いには変わりありませんから、CSSを使うことでサイズを変更したり影を付けたりする加工は可能です。

ハートマークを表示する方法
本記事では、これらのハートマークをウェブページ上に表示する方法をご紹介いたします。ハートマークを入力する汎用的な方法と、ウェブページの仕様に合わせた掲載方法を解説しています。ぜひ、様々なハートマークをウェブ上に掲載してみて下さい。

【本記事の目次】
1. パソコンでのハートマークの出し方 (p.1)
2. ハートマークをウェブページ上に掲載する方法1:HTMLにそのまま書く (p.2)
3. ハートマークをウェブページ上に掲載する方法2:文字参照を使う (p.2)
4. ウェブ上でハートマークを様々に装飾する例 (色や大きさ・影などを指定) (p.2)


1. パソコンでのハートマークの出し方

漢字変換で出せるハートもある

漢字変換で出せるハートもある
(Windows10のMS-IMEでの例)

ハートマークはUnicodeに文字(記号)として含まれています。ですから、他の記号と同様に漢字変換で出せる場合もあります。右図はWindows10に標準搭載のMS-IMEを使って「ハート」で漢字変換してみた例です。多数のハートマークが変換候補に並んでいます。

漢字変換で出せなくても、IMEのUnicode文字一覧機能などを使えば、簡単に選んで出せます。下記は、Windowsに標準搭載されているMS-IMEでハートマークを出す方法と、市販の有名IMEであるATOKでハートマークを出す方法です。


 
MS-IMEでハートマークを出す方法
MS-IMEの文字一覧から出す方法

MS-IMEの文字一覧から出す方法

IMEのツールバーから「IMEパッド」を出します。図のアイコンが見えない場合は、タスクトレイ(時刻が表示されている場所)にある「あ」のアイコンを右クリックするとメニューが出ます。

赤丸1のボタンを押すと文字一覧が出ます。赤丸2の領域を見ながらスクロールして次のページでご紹介する数値を出します。赤丸3のように目的の記号をクリックして、[Enter]を押せば入力できます。


 
ATOKでハートマークを出す方法
ATOKの文字パレットから出す方法

ATOKの文字パレットから出す方法

ATOKのメニューで「文字パレット」を出します(赤丸1~2)。次に「Unicode表」タブをクリックします(赤丸3)。すると、Unicodeで定義されている文字の一覧が表示されます。次のページでご紹介する数値をコード欄(赤丸4)に入力すると簡単に出せます。最後に「コピー」を押してクリップボードにコピーするか、「確定」を押して直接入力します。


 
そもそもコピー&ペーストするのが最も簡単
ハートマークを表示したい!

ハートマーク表示サンプルページ

Unicodeの中でもハートマークは複数の場所に分散して定義されているので、一覧から探すのは大変です。探すよりも、他所に表示されているハートマークを範囲選択してコピーする方が楽でしょう。

サンプルページ「ハートマークを表示するテストページ」には20種類のハートマークを掲載しています。ここからコピーして望みの場所に貼り付けるのが簡単です。


 

ハートマークをウェブページ上に掲載するには

上記でご紹介したように、Unicodeで定義された様々なハートマークは簡単に出せます。問題は、これらのハートマークをウェブページ上に掲載したい場合です。作成しているウェブページの文字コードによって、掲載に使える方法が異なります。

それでは次のページで、ハートマークをウェブページ上に掲載する環境別の方法をご紹介いたします。