- HOME
- ホームページ作成講座
- リストのスタイル設定
このページではリストのスタイルを指定する方法について説明します。
マーカーの種類の指定
リストのマーカーは自動で振られると思いますが、自分で指定することもできます。マーカーを指定するプロパティと値は、以下の通りです。
- list-style-type : マーカーの種類
- リストマーカーの種類を指定します。値は以下のようなものがあります。
- disk…黒丸
- circle…白丸
- square…四角
- none…マーカー無し
- decimal…連番（1,2,3）
- lower-roman…ローマ数字（i,ii,iii）
- upper-roman…ローマ数字（I,II,III）
- lower-alpha…アルファべット（小文字）
- upper-alpha…アルファベット（大文字）
（サンプル）
<style>
ul li
{
list-style-type : circle; //白丸のマーカーにする
}
ol.rom li{
list-style-type : lower-roman; //小文字ローマ数字の連番にする
}
ol.alp li{
list-style-type : upper-alpha; //大文字アルファベットの連番にする
}
</style>
<ul>
<li>ローマ数字のリスト
<ol class="rom">
<li>項目１</li>
<li>項目２</li>
</ol>
</li>
<li>アルファベットのリスト
<ol class="alp">
<li>項目３</li>
<li>項目４</li>
</ol>
</li>
</ul>
＜表示結果＞
マーカーの画像指定
マーカーに画像を指定することもできます。プロパティと値は以下のように記述します。
- list-style-image : url(画像パス)
- マーカーに画像を指定します。
（サンプル）
<style>
ul{
list-style-image : url("../img/bear.gif"); //熊の画像をリストマーカーに指定
}
</style>
<ul>
<li>項目１</li>
<li>項目２</li>
<li>項目３</li>
</ul>
＜表示結果＞
マーカーの位置の指定
リストのマーカーの位置を指定するプロパティもあります。マーカーを枠内に置くか枠外に置くかによって、文章が折り返された時に違いが生じます。
- list-style-position : outside/inside
- 値にoutsideを指定すると、マーカーが枠外に表示されます（デフォルト）
- 値にinsideを指定すると、マーカーが枠内に表示されます
（サンプル）
<style>
.ins{
list-style-position : inside; //マーカーを枠内に表示します
}
</style>
<ul>
<li>この項目はマーカーが枠外に表示されています。
文字が折り返された時、マーカーは文章の左に飛び出した状態になります。</li>
<li class="ins">この項目ではマーカーが枠内に表示されています。
文章が折り返された時、2行目の先頭がマーカーと同じ位置になっています。</li>
</ul>
＜表示結果＞