list-style-type: circle; リストマーカーの指定
list-style-image: url("xxx.gif"); リストマーカーの画像指定
list-style-position: outside; リストマーカーをbox外へ
list-style-position: inside; リストマーカーをbox内へ
marker-offset: 1em; リストマーカーとの間隔
list-style: url("xxx.gif") circle outside; リストマーカーショートカット
background: #cccccc url(image/xxx.gif) left center no-repeat; 背景画像ショートカット
[ ul,li(css) 記述例 サンプル ]
ul#type1{
list-style-image: url("xxx.gif");
}
#type1 li{
margin: 0px;
padding: 0px;
}
[ ul,li(xhtml) 記述例 サンプル ]
<ul id="type1">
<li>xxx</li><li>xxx</li>
</ul>
[ メニュー(ul,li) menu_yoko(css) - 記述例 サンプル ]
[ メニュー(ul,li) menu_tate_a(css) - 記述例 サンプル ]
[ メニュー(ul,li) menu_tate(css) - 記述例 サンプル ]
[ メニュー(ul,li) (xhtml) 共通記述例 サンプル ]
- [ ul,li memo ]
- marker-offsetの記述方法はdisplayを参照してください。
- メニューを中央寄せにする場合は下記の CSS を参考にしてください。
- #menu{
- margin-right: 0px;
- margin-left: 120px;
- padding: 0px 0px 5px 0px;
- ※120pxの部分はバランスによって変更します。
- ul=番号のないリスト
- li=リスト項目
- background-color: transparentを使っていますが推奨されていないcss(スタイルシート)なのでご注意ください。
- また、overflow: hiddenはアクセシビリティ上では、あまりよくありません。
- * マーカーの種類
- circle (白丸)、disc (黒丸)、square (黒四角)、decimal (1,2,3)、decimal-leading-zero (01,02,03)
- lower-roman (ローマ数字小文字)、upper-roman (ローマ数字小文字)、lower-alpha (a,b,c)、upper-alpha (A,B,C)
- hiragana (あいうえお)、katakana (アイウエオ)、hiragana-iroha (いろは)、katakana-iroha (イロハ)
- hebrew (ヘブライ数字)、armenian (アルメニア数字)、georgian (グルジア数字)、none (なし)
- メニュー(ul,li)実例のcss、xhtmlは上記を参照してください。
css + xhtml + seo は新着情報をRSS(フィード)で配信しています。
ご希望の方は下記のアイコンからご利用ください。
- Google
-
- [ 動作環境 ]
- * Win XP
- * Win 2000
- * Linux
- * IE 6.0
- * (IE 7.0)
- * Firefox 1.5
- * Sleipnir 2.3
- * Opera 9.1
- [ Tie-up ]
- web design...
- アイコン・ボタン・背景等の Web 素材サイト
- フリー写真画像素材...
- ホームページ( Web )作成の為のフリー写真・画像素材サイト
- [ RSS + ]
