[スタイルシートメモ]UL,LIの制御
スタイルシートでUL,LIを制御する方法をメモ
.sample00{
width: 300px;
border:1px dotted #000000;
}
- あいうえお
- あいうえお
- あいうえお
◎アウトサイド
.sample01{
width: 300px;
border:1px dotted #000000;
}
.sample01 li{
list-style: disc outside;
}
.sample01 ul{
margin:0px;
}
- あいうえお
- あいうえお
- あいうえお
◎インサイド
.sample02{
width: 300px;
border:1px dotted #000000;
}
.sample02 li{
list-style: disc inside;
}
.sample02 ul{
margin:0;
}
- あいうえお
- あいうえお
- あいうえお
◎マークを画像にする
.sample03{
width: 300px;
border:1px dotted #000000;
}
.sample03 li{
list-style: none inside;
background:url(/img/034.gif) no-repeat left center;
}
.sample03 ul{
margin:0;
}
- あいうえお
- あいうえお
- あいうえお
◎マークの画像と文字の間隔を調整
.sample04{
width: 300px;
border:1px dotted #000000;
}
.sample04 li{
list-style: none inside;
padding-left:20px;
background:url(/img/034.gif) no-repeat left center;
}
.sample04 ul{
margin:0;
}
- あいうえお
- あいうえお
- あいうえお
◇参考サイト:とほほのWWW入門
http://www.tohoho-web.com/www.htm
◇参考サイト:スタイルシート リストのマークをなくす リストマークを画像でデザイン | テンプレートビー
http://template.b-cures.net/dl/stylecss/index8.html
◇参考サイト:スタイルシート[CSS]/リスト/マーカーを背景画像で表示する – TAG index
http://www.tagindex.com/stylesheet/list/background.html
タグ : スタイルシート