スキップしてメイン コンテンツに移動

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

サイトでリストを表示するにはulタグ(順序なしリスト)、またはolタグ(順序ありリスト)にliタグを追加して行く。追加されたliタグのところがリストになってサイトに表示されることになる。


初期設定だと上下と左側に間隔が取られてリストの頭にulタグならば中点(・)が、olタグならば番号(1.)が付けられて縦並びで空行なしにデザインされている。



リストの四つの主なデザイン


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


画面に左寄せで表示するにはulタグ、またはolタグにcssで{padding-left:0;}を指定すれば良い。


リストで左側に間隔が取られるのはタグの外側のmarginではなくて内側のpaddingに間隔が取られるせいだ。


ただしリストのマーカーも欠けて来てしまうので、十分に出しておきたければcssのpadding属性のleftで1em(一字分程度)以上の間隔を取るべきかも知れない。


リストのマーカーを消す


リストを左合わせで表示するには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属性で共通してマーカーが消える。


縦並びのリストを広げる


個々のリストに1emの空行を挟むならばCSSで{margin:1em 0;}を指定すれば良いだろう。


上下のリストで間隔が重なっても打ち消されて求め通りに合わさるから大丈夫なんだ。


cssのmargin属性の種類や値を変えれば個々のリストに様々に間隔を取ることができる。


リストを横並びにする


リストのliタグにcssで{display:inline;}を指定すれば良い。


htmlのインライン要素として扱われるので、元々のブロック要素のように個々のリストがサイトに一行では表示されず、纏めて一行に収まるようになる。


display属性のinlineを使うとliタグの上下にmarginやpaddingを付けても縦並びのように広がらないので、注意しておきたい。


リストの位置を揃える


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


リストが縦並びでもあり得るけれども横並びだとさらに個々のリストがリスト全体からはみ出し易くなる。


リスト全体に合わせるならばhtmlのリストのulタグ、またはolタグにcssで{width:100%;}を指定すれば良いだろう。


width属性の値を変えることによってリストの幅を好みで全体的に合わせることができる。


部分的なリストの幅の調整


リストを只単に横並びにしてもリスト同士がくっ付いてしまうからサイトの見映えや使用感が損われるかも知れない。


個々のリストの右側に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属性に置き換えても結果は変わらない。


これをやっておかないと個々のリストの文章の長さに伴う折り返しの位置の違いから左右のどちらかの端が必要以上に増えたり、減ったりすることが考えられる。


リストの折り返しを調節する


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


文字間で改行させる場合


サイトに載せる個々のリストがリスト全体の端で折り返される各行でのばら付きを考えなくてはならなくなるんだ。


英語でも日本語のように単語のままで折り返さない、文字の切れ目で折り返すようにするにはリストのliタグにcssで{word-break:break-all;}を指定すると良い。


ただし不十分なところもあってリストの間隔がリスト全体の端にかかると折り返しが行われずにリストは抜けてしまうんだ。


リストの間隔がリスト全体の端になるべくかからないように小さめに設定しておくしかないのではないか。大きく設定するとその分だけリスト全体の端にかかり易くなり、リストの抜ける確率が高まるからリストの間隔を狭めてリスト全体の端に収まるようにして行く。


リスト同士の間に半角スペースを挟んだりすれば容易いかも知れないし、各行のリスト全体でのばら付きは必ずしも大きくはない。


ただしThe W3C Markup Validation Serviceでサイトをチェックするとhtmlとしては芳しくなさそうなので、閲覧するのに支障は特に見当たらないけれども手を加えるとすれば半角スペースを挟むに付けてもリストの中に入れてしまいたくなる。


項目毎に改行させる場合


リストタグの横並びの指定を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以前への対応


リストタグに関して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タグを置いて次に<!--[if lte IE 7]--><!--[endif]-->という専用の条件付きコメントを置く。二つの命令文の間に通常のliタグとIDやclassを合わせるようにしながら{display:inline;zoom:1;}を記載すればバージョン7以前のIEのブラウザに反映するようになる。

コメント

些細な日常の人気の投稿

アドセンスの支払い日は翌月二十一日前後だけれども保留されると送金されない

PlayストアでAndroidアプリのダウンロードが非常に遅い場合の打開策

Imgurで画像URLと埋め込みコードを取得する方法