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

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

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


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

【本記事の目次】  

ハートマークも文字の1つ「ハート記号」なので色もサイズも自由

他の多くの記号と同様に、ハートマークも「文字」として表示できます。そのため、CSS(スタイルシート)を使えばハートの色も大きさも自由に指定できます。さらにCSSを駆使すれば、ハートに影を付けたり縁取りをしたりする加工も簡単に実現できます。わざわざハートマークを画像として作る必要はありません。

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

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


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

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


上図の左上側はChromeでハートマークを表示した例です。携帯端末でよく目にする絵文字のように、カラフルなハートマークが表示されています。上図の右下側はEdgeでハートマークを表示した例です。シンプルな1色のハートマークが表示されています(ここでは装飾例として赤色と緑色を加えています)。2つのブラウザでハートの見た目はかなり異なりますが、どちらも同じコードで表されるハートマークです。

このように、閲覧環境(ブラウザ)によって、
 
  • カラフルに表示される代わりに色の変更ができない(Firefox・Chromeなど)
  • 自由な色を指定できる代わりに1色しか使えない(IE・Edgeなど)

といった差があります。ただ、どちらも「文字」という扱いには変わりありませんから、CSSを使うことでサイズを変更したり影を付けたりする加工はできます。もし、色が重要な場面で使いたい場合には、確実に配色を指定できる最もシンプルなハートマーク(♥♡)を使っておく方が無難でしょう。

 

パソコンでのハートマークの出し方:漢字変換

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

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


変換候補の端に「環境依存」と書かれているのは、これらのハートマークがUnicodeで定義されている記号だからです。HTMLソース内にそのまま書きたい場合は、HTMLソースの文字コードがUTF-8などのUnicodeである必要があります。もし、SHIFT-JISやEUC-JPなどの文字コードを使っている場合には、HTMLソースにそのまま書くことはできません。その場合でもハートマークを書く方法はあります。その点は、次のページで解説します。

 

パソコンでのハートマークの出し方:一覧から選ぶ

ハートマークを漢字変換で出せない場合でも、文字の一覧機能などを使えばリストから選ぶ方法で簡単に出せます。下記に、Windowsに標準搭載されているMS-IMEでハートマークを出す方法と、市販の有名IME(日本語入力機能)であるATOKでハートマークを出す方法の2通りをご紹介しておきます。

MS-IMEでハートマークを出す方法
まずは、MS-IMEのツールバーから「IMEパッド」を出します。下図のようなアイコンが見えない場合は、タスクトレイ(時刻などが表示されている場所)にある「あ」のアイコンを右クリックするとメニューが出ます。
 
MS-IMEの文字一覧機能を使うハート記号の出し方

MS-IMEの文字一覧機能を使うハート記号の出し方


上図の左端にある赤丸1のボタンを押すと、文字の一覧が出ます。赤丸2の領域を見ながらスクロールして、本記事の次のページでご紹介する数値を出します(上図では「2660」付近を表示しています)。最後に赤丸3のように目的の記号をクリックしてから[Enter]ボタンを押せば、そのハートマークを出す(入力する)ことができます。

ATOKでハートマークを出す方法
まずはATOKのツールバーからメニューを出し(下図の赤丸1)、メニューの中にある「文字パレット」という項目(赤丸2)をクリックします。すると、下図の右側のように「ATOK文字パレット」というウインドウが現れます。
 
ATOKの文字パレットを使うハートマークの出し方

ATOKの文字パレットを使うハート記号の出し方


次に「Unicode表」タブをクリックします(赤丸3)。すると、Unicodeで定義されている文字の一覧が表示されます。ここで本記事の次のページでご紹介する数値をコード欄(赤丸4)に入力すると、その数値に対応したハートマークが現れます(ここでは例として「1F493」を入力しています)。最後に「コピー」ボタンを押せばクリップボードにコピーされますから望みの場所に貼り付ければ良いでしょう。または「確定」ボタンを押せば、直接入力することもできます。

そもそもコピー&ペーストするのが最も簡単
Unicodeの中でもハートマークは複数の場所に分散して定義されているので、一覧から探すのは大変です。探すよりも、どこかのウェブ上などに表示されているハートマークを範囲選択してコピーする方が楽でしょう。
 
ハートマーク表示サンプルページ

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


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

 

ハートマークをウェブページ上に掲載して、色や大きさを指定するには

上記でご紹介したように、Unicodeで定義された様々なハートマークは簡単に出せます。問題は、これらのハートマークをウェブページ上に掲載したい場合です。先程も少しだけご紹介しましたが、ウェブページ(HTMLファイル)で使っている文字コードの種類によっては、ハートマークをそのまま掲載することはできません。その場合には、特殊な記述方法を使う必要があります。

それでは次のページで、ハートマークをウェブページ上に掲載する環境別の方法と装飾方法を見ていきましょう。