ホームページ作成講座[CSS編]リストのスタイル設定

作成日:2019.09.16
  1. HOME
  2. ホームページ作成講座
  3. リストのスタイル設定

このページではリストのスタイルを指定する方法について説明します。

  1. マーカーの種類の指定
  2. マーカーの画像指定
  3. マーカーの位置の指定

マーカーの種類の指定

リストのマーカーは自動で振られると思いますが、自分で指定することもできます。マーカーを指定するプロパティと値は、以下の通りです。

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>項目1</li>
<li>項目2</li>
</ol>
</li>
<li>アルファベットのリスト
<ol class="alp">
<li>項目3</li>
<li>項目4</li>
</ol>
</li>
</ul>
<表示結果>

マーカーの画像指定

マーカーに画像を指定することもできます。プロパティと値は以下のように記述します。

list-style-image : url(画像パス)
マーカーに画像を指定します。

(サンプル)

<style>
ul{
  list-style-image : url("../img/bear.gif");  //熊の画像をリストマーカーに指定
}
</style>

<ul>
<li>項目1</li>
<li>項目2</li>
<li>項目3</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>
<表示結果>
data-matched-content-rows-num="4,2" data-matched-content-columns-num="1,3" data-matched-content-ui-type="image_stacked,image_card_sidebyside">