ボタンを作るには?
まずは、次のリンクボタンを見てみて下さい。
※かなり古いブラウザでは、ボタンではなく普通のリンクにしか見えない場合があります。
通常、上記のように6種類のボタンを作ろうと思うと、6つのボタンを別々の画像として用意しなければなりません。しかし、上記の例では、使用しているのは、次のたった1つの無地のボタン画像だけです。
つまり、読み込まれた画像は上記の画像1つだけで、先ほどの6つのボタンは、この1つの画像とHTMLを駆使して作られたものだということです。
この方法を使えば、画像を1つ用意するだけで、無限にボタンを作れます。
これらのボタンは、無地のボタン画像の上に、HTMLでテキスト(文字)を重ねるだけの方法で作っています。
どんなメリットが?
上記のリンクボタン作成法には、次のようなメリットがあります。
- 表示が高速
ボタンの数がいくつあっても、読み込まなければならない画像は1つだけですから、非常に高速です。 - 画像が表示されなくても問題がない
文字は画像ではなくテキストですから、たとえボタン画像が読み込まれなくても、文字は問題なく表示されます。 - 画像が非表示に設定されていても大丈夫
理由は上記と同じです。文字は画像ではありませんので、画像が非表示でもリンク文字は見えています。 - (リンクがクリック可能になるまでの)待ち時間がない
ボタン画像が読み込まれる前から、既に文字は表示されているので、画像の表示を待たずにリンク機能は利用できます。 - 書き換えが楽
画像を編集する必要がないので、リンク名の書き換えは、HTMLソースを書き換えるだけです。 - スタイルシートでロールオーバーが手軽に
文字の上にマウスが乗った際に、文字の装飾を変更するなどの簡易「ロールオーバー」機能が、HTML中にスタイルを記述するだけで実現可能です。
もちろん、デメリットがないわけではありません。文字は画像ではないので、フォントの自由度がほとんどありません。(表示フォントの指定は可能ですが、閲覧者の環境に同じフォントがインストールされていない限り、デフォルトフォントで表示されてしまいます。)
また、フォントに各種効果を付けられない点や、 アンチエイリアシング処理を施してフォントのシャギーを除去(※)したりできない点などのデメリットもあります。
※シャギーとは、文字(や図形)の縁がピクセルにそってギザギザになっていることを言い、このギザギザを目立たなくする処理を、アンチエイリアシング処理と言います。 Photoshopなどのソフトウェアでは、アンチエイリアシング処理を施して、なめらかな文字(や図形)を生成する機能があります。
しかし、この方法であれば、先にも述べた6つの大きなメリットが得られます。
「何としてでもシャギー除去にこだわらなければならない!」というわけでなければ、 今回ご紹介した方法を試してみてはいかがでしょうか?
どうやって記述するの?
では、具体的な作り方(記述方法)を見ていきましょう。