スタイルシートマニア

ホームページカスタマイズ Tips

ナビゲーションメニュー(実用編Ⅲ)

ナビゲーション画像を一枚にしてナビゲーションを作るのって難しくてできない!っという人のために、簡単に作るコツをお教えしましょう。
今回は今まで作っていきた以下の画像を使って簡単なものからやってみます。

この画像のポイントは同じ間隔の箱(長方形)で全項目を作っているところにあります。こうするとどうして簡単なのか?というと、一つ一つの項目に横幅を設定しなくても#menu08 li a に横幅を設定するだけで一括設定されることと、各項目の背景画像が簡単な足し算で設定できるのです。

この画像の項目ひとつにつき横幅100px立幅30pxで作ってあります。
つまり#menu08 li aの設定をwidth: 100px;height: 30px;に設定すれば、各項目の横幅と立幅の設定が完了します。
そして、とっても面倒な背景画像の設定ですが、横幅が100pxで固定されているので項目ひとつが増えるたびに、-100pxプラスしていけば簡単に設定ができるのです。
そしてそして、ロールオーバー時の設定ですが、off時の背景画像の設定が完了していればその設定のまま下に並んでいる画像位置を設定するだけで簡単にできます。この場合で言えば、立幅が30pxなので、縦位置を-30pxに設定すれば完了です。

#menu08 ul {
 width: 600px;
 margin-top: 2em;
}
#menu08 li {
 display: inline;
}
#menu08 li a {
 width: 100px;
 height: 30px;
 float: left;
 display:block;
 text-decoration: none;
 font-size: 0;
 text-indent: -9999px;
 outline: none;
}
#menu08 #home01 a {
 background: url(../img/navi08.gif) 0 0 no-repeat;
}
#menu08 #cms01 a {
 background: url(../img/navi08.gif) -100px 0 no-repeat;
}
#menu08 #source-branch01 a {
 background: url(../img/navi08.gif) -200px 0 no-repeat;
}
#menu08 #homepage-recommendation01 a {
 background: url(../img/navi08.gif) -300px 0 no-repeat;
}
#menu08 #source-marine01 a {
 background: url(../img/navi08.gif) -400px 0 no-repeat;
}
#menu08 #production-rate01 a {
 background: url(../img/navi08.gif) -500px 0 no-repeat;
}
#menu08 #home01 a:hover {
 background-position: 0 -30px;
}
#menu08 #cms01 a:hover {
 background-position: -100px -30px;
}
#menu08 #source-branch01 a:hover {
 background-position: -200px -30px;
}
#menu08 #homepage-recommendation01 a:hover {
 background-position: -300px -30px;
}
#menu08 #source-marine01 a:hover {
 background-position: -400px -30px;
}
#menu08 #production-rate01 a:hover {
 background-position: -500px -30px;
}

サンプル

ナビゲーションメニュー(実用編Ⅱ)

今までは、CSSベースでナビゲーションをデザインしていましたが、今回からは画像を使ってナビゲーションを作っていきます。CSSだけだと、どうしてもやれる事に制限が出てきてデザインが自由にできない状況でしたが、画像を使うことでフォントを自由に選択できたり、細かなデザインも可能になります。

今回のポイントは#menu07 li a のfont-size: 0;でテキストを小さくしてtext-indent: -9999px;で画面外に飛ばし、その後に各項目にIDを振り分けて画像をbackgroundで指定・位置を調整することにあります。ちなみにdisplay:block;にしないと画像は表示されないので注意してください。僕も時々忘れてて、「なんで写らないんだ!」っということが間々あります(最近は原因が分かっているのですぐ対処できますけど)

