HTMLのリストタグの並び方をデザインするCSSのコーディング

サイトでリストを表示するにはulタグ（順序なしリスト）、またはolタグ（順序ありリスト）にliタグを追加して行く。追加されたliタグのところがリストになってサイトに表示されることになる。初期設定だと上下と左側に間隔が取られてリストの頭にulタグならば中黒（・）が、olタグならば番号（1.）が付けられて縦並びで空行なしにデザインされている。

リストの四つの主なデザイン
リストの左側の間隔を消す
リストのマーカーを消す
縦並びのリストを広げる
リストを横並びにする
リストの位置を揃える
全体的なリストの幅の調整
部分的なリストの幅の調整
リストの折り返しを調節する
文字間で改行させる場合
項目毎に改行させる場合
IEのヴァージョン７以前への対応

リストの四つの主なデザイン HTMLのリストデザインを示す開発者

リストの左側の間隔を消す

項目①

項目②

項目③

ul {padding-left:0;margin-left:1em;}

画面に左寄せで表示するにはulタグ、またはolタグに{padding-left:0;}を指定すれば良い。リストで左側に間隔が取られるのはタグの外側のmarginではなくて内側のpaddingに間隔が取られるせいだ。ただしリストのマーカーも欠けて来てしまうので、十分に出しておきたければCSSのpadding要素のleftで1em（一字分程度）以上の間隔を取るべきかも知れない。リストのマーカーを消す

項目①

項目②

項目③

ul {padding-left:0;list-style:none;}

リストを左合わせで表示するには左寄せのulタグ、またはolタグにCSSで{list-style:none;}を指定すれば良い。CSSのlist-style要素にtype（マーカーの種類）の指定を付け加えてlist-style-type要素の場合でも「none」を使って{list-style-type:none;}になる。その他、list-style要素にはimage（マーカーの画像）やposition（マーカーの位置）の指定もあるので、幾つかを同時にコーディングするならばtypeを付け加えておくと切り離してデザインできる。只単に{list-style:none;}だとlist-style-type要素とlist-style-image要素とlist-style-position要素で共通してマーカーが消える。縦並びのリストを広げる

項目①

項目②

項目③

li {margin:1em 0;}

リストのliタグに1emの空行を挟むならばCSSで{margin:1em 0;}を指定すれば良いだろう。上下のリストで間隔が重なっても打ち消されて求め通りに合わさるから大丈夫なんだ。CSSのmargin要素の種類や値を変えれば個々のリストに様々に間隔を取ることができる。リストを横並びにする

項目①

項目②

項目③

ul {padding-left:0;}
li {display:inline;}

リストのliタグにCSSで{display:inline;}を指定すれば良い。HTMLのインライン要素として扱われるので、元々のブロック要素のように個々のリストがサイトに一行では表示されず、纏めて一行に収まるようになる。リストのマーカーが消えて隙間だけが残るので、消したければliタグの親要素のulタグかolタグにpadding-left:0;も指定する。display要素のinlineを使うとliタグの上下にmarginやpaddingを付けても縦並びのように広がらないので、注意しておきたい。リストの位置を揃える HTMLのリストの位置を揃えるデザインのCSSコードを映した画面と計算器や物差しのある机

HTMLのリストの位置を揃えるデザインのCSSコードを映した画面と計算器や物差しのある机

全体的なリストの幅の調整

項目①

項目②

項目③

ul {padding-left:0;width:100%;}
li {display:inline;}

リストが縦並びでもあり得るけれども横並びだとさらに個々のリストがリスト全体からはみ出し易くなる。リスト全体に合わせるならばHTMLのリストのulタグ、またはolタグにCSSで{width:100%;}を指定すれば良いだろう。width要素の値を変えることによってリストの幅を好みで全体的に合わせることができる。部分的なリストの幅の調整

項目①

項目②

項目③

ul {padding-left:0;}
li {display:inline;margin-right:1em;}

リストを只単に横並びにしてもリスト同士がくっ付いてしまうからサイトの見映えや使用感が損なわれるかも知れない。個々のリストの右側に1emの間隔を取るならばリストのliタグにCSSで{margin-right:1em;}を指定すれば良いだろう。margin要素の種類や値を変えることによってリストの幅を好みで部分的に調節することができる。CSSでの指定をpadding要素に置き換えてもサイトのデザインは同じで、右側に1emでは{padding-right:1em;}でも見映えや使用感はmargin-rightを使った場合と変わることはない。liタグの左右で間隔を取った場合には互いに打ち消されないようだから注意しなくてはならないと思う。ところで個々のリストの左右のどちらかに間隔を取って行くとリストの全体的なデザインからしてどちらかの端に余分な間隔も取られてしまう。両側をピッタリ合わせるには個々のリストの右側に1emを空けているならばリストのulタグ、またはolタグにCSSで{margin-right:-1em;}を指定すれば良いだろう。右端のliタグの余分な間隔をリスト全体の右端から互いに等しい間隔で詰めることによって相殺しているわけだ。ulタグ、またはolタグへのCSSのmargin要素をpadding要素に置き換えても結果は変わらない。これをやっておかないと個々のリストの文章の長さに伴う折り返しの位置の違いから左右のどちらかの端が必要以上に増えることが考えられる。ただしリスト全体が折り返すかどうかが予め分からない場合は折り返さないときに却ってリスト全体の幅が足りなくなって表示がズレるかも知れないので、もう一つの方法でリスト全体の幅を相殺しないように最初から合わせる方が良い。もう一つの方法

