「画像(ボタンの画像)を使用したメニューの作成」の編集履歴（バックアップ）一覧に戻る

画像(ボタンの画像)を使用したメニューの作成 - (2015/06/24 (水) 23:08:07) の編集履歴(バックアップ)

---

目次

画像を使用したメニューの作成

CSSでの表現もとても大切ですが、どうしてもCSSでのフォントでは満足がいかない、あるいは意図したフォントがうまく表示されるかわからない、この画像を使ってメニューを作りたい、という事が起こります。
そのような場合に備えて画像を使ったメニューの作成方法を解説していきます。

今回は全画像(文字も含めた)メニューと画像を背景にしたメニューの作り方を解説します。

全画像のメニュー

いずれの画像も独立していてリンクが張られている状態です。
HTML

<div id="imagenavi">
  <ul>
    <li><a href="#"><img src="images/me4.png" alt="トップ"width="150" height="40"></a></li>
    <li><a href="#"><img src="images/me3.png" alt="企業情報"width="150" height="40"></a></li>
    <li><a href="#"><img src="images/me2.png" alt="製品情報"width="150" height="40"></a></li>
    <li><a href="#"><img src="images/me1.png" alt="アクセス"width="150" height="40"></a></li>
  </ul>
</div>

CSS

#imagenavi {
    padding: 0;
    margin: 0;
}
#imagenavi ul {
    list-style: none;
}

このメニュー作成方法のデメリットとしては、メニューのテキストが入力されていないため(altで記述はされていますが)、SEO対策が弱いという事と、一度画像を作ってしまったら、変更するのが難しいという事でしょう。
例えば、上に載っている文字のみを変更したい場合には不便ですね。
トップと書いてあるものをHOMEと変更するにはまた画像を作り直さなければなりません。
また、これに関しては背景のみを画像にした場合にも同じ事が言えるのですが、ページ内の画像が多くなりすぎると閲覧者がアクセスした時にアクセスするまでの時間が長くなってしまいます。
メリットとしては、確実に、思い通りのフォント、背景をどのパソコンでも表示させる事が出来る事です。
多くの魅力的なデザインのサイトでは、この方法を使って

画像を背景にしたメニュー

今度は下の画像を背景にして、文字をHTMLとCSSを使ってメニューを作成してみましょう。

完成形はこのようになっています。

さて、それではこのメニューの作り方を実際に見ていきましょう。
HTML

<div id="background-image-navi">
 <ul>
  <li><a href="#">トップ</a></li>
  <li><a href="#">企業情報</a></li>
  <li><a href="#">製品情報</a></li>
  <li><a href="#">アクセス</a></li>
 </ul>
</div>

CSS

#background-image-navi ul {
 width: 300px;
 height: 500px;
}
#background-image-navi li {
 width: 270px;
 height: 83px;
 margin: 10px;
 padding: 0;
 list-style: none;
 overflow: hidden;
}

#background-image-navi li a {
 display: block;
 margin: 0;
 padding-top: 30px;
 text-decoration: none;
 text-align: center;
 background: url("images/back-img.png") no-repeat;
 color: #ffffe2;
 width: 270px;
 height: 83px;
}