目次

<ol> <ul> <lt> タグのリスト要素のインデント幅をネストレベルごとに変更する - CSS

ネストされた ol ul li リストのインデント幅をそれぞれ変更する場合のCSS記述方法です。

概要

ULタグ内に記述されたULタグのインデントを変更する場合には、以下の記述によりスタイルを定義できます。
 UL UL{
同様にULタグ内のULタグ内のULタグのスタイルを定義する場合は以下の記述でスタイルを定義できます。
 UL UL UL{

CSS例

ulタグとolタグのスタイルシートの記述例です。 最初のレベルは64pixelインデントします。それ以降のレベルは24pixelのインデント幅になります。
ul{
  margin:0px 0px 0px 0px;
  padding:0px 0px 0px 64px;
}
ul ul{
  margin:0px 0px 0px 0px;
  padding:0px 0px 0px 24px;
}
ul ul ul{
  margin:0px 0px 0px 0px;
  padding:0px 0px 0px 24px;
}

ol{
  margin:0px 0px 0px 0px;
  padding:0px 0px 0px 64px;
}
ol ol{
  margin:0px 0px 0px 0px;
  padding:0px 0px 0px 24px;
}
ol ol ol{
  margin:0px 0px 0px 0px;
  padding:0px 0px 0px 24px;
}
/* margin: (top) (right) (bottom) (left)*/
/* padding: (top) (right) (bottom) (left)*/

著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
掲載日: 2011-02-04
iPentec all rights reserverd.