アメブロスキンをカスタマイズ!CSS編集 -12ページ目

リスト list-style

ul { list-style-type : 種類 ; }


<ul>

<li>文字</li>

<li>文字</li>

<li>文字</li>

</ul>


  • 文字
  • 文字
  • 文字

リストのマークを指定します。

デフォルトで黒丸(disc)。


list-style-type : circle ;

  • 文字
  • 文字
  • 文字


list-style-type : square ;

  • 文字
  • 文字
  • 文字


list-style-type : decimal ;

  • 文字
  • 文字
  • 文字


list-style-type : upper-alpha ;

  • 文字
  • 文字
  • 文字


list-style-type : lower-alpha ;

  • 文字
  • 文字
  • 文字


list-style-type : upper-roman ;

  • 文字
  • 文字
  • 文字


list-style-type : lower-roman ;

  • 文字
  • 文字
  • 文字

list-style-type : none ;
  • 文字
  • 文字
  • 文字


list-style-image : url(画像URL) ;


マークを画像にします。

ネコ ←http://blog.ameba.jp/user_images/65/50/10003253313.png


list-style-image : url(http://blog.ameba.jp/user_images/65/50/10003253313.png) ;

  • 文字
  • 文字
  • 文字


list-style-position : 位置 ;


マークの位置を指定します。


list-style-position : outside ;  /*外側にマークをつける*/

  • 文字文字
    文字文字
  • 文字文字
    文字文字
  • 文字文字
    文字文字

list-style-position : inside ;  /*内側にマークをつける*/

  • 文字文字
    文字文字
  • 文字文字
    文字文字
  • 文字文字
    文字文字

list-style : circle inside ;  /*一括指定*/