ウェブデザイン制作/ウェブ・ポジショニングのウェブZYCO'S [ リストスタイルを仔細に設定してCSSを理解する ]

リストスタイルを仔細に設定してCSSを理解する

このリストスタイルはたっぷり時間をとってCSSでどういう具合に設定が反映されるかを確認することが大切だ。実践的な観点でマークにする画像の位置の調整やリストの文字列の余白などの関係をじっくり探ってみよう。

2 February,2006

list-stylemargin,paddingとリストマークの関係

list-styleの<ul>と<li>にそれぞれマージンを10px、パッディングを10px設定し背景を色分けしたのが下である。 初期設定はアウトサイドポジションになるようだ。

リストマークの位置がリスト本文から飛び出しているので、一見ポジショニングの相関を分かり辛くしているように思える。まずは、そのあたりを探ってみよう。

  • 人生とは、切符を買って軌道の上を走る車に乗る人には分からないものである。 --- サモセット・モーム
  • 人の一生は曲がり角だらけだ。 --- 山本周五郎
  • 人生は一冊の書物に似ている。馬鹿者たちはそれはパラパラとめくっているが、賢い人間はそれを念入りに読む。なぜなら、彼はただ一度しかそれを読むことが出来ないのを知っているから。 --- ジョン・パウル
/*--css--*/
UL.type{
  margin : 10px;
  padding : 10px;
  background-color : #ded69c;
}
li.style{
  font-size:75%;
  padding : 10px;
  margin : 10px;
  background-color : #ccbb58;
}
<div class="waku">
<ul class="type">
  <li class="style">人生とは...サモセット・モーム</li>
  <li class="style">人の一生は...山本周五郎</li>
  <li class="style">人生は一冊の...ジョン・パウル</li>
</ul>
</div>

※ここまでの設定であればIE6とFirefox1.5でほぼ同様のレンダリング(ウェブブラウザの画面表示)を示すが、リストマークの配置はFirefox1.5が余白のセンターに配置され、IE6は若干左寄りになる。

list-style-position : inside; の場合

リスト・スタイル・ポジションをインサイドにした場合、リストのボックス表示から余白を20px空けてみるにはどうしたらいいか試した。

また、追加で行間の設定とリストとリストの間隔の設定もしてみた。

  • 人生とは、切符を買って軌道の上を走る車に乗る人には分からないものである。 --- サモセット・モーム
  • 人の一生は曲がり角だらけだ。 --- 山本周五郎
  • 人生は一冊の書物に似ている。馬鹿者たちはそれはパラパラとめくっているが、賢い人間はそれを念入りに読む。なぜなら、彼はただ一度しかそれを読むことが出来ないのを知っているから。 --- ジョン・パウル
/*--insideを設定した場合のcss--*/
UL.type_1{
  list-style-image : url(images/arrow_blue_g.gif);
  list-style-type : disc; /*画像が表示されない場合の設定*/
  list-style-position : inside;    /*インサイドの設定*/
  margin : 0px;
  padding : 20px;          /*四隅に20px余白設定*/
}
li.style_1{
  font-size:75%;    
  line-height : 150%;                 /*リストの行間調整*/
  padding : 2px 0;             /*リストとリストの間隔調整*/
}
<!--html-->
<div id="navigation">
<ul class="type_1">
  <li class="style_1">人生とは...サモセット・モーム</li>
  <li class="style_1">人の一生は曲がり角だらけだ---山本周五郎</li>
  <li class="style_1">人生は一冊の...ジョン・パウル</li>
</ul>
</div>

リストをインサイドスタイルで配置するポイントの考察

  • <ul>ではリストに関する設定を行う
    リストの画像、リストの画像が表示されない場合のリストスタイル、リストのポジション、<div>に対しての余白を設定する
  • <li>ではリスト項目の間隔の設定を行う
    必要に応じてフォントサイズ、行間(line-height)、リストとリストの間隔(ここではpadding-topとpadding-bottomで)を設定
  • list-style-type : none; に設定するとIE6ではリストの先頭がインデントされるが、Firefox1.5ではインデントされない
  • IE6とFirefox1.5の双方で同じリストマーク画像の配置を再現することはできない

※この設定であればIE6とFirefox1.5でほぼ同様のレンダリング(ウェブブラウザの画面表示)が可能のようだ。リストマークの画像の配置はFirefox1.5のほうがリスト本文との間隔が空く傾向にある。

list-style-position : outside; の場合

リスト・スタイル・ポジションをアウトサイドにした場合、リストのボックス表示から余白を20px空けてみるにはどうしたらいいか試した。

  • 人生とは、切符を買って軌道の上を走る車に乗る人には分からないものである。 --- サモセット・モーム
  • 人の一生は曲がり角だらけだ。 --- 山本周五郎
  • 人生は一冊の書物に似ている。馬鹿者たちはそれはパラパラとめくっているが、賢い人間はそれを念入りに読む。なぜなら、彼はただ一度しかそれを読むことが出来ないのを知っているから。 --- ジョン・パウル
/*--outsideを設定した場合のcss--*/
UL.type_2{
  list-style-image : url(../images/arrow_blue_g.gif);
  list-style-type : disc; /*画像が表示されない場合の設定*/
  list-style-position : outside;
  margin : 0;
  padding : 20px 20px 20px 40px;               /*左が40px*/
}
li.style_1{
  font-size:75%;
  line-height : 150%;                 /*リストの行間調整*/
  padding : 2px 0;            /*リストとリストの間隔調整*/
}
<!--html-->
<div id="navigation">
<ul class="type_2">
  <li class="style_1">人生とは...サモセット・モーム</li>
  <li class="style_1">人の一生は曲がり角だらけだ---山本周五郎</li>
  <li class="style_1">人生は一冊の...ジョン・パウル</li>
