Web うぇっ部

最近のデザインはALLCSSでのデザインが増えてきました。今日はナビゲーションを1枚で作成する方法を載せます。最近はこのやり方がお気に入りです画像をこまごま切らなくて済むし、配置もCSSなのでサイズだけ合せておけば絶対ズレる事はありません

まず、width、heightを測り、photoshopやillustratorで作成しましょう

CSSではul、liを使って配置します。liとliのaにはdisplay:blockで幅を縛っておくことを忘れずに★

こんな感じになります。↓

        <ul>
            <li id="a"><a href="A.html"><em>A</em></a></li>
            <li id="b"><a href="B.html"><em>B</em></a></li>
            <li id="c"><a href="C.html"><em>C</em></a></li>
            <li id="d"><a href="D.html"><em>D</em></a></li>
            <li id="e"><a href="E.html"><em>E</em></a></li>
         </ul>

ここでのポイントは、liに設定されたidです。画像を切っていないので、リンクする際画像の位置を指定してあげないといけません。

まずはグレーのナビの部分です。ここは通常の表示です。今回のリンクボタンがwidth:150px、height:25pxとした場合、（この設定はliとliのaにしておいてくださいね）画像の位置の基準は左上になので、最初の画像Aはbackground-position で0px 0pxとなります。右にいく度に横の位置指定を125pxずつ増やして最後は500pxになります。縦の位置は変わらないので0pxで大丈夫です。

次はli a:hoverです。マウスをのせた時の切り替わりです。今回は下の青いナビに切り替わります。縦の位置が変わるので、グレーのナビを追い越した25pxの設定になります。横の位置はhoverする前と一緒ですね。

私は今回、liとliのaにno-repeatを設定するのを忘れてしまいました。座標の位置が合っていれば特に問題はないですが、CSSの認識が変わってくるのでちゃんと設定しておきましょう。

それではこの辺でバイバイ