CSS: リスト

左余白 margin-left, padding-left

最初の状態ではリストの記号や番号は左余白に表示されます。margin-leftとpadding-leftを足した部分に表示されます。余白部分が無いと記号や番号が表示されないことがあります。

下記のコードを追記してください。

css Zen Garden（日本語版）サンプルファイル style.css

#linkList ul { margin-left:25px; }

リスト記号 list-style-type

リストの記号を指定します。ul、liのどちらに設定しても構いません。

下記のコードを追記してください。

css Zen Garden（日本語版）サンプルファイル style.css

#linkList #lselect ul { list-style-type:square; }
#linkList #larchives ul { list-style-type:lower-alpha; }
#linkList #lresources ul { list-style-type:decimal; }

ul、liのいずれでも番号や記号がつけられます。ul、liのどちらを使うかは、文書構造としてリストに順序性があるかどうかで選びます。それに対し、見た目を番号にしたいのか、記号にしたいのかをCSSで設定するということになります。

順序性があるものでも記号で表示したかったり、順序性がないものでも番号で区別するために番号を使うこともあるのです。文書の持つ構造的意味合いをつけるのがHTML、見た目を制御するのがCSSという考え方を意識しましょう。

記号と文章の間隔 padding-left

記号と文章の間の間隔は、liのpadding-leftによって調整します。

css Zen Garden（日本語版）サンプルファイル style.css

#linkList ul li { padding-left:0.4em; }

項目の間隔 margin-bottom

各項目の間隔はliのmargin-bottomによって調整します。

css Zen Garden（日本語版）サンプルファイル style.css

#linkList ul li { margin-bottom:0.5em; }

記号の位置 list-style-position

list-style-positionで記号を文章内にすることもできます。 ul、liのどちらに設定しても構いません。

css Zen Garden（日本語版）サンプルファイル style.css

#linkList ul li { list-style-position:inside; }

記号を文書内に設定した場合には、記号と文章の間隔は調整できません。

記号を文書内に設定するメリットは何でしょうか？

これは背景と関係があります。最初の状態では、リストの記号は余白部分に書かれます。したがって、項目に背景色をつけたり、枠で囲ったりすると点が含まれないということになります。

課題

cssZenGardenJpn.htmのリストに独自のスタイルをつけよ。フォントなども変更してみると良い。