</ul>
</div>

リストをアウトサイドスタイルで配置するポイントの考察

  • <ul>で上記のインサイドと違うのは、paddingで入力した値20pxに左部分だけをさらに足すことだ。上記では20px足してみた例だ。
  • <li>でpadding-leftに値を入れると値分だけマークとリストが空く
  • IE6とFirefox1.5の双方で同じリストマーク画像の配置を再現することはできない

inside、outside共に最重要視されるのは横幅であるから、このぐらいまで配置や余白を設定しておけば実用的になってくると思われる。

タイトな余白で画像を使うリストメニュー

さて、リストスタイルについてinsideもoutsideについても余白やマージンの取り方がおよそ見えてきたが、メニューで使う場合を想定したものも考察してみよう。この場合余白がタイトになることがポイントだ。

例えば、サイドバーを配置してその中にリストスタイルのメニューを作る場合に、必要になってくるのが余白と幅の厳密な設定だ。特に幅の設定がオーバーサイズになると、floatで右側に配置したサイドバーは意図しない左方向へずり落ちてしまう結果になり、こういう失敗を多く見かける。

background-imageとlist-style-imageの違いは何だろう。ブラウザによってリスト画像の配置が微妙に異なるのがlist-style-imageだ。想定した範囲からとび出すことがあるので、これを回避しようと意図すると、リストマークの表示枠をbackground-imageの設定幅より少しだけ広くすることになる。但し、この使い方がフリーのフォントサイズには有効なのだ。

  • サモセット・モーム
  • 山本周五郎
  • ジョン・パウル
/*--outideを設定した場合のcss--*/
UL.type_2_1{
  list-style-image : url(images/dot.gif);
  list-style-type : disc;
  list-style-position : outside;
  margin : 0;
  padding : 0 0 0 21px;
  background-color : #e5e5ce; 
}
li.style_2_1{
  font-size:75%;
  line-height : 120%;
}
<!--html-->
<div id="navigation">  /*メニュー幅を200pxに設定*/
<ul class="type_2_1">
  <li class="style_2_1">サモセット・モーム</li>
  <li class="style_2_1">山本周五郎</li>
  <li class="style_2_1">ジョン・パウル</li>
</ul>
</div>

上の記述で画像を外してリスト本文を長めにしたサンプルがこれだ。複数行にテキストが回り込むので右余白を6px設定した。また、見栄えを考えてメニューの上下に4pxの余白を与えた。

  • 人生とは、切符を買って軌道の上を走る車に乗る人には分からないものである。 --- サモセット・モーム
  • 人の一生は曲がり角だらけだ。 --- 山本周五郎
  • 人生は一冊の書物に似ている。馬鹿者たちはそれはパラパラとめくっているが、賢い人間はそれを念入りに読む。なぜなら、彼はただ一度しかそれを読むことが出来ないのを知っているから。 --- ジョン・パウル
/*--outideを設定した場合のcss--*/
UL.type_2_2{
  list-style-type : disc;
  list-style-position : outside;
  margin : 0;
  padding : 4px 6px 4px 20px;
  background-color : #e5e5ce;
}
li.style_2_2{
  font-size:75%;
  line-height : 120%;
  padding : 2px 0;   /*リストとリストの間隔を上下2px空ける*/
}
<!--html-->
<div id="navigation">
<ul class="type_2_2">
  <li class="style_2_2">人生とは...サモセット・モーム</li>
  <li class="style_2_2">人の一生...山本周五郎</li>
  <li class="style_2_2">人生は一冊の...ジョン・パウル</li>
</ul>
</div>

メニューに収まるリストスタイルはシンプルに余白のバランスをとって、丁寧に設定してあげると各段に見栄えが増すのでオススメだ。

そしてラストは一番タイトに余白を詰めることが出来るサンプルだ。background-imageを使うもので、画像を配置させるのが簡単である利点があるが、フォントサイズを大きくすると少しずれるのが欠点。

  • 人生とは、切符を買って軌道の上を走る車に乗る人には分からないものである。 --- サモセット・モーム
  • 人の一生は曲がり角だらけだ。 --- 山本周五郎
  • 人生は一冊の書物に似ている。馬鹿者たちはそれはパラパラとめくっているが、賢い人間はそれを念入りに読む。なぜなら、彼はただ一度しかそれを読むことが出来ないのを知っているから。--- ジョン・パウル
/*--outideを設定した場合のcss--*/
ul.type_3{
  list-style : none;
  margin : 0px;
  padding : 0px;
  background-color : #e5e5ce;
}
LI.style_3{
  background-image : url(images/arrow_z.gif);
  background-repeat : no-repeat;
  font-size:75%;
  line-height : 120%;
  padding-left : 12px;
  padding-right : 6px;
  background-positon : left center;
}
<!--html-->
<div id="navigation">
<ul class="type_3">
  <li class="style_3">人生とは...サモセット・モーム</li>
  <li class="style_3">人の一生は曲がり角だらけだ--- 山本周五郎</li>
  <li class="style_3">人生は一冊の...ジョン・パウル</li>
</ul>
</div>

CSSロールオーバー・リストメニューを作る

ページのトップへ


文字の大きさについて 文字の大きさは、ブラウザで調節して下さい。
当サイトへのリンクは自由に行えます。