リスト(list)2

リスト(list-style-)のインデントと画像マーカー

マーカーの位置を外(outside)、内(inside)に調節。

マーカーは任意の画像にできちゃいます。

リストマーカーのインデント

list-style-position: inside

値：inside, outside

例

ｾﾚｸﾀ{

list-style-position: outside

}

<ul>や<ol>タグに指定してやります

outside：外側

inside：内側

外だと通常の箇条書き

内だと2行目以降の頭文字が

繰り上がって、マーカーの位置に

並びます。

- outside
- マーカーは外側
- inside

GoogleSiteでは適用不可なので、

似せて作ってあります・・・

→

マーカーは内側

画像マーカー

list-style-image: url("img01.gif")

値：01.gifや02.jpgなどの画像ファイル

例

ｾﾚｸﾀ{

list-style-image: url("img02.gif")

}

<ul>や<ol>や<li>タグに指定してやります

画像サイズがフォントサイズに

合わないと、表示が崩れます。

<head>

ul{

list-style-image: url(arrow067_05.gif);

}

</style>

</head>

<body>

<ul>

</ul>

</ul>

</body>

マーカーを画像にしたサンプル ↑

そのソース →

<ul>タグに水色マーカーを指定して

（styleの中）

<li>タグには個別で赤と緑の

マーカーを指定しました。

（liタグの中）

liタグの中にstyle属性でインライン

として記述せずに、

styleの中に書くこともできます。

この時は、各liタグにid名を

付けてやることになりますね。

リストのマークをまとめて設定する

ｾﾚｸﾀ{ list-style: url("list01.gif") outside }

マークの種類とインデントを

任意の順序でスペースで区切って書くことができる！！

Page updated

Google Sites

Report abuse