フッターメニュー区切りを画像でやってみる サンプル01
普通にテキスト間に「 | 」を画像化してリスト背景として表示。
今回は li タグの右側に背景画像をつけるというやり方にしてあるので、左側に1つ「| 」が足りなくなるため、最初のテキストに対して span で一番左に同じ背景画像が出るように指定してみた。
フッターメニュー区切りを画像でやってみる サンプル02
テキスト間に適当な画像をリスト背景として表示。
背景画像が「 | 」の場合は1ピクセルなのであまり気にならないが、当然背景画像の幅が大きくなればそれに合わせてcssでpaddingをうまいこと合わせてやる必要がある。
フッターメニュー区切りを画像でやってみる サンプル03
上記サンプル01,02とちょっと変えて今度は先頭の画像を span ではなく、ul に対して指定してみた。
一見問題なさそうだし span を使うよりスマートだなぁ、と一瞬思ったのだが、先頭のその部分、0.5ピクセル程度上にズレている。(気にならないと言えば気にならないのだが･･･)
フッターメニュー区切りをボーダーでやってみる編
リストにボーダーを指定して「 | 」を表示。(友人デサイナに教えてもらった方法)
これはこれで使えると思う。でもたまにフォントサイズや line-height やらその他のcss指定なんかの継承を受け継いでるとボーダー位置がテキストとズレる時もあるっぽい。
これもボーダーを右側に指定してあるので一番左のテキストだけ span でくくってみた。
両方に指定しておくってのも手もあるけど、そうすると左右かぶってるところだけボーダーが太くなって一番左と一番右だけ細くなっちゃって微妙。
cssソース
/* *********************************************************
* フッターメニュー区切りを画像でやってみる。
* *********************************************************/
/* サンプル01 */
ul#footermenu li{
display: inline;
background:url(foot_list.gif) no-repeat center right;
padding-left:8px;/* お好みで */
padding-right:7px;/* お好みで */
color:#333;
font-size:80%;
letter-spacing:1px;
}
ul#footermenu li span{
background:url(foot_list.gif) no-repeat center left;
padding-left:7px;
}
/* サンプル02 */
ul#footermenu02 li{
display: inline;
background:url(foot_list02.gif) no-repeat center right;
padding-left:9px;
padding-right:20px;
color:#333;
font-size:80%;
letter-spacing:1px;
}
ul#footermenu02 li span{
background:url(foot_list02.gif) no-repeat center left;
padding-left:21px;
}
/* サンプル03 */
ul#footermenu03 li{
display: inline;
background:url(foot_list03.gif) no-repeat center right;
padding-left:10px;
padding-right:18px;
color:#333;
font-size:80%;
letter-spacing:1px;
}
ul#footermenu03{
background:url(foot_list03.gif) no-repeat center left;
padding-left:8px;
}
/* *********************************************************
* フッター区切りメニューをボーダーでやってみる。
* *********************************************************/
ul#footermenu04 li {
display: inline;
border-right: 1px solid #900;
padding-left:7px;
padding-right:7px;
color:#333;
font-size: 80%;
letter-spacing:1px;
}
ul#footermenu04 li span{
border-left: 1px solid #900;
padding-left:7px;
}
↑別にテキスト色とかサイズとかletter-spacingとか必要ないと思うけど一応入れてみた。その辺はスルーでいいと思う。
xhtmlソース
<p>フッターメニュー区切りを画像でやってみる・サンプル01</p>
<ul id="footermenu"
><li><span>サンプル</span></li
><li>サンプル</li
><li>サンプル</li
><li>サンプル</li
><li>サンプル</li
><li>サンプル</li
></ul>
<ul id="footermenu02"
><li><span>サンプル</span></li
><li>サンプル</li
><li>サンプル</li
><li>サンプル</li
><li>サンプル</li
><li>サンプル</li
></ul>
<ul id="footermenu03"
><li>サンプル</li
><li>サンプル</li
><li>サンプル</li
><li>サンプル</li
><li>サンプル</li
><li>サンプル</li
></ul>
<p>フッターメニュー区切りをボーダーでやってみる。</p>
<ul id="footermenu04"
><li><span>サンプル</span></li
><li>サンプル</li
><li>サンプル</li
><li>サンプル</li
><li>サンプル</li
><li>サンプル</li
></ul>
