[スタイルシートメモ]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

タグ :