ボタンを作るには?

まずは、次のリンクボタンを見てみて下さい。
※かなり古いブラウザでは、ボタンではなく普通のリンクにしか見えない場合があります。

通常、上記のように6種類のボタンを作ろうと思うと、6つのボタンを別々の画像として用意しなければなりません。しかし、上記の例では、使用しているのは、次のたった1つの無地のボタン画像だけです。

無地のボタン画像

つまり、読み込まれた画像は上記の画像1つだけで、先ほどの6つのボタンは、この1つの画像とHTMLを駆使して作られたものだということです。
この方法を使えば、画像を1つ用意するだけで、無限にボタンを作れます。

これらのボタンは、無地のボタン画像の上に、HTMLでテキスト(文字)を重ねるだけの方法で作っています。

どんなメリットが?

上記のリンクボタン作成法には、次のようなメリットがあります。

  1. 表示が高速
    ボタンの数がいくつあっても、読み込まなければならない画像は1つだけですから、非常に高速です。
  2. 画像が表示されなくても問題がない
    文字は画像ではなくテキストですから、たとえボタン画像が読み込まれなくても、文字は問題なく表示されます。
  3. 画像が非表示に設定されていても大丈夫
    理由は上記と同じです。文字は画像ではありませんので、画像が非表示でもリンク文字は見えています。
  4. (リンクがクリック可能になるまでの)待ち時間がない
    ボタン画像が読み込まれる前から、既に文字は表示されているので、画像の表示を待たずにリンク機能は利用できます。
  5. 書き換えが楽
    画像を編集する必要がないので、リンク名の書き換えは、HTMLソースを書き換えるだけです。
  6. スタイルシートでロールオーバーが手軽に
    文字の上にマウスが乗った際に、文字の装飾を変更するなどの簡易「ロールオーバー」機能が、HTML中にスタイルを記述するだけで実現可能です。

もちろん、デメリットがないわけではありません。文字は画像ではないので、フォントの自由度がほとんどありません。(表示フォントの指定は可能ですが、閲覧者の環境に同じフォントがインストールされていない限り、デフォルトフォントで表示されてしまいます。)

また、フォントに各種効果を付けられない点や、 アンチエイリアシング処理を施してフォントのシャギーを除去(※)したりできない点などのデメリットもあります。
※シャギーとは、文字(や図形)の縁がピクセルにそってギザギザになっていることを言い、このギザギザを目立たなくする処理を、アンチエイリアシング処理と言います。 Photoshopなどのソフトウェアでは、アンチエイリアシング処理を施して、なめらかな文字(や図形)を生成する機能があります。

しかし、この方法であれば、先にも述べた6つの大きなメリットが得られます。
「何としてでもシャギー除去にこだわらなければならない!」というわけでなければ、 今回ご紹介した方法を試してみてはいかがでしょうか?

どうやって記述するの?

では、具体的な作り方(記述方法)を見ていきましょう。

それでは、次のページへ! →