些細な日常

サイト作成でhtmlの番号なしリストのulや番号付きリストのolを使ってcssの中寄せ：text-alignのcenterを指定した場合に内側のリストタグのliしか移動せず、ulの中黒やolの数字のマーカーが付いて来なくて左端に残ったまま、ずれてしまうのを修正できる方法はないか。
cssのlist-style-positionのinsideを使う
考えて番号なしリストのulや番号付きリストのolにcssのlist-style-positionのinsideを指定するとリストタグと一緒に中黒や数字のマーカーも位置合わせが可能になると分かった。
同時にcssのtext-alignのcenterを指定しておくと中寄せになるし、または値をrightに変えれば右寄せでもマーカーがリストタグと揃って移動するから大丈夫なんだ。
cssのlist-style-positionのinsideを使うとリストタグのマーカーをリストの内側に埋め込むスタイルになる。番号なしリストのulや番号付きリストのolのデフォルトのデザインの値はoutsideだからマーカーがリストの外側に置かれていて位置合わせを変えても付いて来ないわけだ。
マーカーを中寄せした縦並びリスト
中寄せしてもマーカーが一緒の番号なしリスト
html
<ul class="center-list"> <li>中寄せしても</li> <li>マーカーが一緒の</li> <li>番号なしリスト</li> </ul>
css
.center-list {text-align:center;list-style-position:inside;padding-left:0;}
実用上、位置合わせとマーカーの埋め込みだけではリストの先頭にulやolに特有の余白が残ってバランスが悪いので、cssのpadding-leftの0も指定して消すと良いと思う。
cssのlist-styleでも全く同じに指定できる
list-style要素は他のlist-style-type（マーカーの種類や消去）やlist-style-imageの値と併せて使えるのが便利なんだ。値は一つだけでも構わないし、list-style-position要素を完全に代用できる。
サン…