リストの設定：スタイルシートメモ

リストの設定

項目や商品の一覧など、箇条書きで記述するコンテンツは結構あります。
こうしたコンテンツもリストタグを使う事でアクセシビリティアップにつながります。

■箇条書きリスト（リストの頭が「・」などの記号）

<ul>

<li>

</ul>

■番号つきリスト（リストの頭が「１」などの数字）

<ol>

<li>

</0l>

リスト自体にいろいろなデザインを当てる事が出来ます。

■リストマークを画像にする

ul{
list-style-image:url(○○○.jpg);
}
※リストマークとテキストの間隔をあける
li{
padding-left:0.3em;
}

■リストの左側余白をなくす

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

※この値（0）を変える事でリストの左余白の大きさを変更する事が出来ます。

■リストの文字デザインを指定する

li{
font-size:0.875em;
color:#000;
}

■リストの行間を調節する

li{
margin-bottom:0.5em;
}

※リストの項目が複数行になる場合は、行間も調節したほうが◎です。
たとえば、こんな感じです。
line-height:1.5em

ちなみにリストはだいたい8個以内にするのがいいといわれています。
8個以上になるときはグループわけをしたほうが良いです。
そのときに、グループごとに見出し<h2>や<h3>で見出しを設定したほうがアクセシビリティに効果があるといわれています。

<h3>リストの見出し1</h3>

<ol>

<li>

</0l>

<h3>リストの見出し2</h3>

<ol>

<li>

</0l>

投稿者: akasa 日時: 2006年03月30日 14:51|パーマリンク