目次
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;
}
ul、li、aの違いをはっきりと意識しながらどこに何を加えるべきなのかを考えてコードを作っていきましょう。
まず、背景にするback-img.pngは縦83pxで横が270pxの画像です。
これを縦に4つ並べる訳ですからulには少なくとも83×4＝252px縦に長さが必要です。
今回はかなりゆとりを持たせて500pxとしていますが、marginも考えて350pxくらいが妥当と思われます。
横もmarginの事を考えて、30px(両サイド15pxのmarginまでなら収まりきる)ようにしました。
次にliについて指定していきます。
背景画像の領域をそのままボタンにしたいので、縦横はやはり背景画像と同じ83px×270pxとしました。
marginによって画像がくっついてしまったりするの避けます。それぞれのボタンが縦に10pxずつ離れた状態になります。
list-styleのnoneにして、左に表示される黒い丸を消します。
次が重要です。
overflowプロパティは、二つのものが重なった時に、どのように表示するのか？？を表すプロパティです。
hiddenは重なった部分をそのまま表示させずに、隠してしまうという値です。
これは後に形を崩さないために重要になってきます。
最後にaについて記述していきます。
display:block;でブロック要素として扱えるようにした後は特筆すべきことは、padding-topについてでしょう。
padding-topがないとどのような表示になるでしょうか？？
文字だけがボタンのかなり上側に表示されてしまい、はみでてしまいます。
今、背景画像の位置はliのmarginとpaddingの記述によって固定されているので、移動しませんが、padding-topによって文字を下に移動させようとすると、クリッカブル部分もボタンをはみだしてしまいます。
それを防いでいるのが、overflow:hiddenなのです。
この存在によって、liの余白部分にはみ出してしまった部分は無視され、ボタン部分のみにクリッカブル部分が適用されます。
