§02-05…段落番号・箇条書き記号の位置{list-style-position} – オンライン無料パソコン教室

§02-05…段落番号・箇条書き記号の位置{list-style-position}

(01) 現在<ol>内の段落番号が<li>ボックスの外部にセットされています。これを<li>ボックスの内部にセットします。{list-style-position}プロパティの値を「inside」にします。

ol{
background-color:#FFFF99;
padding:1em;
padding-left:3em;
list-style-position:inside;
}

(02) なお、「list-style-position」プロパティに使用できる値は以下の通りです(標準は「outside」)。

意味
outside 記号を<li>ボックスの外部に表示させる
inside 記号を<li>ボックスの内部に表示させる

(03) 次の操作に進む前に、ol・liに関するCSSは削除しておきます。

ol{
}
li{
}

広告ブロックブラウザーではコンテンツが表示できません