項目①

項目②

項目③

ul {padding-left:0;}
li {display:inline;}
li:not(:last-child) {margin-right:1em;}

liタグの間隔を取るCSSの指定先に擬似クラスの:not(:last-child)を使って最後のliタグを除外すると最初から余分な間隔を付けずに済む。リストの折り返しを調節する HTMLのリストの折り返しを調節したデザイン

リストのliタグの文章が日本語では大丈夫なのに英語になるとリスト全体の幅に揃わず、折り返しが抜けてしまうことがある。文字間で改行させる場合

項目①

項目②

項目③

ul {padding-left:0;word-break:break-all;}
li {display:inline;}
li:not(:last-child) {margin-right:1em;}

サイトに載せる個々のリストがリスト全体の端で折り返される各行でのばら付きを考えなくてはならなくなるんだ。英語でも日本語のように単語のままで折り返さない、文字の切れ目で折り返すようにするには個々のリストの親要素のulタグかolタグにCSSで{word-break:break-all;}を指定すると良い。ただし不十分なところもあってリストの間隔がリスト全体の端にかかると折り返しが行われずにリストは抜けてしまうんだ。リストの間隔がリスト全体の端になるべくかからないように小さめに設定しておくしかないのではないか。大きく設定するとその分だけリスト全体の端にかかり易くなり、リストの抜ける確率が高まるからリストの間隔を狭めてリスト全体の端に収まるようにして行く。リスト同士の間に半角スペースを挟んだりすれば容易いかも知れないし、各行のリスト全体でのばら付きは必ずしも大きくはない。ただしThe W3C Markup Validation ServiceでサイトをチェックするとHTMLとしては芳しくなさそうなので、閲覧するのに支障は特に見当たらないけれども手を加えるとすれば半角スペースを挟むに付けてもリストの中に入れてしまいたくなる。項目毎に改行させる場合

項目①

項目②

項目③

ul {padding-left:0;}
li {display:inline-block;}
li:not(:last-child) {margin-right:1em;}

リストタグの横並びの指定をCSSの{display:inline-block;}にしておくと個々のリストは項目毎に折り返されるように変わって来る。リスト全体への配分も決められるから幅を合わせるのはさらに容易いかも知れない。インライン要素だけれどもリストそのものがブロック要素として扱われるようになるので、リスト全体の端で一行に収まり切らないリストはそのままで折り返されるんだ。リストの割合で一行に四つ収めたければリストのliタグにCSSで{width:25%;}を指定すれば良いだろう。割合を変えることによってリスト全体に収めるリストの数を増減させることができる。しかし合計で100%になるようにliタグの割合を配分してもリスト全体に収まり切らないことがあり、ブラウザに反映しない要因は他のところとの兼ね合いも含めれば様々に考えられるけど、一つにはHTML編集の幾つかのliタグを記載する際に改行を挟むとその分だけ100%を越えてしまい得るから止めておかなくてはならなかった。そして上下左右にmarginやpaddingを付けるならば互いに打ち消されないのも注意しておきたいと思う。文字位置が左寄せになるから中寄せにしたければHTMLのリストのulタグ、またはolタグにCSSで{text-align:center;}を指定するか、さもなければliタグに同じようにすると良いだろうし、右寄せだとtext-align要素の値にrightを使うことになる。それぞれの違いとしては前者はリスト全体の並びも変わる。後者はそれは生じない。なのでリストの最後の方だけ数が足りなくて（三つ並びでリストが七つだと三段目でリストが一つしか残されてない）リスト全体に対して間隔が余るとデザインに違いが出て来る。使い分けが求められるところだ。リストの割合を指定するかぎり、リストの間隔を取らなくても個々のリストをリスト全体の端に合わせることが直ぐにできた。IEのヴァージョン7以前への対応 IEのヴァージョン7以前へ対応したHTMLのリストデザインが立体的に表示されている

IEのヴァージョン7以前へ対応したHTMLのリストデザインが立体的に表示されている

リストタグに関してCSSのdisplay要素のinline-blockはブラウザのIE（インターネットエクスプローラー）のヴァージョン7以前では反映しないらしい。CSSの display: inline、display: block、display: inline-block をマスターしよう！に対処法が載っていた。CSSのスターハックという手法が使われているようで、リストのliタグには

{display:inline-block; *display: inline; <!-- IE用のハックです --> zoom: 1; <!-- IE用の hasLayout を true にするための記述です -->}

と指定しておく。ところでCSSのハックはスターでなくとも他のブラウザには記述ミスと捉えられるらしいから不具合はなさそうにせよ、注意は必要かも知れない。それも避けるとすると条件付きコメントを用いてヴァージョン7以前のIEのためにCSSを別に記載するべきだろう。CSSは後から読み込まれたものがサイトに表示されるから通常のliタグを置いて次にという専用の条件付きコメントを置く。二つの命令文の間に通常のliタグとIDやclassを合わせるようにしながら{display:inline;zoom:1;}を記載すればヴァージョン7以前のIEのブラウザに反映するようになる。