リストタグを使ったメニューサンプル
リストタグを使ったメニューサンプルです。 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
スタイルシートを当てはめないデフォルトのリストタグです。それぞれの項目の頭にダーツが表示されます。ダーツ、インデント幅はブラウザによって微妙に違います。このサンプルには特にスタイルを指定していませんが、フォントサイズ、マージン等はページに指定したものを継承している為、一部修正しています。
共通HTMLソース
<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
ボーダーと背景色
CSSソース
#ID ul {
margin: 0;
padding :0;
list-style-type : none;
}
#ID li {
display : inline;
padding :0;
margin:0;
}
#ID a {display:block;
border:1px solid #aac;
background-color:#dde;
font-size:x-small;
padding:0.1em 0 0.1em 0.7em;
text-decoration:none;
color:#557;
width:8em;
margin:1px 0px;
height:1.5em;
}
#ID a:hover {
display:block;
border:1px solid #aca;
background-color:#ded;
font-size:x-small;
padding:0.1em 0 0.1em 0.7em;
text-decoration:none;
color:#575;
height:1.5em;
}
sample C
ボーダースタイル「dotted」太さを「2px」
CSSソース
#ID ul {
margin: 0;
padding :0;
list-style-type : none;
}
#ID li {
display : inline;
padding :0; margin:0;
}
#ID a {
display:block;
border:2px dotted #aac;
background-color:#dde;
font-size:x-small;
padding:0.1em 0 0.1em 0.5em;
text-decoration:none;
color:#557;width:8em;
margin:4px
0px;height:1.5em;
}
#ID a:hover {
display:block;
border:2px dotted #aca;
background-color:#ded;
font-size:x-small;
padding:0.1em 0 0.1em 0.5em;
text-decoration:none;
color:#575;
width:8em;
margin:4px
0px;height:1.5em;
}
sample D
ボーダースタイル「double」太さを「3px」
CSSソース
#ID ul {
margin: 0;
padding :0;
list-style-type : none;
}
#ID li {
display : inline;
padding :0;
margin:0;
}
#IDa {
display:block;
border:3px double #aac;
background-color:#dde;
font-size:x-small;
padding:0.1em 0 0.1em 0.5em;
text-decoration:none;
color:#557;
width:8em;
margin:2px 0px;
height:1.7em;
}
#ID a:hover{
display:block;
border:3px double #aac;
background-color:#e5e5f5;
font-size:x-small;
padding:0.1em 0 0.1em 0.5em;
text-decoration:none;
color:#557;
width:8em;
margin:2px 0px;
height:1.7em;
}
sample E
左ボーダーのみ幅を太く、上下のマージンを消してつなげ、上下のパディングを広めにする。
CSSソース
#ID ul {
margin: 0;
padding :0;
list-style-type : none;
}
#ID li {
display : inline;
padding :0;
margin:0;
}
#ID a {
height:1.7em;
display:block;
border-left:10px solid #88c;
background-color:#fff;
font-size:x-small;
padding:0.1em 0 0.1em 0.5em;
text-decoration:none;
color:#557;width:8em;
margin:0px 0px;
}
#ID a:hover {
display:block;
border-left:10px solid #ddf;
background-color:#fff;
font-size:x-small;
padding:0.1em 0 0.1em 0.5em;
text-decoration:none;
color:#575;
width:8em;
margin:0px 0px;
height:1.7em;
}
sample F
左、上を薄く、右、下を濃くして立体感を出す。（hoverでは逆）
CSSソース
#ID ul {
margin: 0;
padding :0;
list-style-type : none;
}
#ID li {
display : inline;
padding :0;
margin:0;
}
#ID a:hover {
height:1.7em;
display:block;
border-left:2px solid #99b;
border-top:2px solid #99b;
border-right:2px solid #bbd;
border-bottom:2px solid #bbd;
background-color:#dde;
font-size:x-small;
padding:0.1em 0 0.1em 0.5em;
text-decoration:none;
color:#557;width:8em;
margin:2px 0px;
}
#ID a {
display:block;
border-left:2px solid #bbd;
border-top:2px solid #bbd;
border-right:2px solid #99b;
border-bottom:2px solid #99b;
background-color:#d5d5e5;
font-size:x-small;
padding:0.1em 0 0.1em 0.5em;
text-decoration:none;
color:#557;
width:8em;
margin:2px 0px;height:1.7em;
}
sample G
左、上を薄く、右、下を濃くして立体感を出す。（hoverでは逆）
inset、outset使用バージョン
CSSソース
#ID ul {
margin: 0;
padding :0;
list-style-type : none;
}
#ID li {
display : inline;
padding :0;
margin:0;
}
#ID a {
height:2em;
display:block;
border:4px outset #aaa;
background-color:#d7d7d7;
font-size:x-small;
padding:0.1em 0 0.1em 0;
text-decoration:none;
color:#556;width:8em;
margin:2px 0px;
text-align:center;
}
#ID a:hover {
display:block;
border:4px inset #aaa;
background-color:#d7d7d7;
font-size:x-small;
padding:0.1em 0 0.1em 0;
text-decoration:none;
color:#556;
width:8em;
margin:2px 0px;
height:2em;
text-align:center;
}
sample H
左右のボーダーの幅を太く
CSSソース
#ID ul {
margin: 0;
padding :0;
list-style-type : none;
}
#ID li {
display : inline;
padding :0; margin:0;
}
#ID a {
display:block;
border-right:7px solid #aac;
border-top:1px solid #aac;
border-bottom:1px solid #aac;
border-left:7px solid #aac;
background-color:#fff;
font-size:x-small;
padding:0.1em 0 0.1em 0;
text-decoration:none;
color:#557;
width:8em;
height:15px;
margin:2px 0px;
text-align:center;
height:1.5em;
height:1.5em;
}
#ID a:hover {
display:block;
border-right:7px solid #aca;
border-top:1px solid #aca;
border-bottom:1px solid #aca;
border-left:7px solid #aca;
background-color:#fff;
font-size:x-small;
padding:0.1em 0 0.1em 0;
text-decoration:none;
color:#575;
text-align:center;
width:8em;margin:2px 0px;
height:1.5em;
}
背景色、上下左右のボーダーの色やスタイルや幅を変えて、色々アレンジしてみてください。
画像とスタイルシート修飾
sample J
背景に画像を置く
このサンプルではテキストの左に画像を置いています。 「それならリストマークを画像にすればいいのでは」と思うかもしれませんが、リストマークを画像にすると、ネスケだとマーク（画像）とテキストの間に・文字分程の空白ができて右にズレます。 その空白をネスケに合わせて潰すとIE他のブラウザでは、左にズレたりします。文中ならさほど気になりませんが、ナビゲーションのようにあまり幅を取りたくない場合には、不向きです。
そんなわけで、リスト−マークを消してリストアイテムのマージンとパディングもつぶして、アンカーをブロックにして背景を置きました。 この方法だと前述のブラウザのデフォルト設定なら同じように表示されます。
もちろん背景全体に画像を置いてもOKです。
CSSソース
#ID ul {
margin: 0;
padding :0;
list-style-type : none;
}
#ID li {
padding :0;
margin:0;
}
#ID a {
background-image:url(xxx.gif);
text-decoration:none;
background-repeat:no-repeat;
padding-left:15px;
font-size:x-small;
color:#557;
width:8em;
margin:1px 0px;
height:1.5em;
}
#ID a:hover {
background-image:url(xxx.gif);
text-decoration:none;
background-repeat:no-repeat;
font-size:x-small;
color:#557;
width:120px;
margin:1px 0px;
padding-left:15px;
height:1.5em;
}
sample K
全体に背景を置き、アンカーの背景に透過gifを使い背景を透かせる。
opera7
ではボーダーが表示されず、ロールオーバーしても変化しません。 配置は変わらずレイアウトが崩れるなどの致命的はバグはありません。loose.dtdを指定するとこのバグは起きません。それ以外のブラウザでは同じように表示されます。
CSSソース
#ID {
border:1px solid #cdb;
width:131px;
height:9.5em;
padding:5px 0px 0px 0px;
background:url(xxx.gif)
repeat-x #fff 0% 100%;
}
#ID a:hover {
width:130px;
font-size:x-small;
color:#9ba;
display:block;
font-weight:nomal;
text-decoration:none;
border-top:1px solid #ab9;
border-right:1px solid #cdb;
border-bottom:1px solid #cdb;
border-left:1px solid #ab9;
margin:0px 0px 6px 0px;
text-align:center;
padding:3px 0px;
background-image :url(xxx.gif);
background-color:transparent;
}
#ID a {
width:130px;
font-size:x-small;
color:#675;
display: block;
font-weight:nomal;
text-decoration:none;
border-top:1px solid #cdb;
border-right:1px solid #ab9;
border-bottom:1px solid #ab9;
border-left:1px solid #cdb;
margin:0px 0px 6px 0px;
text-align:center;
padding:3px 0px;
background-image:url(xxx.gif);
background-color :transparent;
}
#ID ul {
margin:0px;
padding:0px;
list-style-type :none;
width:130px;
display:inline;
}
#ID li {
display:inline;
padding:0px;
margin:0;
width:130px;
}
テキストを画像に置き換える
テキストを画像に置き換えるにはテキストを「display:none;」で非表示にし 、親 要素（ブロック）の背景に任意の画像を指定します。
sample L
テキストを画像に置換える
アンカーごとに異なる画像を使用するので、HTMLもアレンジしてありますが、 こ の場合でも、スタイルシートをはずすと、【sample A】 のように表示されます 。
HTML と CSSソース
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>
CSSソース
#ID ul {
margin: 0;
padding :0;
list-style-type : none;
}
#ID li {
display : inline;
padding :0;
margin:3px 0;
}
#ID #menu_a_1 a {
background-image:url(xxx.gif);
width:47px;
height:24px;
background-repeat:no-repeat;
margin:3px 0;
padding:0;
background-color:#fff;
display:block;
}
#ID #menu_a_1 a:hover {
background-image:url(xxx.gif);
width:47px;
height:24px;
background-repeat:no-repeat;
margin:3px 0;
padding:0;
display:block;
}
#ID #menu_a_2 a{
background-image:url(xxx.gif);
width:47px;
height:24px;
background-repeat:no-repeat;
margin:3px 0;
padding:0;
background-color:#fff;
display:block;
}
#ID #menu_a_2 a:hover {
background-image:url(xxx.gif);
width:47px;
height:24px;
background-repeat:no-repeat;
margin:3px 0;
padding:0;
display:block;
}
#ID #menu_a_3 a{
background-image:url(xxx.gif);
width:47px;
height:24px;
background-repeat:no-repeat;
margin:3px 0;
padding:0;
background-color:#fff;
display:block;
}
#ID #menu_a_3 a:hover {
background-image:url(xxx.gif);
width:47px;
height:24px;
background-repeat:no-repeat;
margin:3px 0;
padding:0;
display:block;
}
#ID #menu_a_4 a{
background-image:url(xxx.gif);
width:47px; height:24px;
background-repeat:no-repeat;
margin:3px 0;
padding:0;
background-color:#fff;
display:block;
}
#ID #menu_a_4 a:hover {
background-image:url(xxx.gif);
width:47px;
height:24px;
background-repeat:no-repeat;
margin:3px 0;
padding:0;
display:block;
}
.span1 {display:none;}
リストアイテムを横並びにする
リストアイテムを横並びにするには、「li」に「float:left;」入れます。 こ の場合でも、スタイルシートをはずすと、【sample A】 のように表示されます 。
sample M
横並び ボーダーと背景色
HTML と CSSソース
#ID {
width:50em;
height:3em;
margin: 0;
padding :0;
}
#ID ul {
margin: 0;
padding :0;
list-style-type : none;
}
#ID li {
display : inline;
padding :0;
margin:0;
float:left
}
#ID a {
display:block;
border-bottom:1px solid #aac;
border-top:1px solid #aac;
border-left:1px solid #aac;
background-color:#dde;
font-size:x-small;
padding:1px 0px 1px 0px;
text-decoration:none;
color:#557;
width:7em;
height:1.5em;
margin:1px 0px;
text-align:center;
}
#ID a:hover {
display:block;
border-top:1px solid #aca;
border-bottom:1px solid #aca;
border-left:1px solid #aca;
background-color: #ded;
font-size:x-small;
padding:1px 0px 1px 0px;
text-decoration:none;
color:#575;
height:1.5em;
text-align:center;
}
#ID #menu_left a {
display:block;
border:1px solid #aac;
background-color:#dde;
font-size:x-small;
padding:1px 0px 1px 0px;
text-decoration:none;
color:#557;
width:7em;
height:1.5em;
margin:1px 0px;
text-align:center;
}
#ID #menu_left a:hover {
background-color:#ded;
display:block;
border1px solid #aca;
background-color:#ded;
font-size:x-small;
padding:1px 0px;
text-decoration:none;
color:#575;height:1.5em;
text-align:center;
}
sample N
横並び ボーダーを点線にする
CSSソース
#ID {
width:50em;
height:3em;
margin: 0;
padding :0;
white-space:nowrap;
}
#ID ul {
margin: 0;
padding :0;
list-style-type : none;
}
#ID li {
display : inline;
padding :0;
margin:0;
float:left ;
}
#ID a {
display:block;
border:2px dotted #aac;
background-color:#dde;
font-size:x-small;
padding:1px 0px 1px 0px;
text-decoration:none;
color:#557;width:7em;
height:1.5em;
margin:0px 5px;
text-align:center;
}
#ID a:hover {
display:block;
border:2px dotted #aca;
background-color:#ded;
font-size:x-small;
padding:1px 0px 1px 0px;
text-decoration:none;
color:#575;
height:1.5em;
text-align:center;
}
sample O
テキストを画像に置き換え横並びする
基本は【Sample L】と同じで、そのまま横並びにしています。
HTML と CSSソース
/* ◆画像横並び◆ */
HTMLはsample Lと同じです。
#ID {
width:500px;
height:38px;
margin: 0;
padding :0;
}
#ID ul {
margin: 0;
padding :0;
list-style-type : none;
}
#ID li {
display : inline;
padding :0;
margin:0 3px;
float:left;
}
#ID #menu_a_1 a {
background-image:url(xxx.gif);
width:50px;
height:38px;
background-repeat:no-repeat;
margin:0;
padding:0;
background-color:#fff;
display:block;
}
#ID #menu_a_1 a:hover {
background-color:#fff;
background-image:url(xxx.gif);
width:50px;
height:38px;
background-repeat:no-repeat;
margin:0;
padding:0;
display:block;
}
#ID #menu_a_2 a {
background-image:url(xxx.gif);
width:50px;
height:38px;
background-repeat:no-repeat;
margin:0; padding:0;
background-color:#fff;
display:block;
}
#ID #menu_a_2 a:hover {
background-color:#fff;
background-image:url(xxx.gif);
width:50px;
height:38px;
background-repeat:no-repeat;
margin:0;
padding:0;
display:block;
}
#ID #menu_a_3 a {
background-image:url(xxx.gif);
width:50px;
height:38px;
background-repeat:no-repeat;
margin:0;
padding:0;
background-color:#fff;
display:block;
}
#ID #menu_a_3 a:hover {
background-color:#fff;
background-image:url(xxx.gif);
width:50px; height:38px;
background-repeat:no-repeat;
margin:0;
padding:0;
display:block;
}
#ID #menu_a_4 a {
background-image:url(xxx.gif);
width:50px; height:38px;
background-repeat:no-repeat;
margin:0;
padding:0;
background-color:#fff;
display:block;
}
#ID #menu_a_4 a:hover {
background-color:#fff;
background-image:url(xxx.gif);
width:50px;
height:38px;
background-repeat:no-repeat;
margin:0;
padding:0;
display:block;
}
.span1 {display:none;}