<div id="menu07">
<ul>
<li id="home"><a href="http://source-marine.net/css-mania">Home</a></li>
<li id="cms"><a href="http://source-marine.net/cms/"CMS</a></li>
<li id="source-branch"><a href="http://source-branch.net/">ソースブランチ</a></li>
<li id="homepage-recommendation"><a href="http://source-marine.net/homepage-recommendation/">HPのすすめ</a></li>
<li id="source-marine"><a href="http://source-marine.net/">ソースマリン</a></li>
<li id="production-rate"><a href="http://source-marine.net/production-rate/index.html">制作料金</a></li>
</ul>
</div>
#menu07 ul {
 width: 600px;
}
#menu07 li {

 display: inline;
}
#menu07 li a {
 width: 100px;
 height: 30px;
 float: left;
 display:block;
 text-decoration: none;
 font-size: 0;
 text-indent: -9999px;
 outline: none;
}
#menu07 #home a {
 background: url(../img/navi07.jpg) 0 0 no-repeat;
}
#menu07 #cms a {
 background: url(../img/navi07.jpg) -100px 0 no-repeat;
}
#menu07 #source-branch a {
 background: url(../img/navi07.jpg) -200px 0 no-repeat;
}
#menu07 #homepage-recommendation a {
 background: url(../img/navi07.jpg) -300px 0 no-repeat;
}
#menu07 #source-marine a {
 background: url(../img/navi07.jpg) -400px 0 no-repeat;
}
#menu07 #production-rate a {
 background: url(../img/navi07.jpg) -500px 0 no-repeat;
}
<a title="ナビゲーションメニュー(実用編Ⅱ)サンプル" href="http://source-marine.net/css-mania/sample081005 " target="_blank">サンプル</a>

ここで、画像を使うんなら、はなっから
<li><a href=”http://source-marine.net/css-mania/><img src=”home.gif” width=”100″ heigth=”30″ alt=”home” /></a></li>
にすればいいのではないか?っという疑問も当然出てくると思います。

まあ、これでも別にかまいませんし、間違いでもありません。ただ僕の見解としては、SEO的に若干不安なのでそれぞれの項目にIDを振り分けて設定しています。それというのも、以前の記事にも書いたように極力無駄なタグは省くというのが、SEOにおける「最適化」であり、またスタイルシートの「原点」だと僕は思っています。

<li><a href=”http://source-marine.net/css-mania/><img src=”home.jpg” width=”100″ heigth=”30″ alt=”ホーム” /></a></li>
<li id=”home”><a href=”http://source-marine.net/css-mania/>ホーム</a></li>

上の二つのタグを比べたら分かると思いますが、そこまで劇的に違わないにしろ僕のやり方の方がタグが短くなっていることがわかると思います。ここだけで言えば小さなことですが、これが積み重なると大きな違いになります。この違いが、同じくらいのステータスを持っている二つのホームページがひとつ上に出られるかどうか?っという要因のひとつになりえると僕は思います。

まあ、確かにメンテナンス性は少し落ちますし、これをやったからと言ってそんなに違わないとは思いますので、そこまで気を使わなくてもいいと思いますが、コーディングをやる人間としてはこれくらいのことはできなければいけないと思います。

画像を一枚にして位置を調整することに関しては次回、解説します。

ナビゲーションメニュー(実用編Ⅰ)

さて、今まではCSSだけでナビゲーションを作ってきましたが、CSSだけではやれることに何かと制限が多いので画像を取り入れたナビゲーションを作ってみます。

今回は前回使ったCSSナビゲーションに背景の画像を入れて見栄えをもうちょっと凝った感じに変えてみましょう。
今回のポイントは#menu06 li a のbackground: に url(../img/navi-bg01)で画像を指定して、 repeat-x;で画像を横にリピートさせているところにあります。

#menu06 ul {
 width: 600px;
 margin-top: 2em;
 border-left: 1px solid #999;
}
#menu06 li {
 display: inline;
}
#menu06 li a {
 background: url(../img/navi-bg01.jpg) repeat-x;
 width: 75px;
 height: auto;
 padding: 3px 10px;
 float: left;
 border-top: 1px solid #999;
 border-right: 1px solid #999;
 border-bottom: 1px solid #999;
 display:block;
 text-decoration: none;
 font-size: 0.8em;
 font-weight: bold;
 color: #fff;
}

サンプル

これでかなりできることに幅が出てきたんじゃないかと思います。