ホームページ作成/画像の表示・活用 (HTML,CSS,JavaScript)

読込画像1つで複数のボタンを作る方法

複数のリンクボタンを、たった1つの画像で作ってみましょう。画像の表示方法とHTMLを駆使すれば、読み込む画像はたった1つで、無限にリンクボタンを作ることができます。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

ボタンを作るには?

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

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

無地のボタン画像

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

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

どんなメリットが?

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

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

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

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

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

どうやって記述するの?

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

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

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

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

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