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

ネストされた 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の作業もする。 最近は生成AIの画像生成の沼に沈んでいる。