リストタグを使ったメニューサンプル

リストタグを使ったメニューサンプルです。　 CSSで、ボーダーと背景色による装飾、背景に画像使用して装飾、テキストを 画像 に置換、リストアイテムを横に並べる等をロールオーバーで変化させたサンプル があります。

Mac ie5、Win ie6、 opera7、 nn7、 firefox1で検証してます。　スタイルシートはブラウザによって解釈がま ちま ちですが、以上のブラウザでは同じように表示されます。（注：表示されないも のに は注意書きがあります。）

なんでリストタグかっていうと、携帯やテキストブラウザ等のスタイルシート 未 対応のブラウザからでも、文章構造を理解して表示してくれるからです。（注：nn4 等のスタイルシートの対応が中途半端なブラウザはスタイルシートを外すように 指定する事をお勧めします。）

このファイルはHTML 4.01 Transitionalでloose.dtdを指定しています。loose.dtdを指定していないバージョンはこちらにあります。 なお、loose.dtdについてはこちらをご覧下さい。

このページを作った動機。最近スタイルシートを使った「タグ」等を「配布」 しているサイトを良く見かけますが、Win＋ie以外ではレイアウトが崩れて見れない物が、やたらと多い。　（しかもテーブルでレイアウト＋CSSで装飾しながら） Win＋ieでしか閲覧できないサイトを作るのは当人の勝手ですが、Win＋ieでしか表示されない「タグ」や「テンプレート」を「配布」するなん てこれはもう公害です。　ということで、このページは公害対策用に作成しました。

スタイルシートをはずした状態

sample A

<div id="ここに任意のID名">
<ul>
<li><a href="#">MENU 1</a></li>
<li><a href="#">MENU 2</a></li>
<li><a href="#">MENU 3</a></li>
<li><a href="#">MENU 4</a></li>
<li><a href="#">MENU 5</a></li>
</ul>
</div>

画像無しスタイルシートで装飾したサンプル

下記のサンプルはスタイルシートをはずした状態だと全て上の【sample A】よ う に表示されます。テキストブラウザ、携帯電話やスタイルシートに対応していな いブ ラウザでも箇条書きで表示されます。

フォントサイズとボックスは相対値で指定しているので、フォントサイ ズ をブラウザで大きくしてもレイアウトが崩れません。（下ボーダーがテキストに 被る 等）

といいますか、フォントを絶対値で指定するとユーザーがフォントサ イ ズを変えられないのって、Win ieくらいだけなんです。

アレンジの際の注意。リストアイテムを使った場合ブラウザによってインデントの幅が異なるので、リストアイテムはインライン要素にしてマーク、パディング、マージンは消してあります。　サンプルによってはULをインラインにしています。　「ul」「li」のdisplay,margin,paddingの値は変えるとブラウザによってはレイアウトが崩れます。

sample B

ボーダーと背景色

sample C

ボーダースタイル「dotted」太さを「2px」

sample D

ボーダースタイル「double」太さを「4px」

sample E

左ボーダーのみ幅を太く、上下のマージンを消してつなげ、上下のパディングを広めにする。

sample F

左、上を薄く、右、下を濃くして立体感を出す。（hoverでは逆）

sample G

左、上を薄く、右、下を濃くして立体感を出す。（hoverでは逆）
inset、outset使用バージョン

sample H

左右のボーダーの幅を太く

背景色、上下左右のボーダーの色やスタイルや幅を変えて、色々アレンジしてみてください。

画像とスタイルシート修飾

sample J

背景に画像を置く

このサンプルではテキストの左に画像を置いています。　「それならリストマークを画像にすればいいのでは」と思うかもしれませんが、リストマークを画像にすると、ネスケだとマーク（画像）とテキストの間に・文字分程の空白ができて右にズレます。　その空白をネスケに合わせて潰すとIE他のブラウザでは、左にズレたりします。文中ならさほど気になりませんが、ナビゲーションのようにあまり幅を取りたくない場合には、不向きです。

そんなわけで、リスト−マークを消してリストアイテムのマージンとパディングもつぶして、アンカーをブロックにして背景を置きました。　この方法だと前述のブラウザのデフォルト設定なら同じように表示されます。

もちろん背景全体に画像を置いてもOKです。

sample K

全体に背景を置き、アンカーの背景に透過gifを使い背景を透かせる。

アレンジの際の注意：ロールオーバーでボーダーの色を変更するときは、上下のマージンを、同じ値にしてください。（【例】margin : 6px 0px 6px 0px;）Win ie6 では上下のマージンの値が異なるとロールオーバー時にマージンが無視されボックスが動きます。loose.dtdを指定していなければ、このバグは起きません。ボーダーの色を変更しないときも起きません。

テキストを画像に置き換える

テキストを画像に置き換えるにはテキストを「display:none;」で非表示にし 、親 要素（ブロック）の背景に任意の画像を指定します。

sample L

テキストを画像に置換える

アンカーごとに異なる画像を使用するので、HTMLもアレンジしてありますが、 こ の場合でも、スタイルシートをはずすと、【sample A】　のように表示されます 。

HTMLソース
<div id="ID">
<ul>
<li id="menu_a_1"><a href="#"><span class="span1">MENU
1</span></a></li>
<li id="menu_a_2"><a href="#"><span class="span1">MENU
2</span></a></li>
<li id="menu_a_3"><a href="#"><span class="span1">MENU
3</span></a></li>
<li id="menu_a_4"><a href="#"><span class="span1">MENU
4</span></a></li>
</ul>
</div>

リストアイテムを横並びにする

リストアイテムを横並びにするには、「li」に「float:left;」入れます。 こ の場合でも、スタイルシートをはずすと、【sample A】　のように表示されます 。

sample M

横並び　ボーダーと背景色

sample N

横並び　ボーダーを点線にする

sample O

テキストを画像に置き換え横並びする

基本は【Sample L】と同じで、そのまま横並びにしています。

sample X

1文字めを装飾。擬似要素を使用している為、HTMLも少しアレンジしてあります。

Win ieではロールオーバー時に変化しません。といいますか、Win ieでは致命的なバグがあるので要注意です。Win ieのバグがなければHTMLのアレンジも必要ないです。この擬似要素ってcss1からあるのに何故未だにサポートしていないんだろうか、まあ大した要素ではないから大勢に影響ないけど。position:fixedもWin ieでは使えないし（略）

一部のブラウザでは下のボーダ−がテキストに被りますが、面白い効果になっているので、敢てそのままにしてあります。

HTMLソース
 <div id="b_f_letter" >
 <ul >
 <li > <a href="#" class="fl" >MENU 1 </a > </li >
 <li > <a href="#" class="fl" >MENU 2 </a > </li >
 <li > <a href="#" class="fl" >MENU 3 </a > </li >
 <li > <a href="#" class="fl" >MENU 4 </a > </li >
 <li > <a href="#" class="fl" >MENU 5 </a > </li >
 </ul >
 </div >