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

画像を使わずに絵や記号を表示?特殊なフォントを使う(2ページ目)

画像ファイルを使わずに、様々な絵や記号を表示する方法をご紹介。この方法なら、読み込み速度の低下を招かずに絵や記号を好きなだけ使えます。実現方法はとっても簡単なのでぜひお試しを。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

画像を使わずに絵や記号を表示する方法

それでは、タネ明かしです。

先ほどの絵や記号は、全て、Wingdings や Webdings という絵文字用フォントで表示した「文字」です。これらのフォントには、A・B・C…といった文字の代わりに、絵や記号が割り当てられています。

例えば、標準的なフォントでは「J」というアルファベットが割り当てられている部分には、Wingdingsフォントでは「J」という絵が割り当てられています。
ですから、 HTMLで

<font face="Wingdings">J</font>

と記述すると、ニコニコマーク「J」が表示されるわけです。
スタイルシートを使って記述する場合は、次のようになります。

<span style="font-family:Wingdings;">J</span> 

これらのフォントは、通常の欧文フォントと同様に利用できます。 Windowsにはこれらのフォントは最初から存在します。 Macintoshでも、Internet Explorer がインストールされている環境なら存在するはずです。(※2002年12月現在)

どんな絵や記号があるの?

どんな絵や記号が含まれているのかは、IMEの文字一覧機能を利用すると手軽に分かります。下記に、MS-IME2002 での表示手順と ATOK15 での表示手順をご紹介致します。

MS-IME 2002 の場合:

(1) 言語バーの「IMEパッド」をクリックして、「文字一覧」をクリックします。
言語バー上の文字パレットをクリック

(2) フォント名を「Webdings」や「Wingdings」に変更すると表示されます。
※文字コードを「Unicode」にしないと一部しか表示されません。
MS-IME2002 IMEパッド 文字一覧

ATOK15 の場合:

(1) ATOKパレット上の「文字パレット」ボタンをクリックします。
ATOK15バー上の文字パレットをクリック

(2) 「Symbol」チェックボックスにチェックを入れると、絵文字系フォントが選択可能になるので、「Webdings」などを選択します。
ATOK15 文字パレット

ATOKの「文字パレット」の方が、全体を見渡しやすいので、ATOKをお持ちの方は、ATOKでご覧になられることをお勧め致します。

どの絵文字が何の文字に対応しているか

絵文字の一覧が見れても、望みの絵文字の入力方法が分からなければ、書きようがありませんね。次のページで、Wingdings と Webdings の一覧と、その入力方法をご紹介致します。

次のページへ続きます →

  • 前のページへ
  • 1
  • 2
  • 3
  • 5
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます