-
って言う事で4回目。
今回はULタグを使ったパンクズのテクを紹介します。
ULタグとはリストを表示するためのもので良く使います。
パンクズとは今現在サイトのどの部分を見てるのかわかりやすくする為のナビゲーションの役割で使用します。
画像1がパンクズですね。
画像2の>>のアイコン画像を使います。
mixiで見てる人はgifの画像が非対応のためXTRECのこらむの同記事より入手ください
-
HTMLソースは・・・・
<div id="pageNv" title="パンクズ">
<ul>
<li><a href="/">HOME</a></li>
<li>BBS</li>
</ul>
</div>
CSSは次のようになります
#pageNv ul {
list-style:none;
height:20px;
margin:0;
padding:0;
}
#pageNv li {
display:inline;
margin:0;????
padding:0;
margin-right:8px;
}
#pageNv li a {
background:url(img/icn_arrow_pnv.gif) no-repeat 100% 50%;
padding-right:18px;
color:#666;
}
■解説
divにtitle="パンクズ"をつける理由は音声ブラウザ向けです。通常のサイトは記入しなくても良いでしょう。
liタグはブロック要素なのでdisplay:inline;でインライン要素に変更します。
リストのリンク(アンカータグ)だけに>>画像を背景画像として呼び出します。
backgroundの説明は
url(このCSSから見た画像へのパス)
no-repeatで1回(個)だけ画像を表示させます
100% 50%は横位置、縦位置の関係で横位置の100%は右側に表示させます。左に表示させたい場合は0%、もしくは0px等
縦位置は50%で中央に、0%なら上、100%で下となります。
単位としてはpxや、right、left、center、bottom、top等でも指定できます。
縦位置を50%としてる理由はクロスブラウザ対策と文字サイズ可変対策です。
今回は右側に表示させるのでテキストと重ならないよう右側に余白(padding)をあけます。
これで完成。
態々矢印に>>等テキストを記入する必要もなく画像を使用してフルCSS化する事でデザインにあわせたパンクズが出来ます。
いまでは結構真似されて少しずつこの技が使われてるので是非マスターしてください。
