CSSのリストを変更することができます HTMLの箇条書きのことに置き換えられるようにグラフィック画像を使用し これらの画像の配置の間に不整合が最近のほとんどのブラウザです
Step 1 - Make a basic list
ul { list-style-type: none; }
{
background-image: url(bullet_htm.gif);
background-repeat: no-repeat;
background-position: 0 50%;
padding: 3px 0 3px 20px;
margin: .4em 0;
}
メニュー(リスト)の画像をカーソルオン時にロールオーバーする css
簡単に説明すると、CSSでa要素に背景を指定して、a:hoverにロールオーバー用の画像を指定して上げます。 a {
li {
list-style-type:none;
}
a {
text-decoration:none;
}
li {
border-bottom:1px dashed #CCC;
}
ま IEだと、文字サイズや文字量で何故か高さが自動で伸びてくれるという素敵なバグ（？）があるので、良いのですが、Firefoxなどじゃ伸びないってのもあります。 別の方法として、IE以外に、
スタイルシートの使い方の中の、メニューボタンの作り方 です。^^
代表的なブラウザでは、リスト項目の先頭に黒丸などの記号を付加して、縦向きに項目を配置します。この「リスト」をスタイルシートで装飾することで、「横向き」に配置します。 とりあえず、以下のようにスタイルシートを書けば、最低限の横向きデザインにできます。
HTML CODE
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">新着情報</a></li>
<li><a href="#">会社概要</a></li>
<li><a href="#">製品案内</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
上記のスタイルシートで、とりあえず各項目は横向きに配置されます。項目同士が詰まって表示されないよう、余白も設けられます。項目の範囲が分かりやすいように、枠線も付加しています。 で、「メニュー」は当然「リンク」でもあるので、リンクに対する装飾も欲しいところです。そこで、以下のスタイルを加えます。
メニュー項目には枠線を付加してあるので、リンクを示す下線は消しています。（text-decorationプロパティ） まあ、付けておく方が分かりやすくて良いかも知れませんが。 displayプロパティに値「block」を指定することで、リンク自体をブロック化（ブロックレベル要素化）しています。これで、リンク項目内の全体に背景色を塗ったり、項目内の全体をクリック可能にすることができます。 hover疑似クラスを使って、メニュー項目（リンク）の上にマウスポインタを載せたときに、項目全体の背景色と文字色が変化するようになっています。 これらのスタイルシートを使って先ほどのHTMLを表示させると、以下のように見えます。（項目の上にマウスポインタを載せると、項目の色が変化します。）
スタイルシートが有効な環境であれば、横向きメニューバーのように配置されているはずです。スタイルシートが無効な環境だと、通常のリスト項目として表示されるでしょう。 なお、この「メニューバー」の直後に記述するブロックには、回り込みを解除するためのclearプロパティの記述が必要です。以下のように書いておくと良いでしょう。（aftermenuクラスを付加したp要素の場合）
p.aftermenu {
clear: left;
}
「バー」のように見せるには、ul要素全体に背景色を加えたり枠線を加えたりする必要があるかもしれません。
ul要素に含まれるli要素は、全部floatプロパティで浮かせているので、
ul要素自体の装飾にはちょっと工夫が必要です。
一枚画像でリストメニューを作ります。素材画像は100×90pxです。3色に分かれているのは、通常のリンク時に表示する画像・マウスオーバー時の画像・該当するページが開いている時（hit中）に表示する画像に変えるためです。1ボックスは100×30PXになっています。
CSS記述
background: url(images/list2.gif) no-repeat 0px -30px;
}
ul#sidelist li.hit a{
color: #FFFFFF;
background: url(images/list2.gif) no-repeat 0px -60px;
}
dtをfloatし，margin, padding, borderなどをあてる場合の注意点です。
<dl class="recent"> <dt>2008-05-12</dt> <dd>ページ5を更新しました。テキストテキストテキスト。</dd> <dt>2008-05-10</dt> <dd>ページ4を更新しました。テキストテキストテキスト。</dd> <dt>2008-05-07</dt> <dd>ページ3を更新しました。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。</dd> <dt>2008-05-06</dt> <dd>ページ2を更新しました。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。</dd> <dt>2008-05-04</dt> <dd>ページ1を更新しました。テキストテキストテキスト。</dd> </dl>
基本形
dl.recent dt {
clear: left;
float: left;
width: 7em;
}
dl.recent dd {
margin-left: 7em;
}
* 表示フォントサイズを変更しても折り返さないように，dt の width は em で。
* 同様に dd の margin も em で。
* 基本的に横方向の margin, padding, width を em で指定しておくとよい。
縦方向の間隔をとる
dl.recent dt {
clear: left;
float: left;
width: 7em;
}
dl.recent dd {
margin-left: 7em;
margin-bottom: 10px;
}
dd に margin-bottom を。dt に margin-bottom をあてるとずれる。（IE以外）
dl.recent dt {
clear: left;
float: left;
width: 7em;
margin-bottom: 10px;
}
dl.recent dd {
margin-left: 7em;
}
基本的に，縦方向の margin, padding, height の総計が，dd のほうが（dt よりも）高くなるように。
この場合は zoom: 1; で解決するが，他の支障が出ることもあるので注意。
dl.recent dt {
clear: left;
float: left;
width: 7em;
}
dl.recent dd {
margin-left: 7em;
margin-bottom: 10px;
zoom: 1;
dl.recent dt {
clear: left;
float: left;
width: 7em;
padding: 2px 0.5em;
border-left: solid 0.5em #CCC;
border-top: solid 1px #CCC;
}
dl.recent dd {
margin-left: 8.5em;
margin-bottom: 10px;
padding: 3px 0;
}
* border-width も左右は em で。
* dtのwidth + dtの左右のpadding + dtの左右のborder-width = ddの左のmargin
* dd の左の余白を margin ではなく padding にすることによって，左隅から border が引かれる。
* この場合 dd に zoom: 1; をあてると，dd がさらに 8em（borderも含めて）右に寄ってしまうので注意。
dl.recent dt {
clear: left;
float: left;
width: 7em;
padding: 10px 0.5em;
}
dl.recent dd {
margin-left: 0;
padding: 10px 0.5em 10px 8em;
border-bottom: solid 1px #CCC;
}
CSS - dtをfloatする場合の注意点
dtをfloatする場合の注意点