リスト関連プロパティの値（CSS）

リスト関連プロパティの値（CSS）

list-style-type

値（パラメータ）	内容
none	リストマーカーを非表示
disc	黒丸のリストマーカー
circle	白丸のリストマーカー
square	四角のリストマーカー
decimal	数字のリストマーカー
upper-alpha	大文字アルファベットのリストマーカー
lower-alpha	小文字アルファベットのリストマーカー
upper-roman	大文字ローマ数字のリストマーカー
lower-roma	小文字ローマ数字のリストマーカー

入力例	list-style-type: circle;

サンプルコード（CSS別記）

/*CSSコード*/
.list-style-type-bg1 {
  background-color: #fdf2f4;
  width: 500px;
}
.list-style-type-bg2 {
  background-color: #d6e3ff;
  width: 500px;
}
.list-style-type1 {
  list-style-type: circle;
}
.list-style-type2 {
  list-style-type: upper-alpha;
}

<!--HTMLコード-->
<div class="list-style-type-bg1">＜通常のリスト＞
  <ul>
    <li>リスト項目１</li>
    <li>リスト項目２</li>
    <li>リスト項目３</li>
  </ul>
</div>
<div class="list-style-type-bg2">＜通常のリストを白丸に変更＞
  <ul class="list-style-type1">
    <li>リスト項目１</li>
    <li>リスト項目２</li>
    <li>リスト項目３</li>
  </ul>
</div>
<div class="list-style-type-bg1">＜通常の数字付きのリスト＞
  <ol>
    <li>リスト項目１</li>
    <li>リスト項目２</li>
    <li>リスト項目３</li>
  </ol>
</div>
<div class="list-style-type-bg2">＜通常の数字付きのリストを大文字アルファベットに変更＞
  <ol class="list-style-type2">
    <li>リスト項目１</li>
    <li>リスト項目２</li>
    <li>リスト項目３</li>
  </ol>
</div>

サンプルコード（CSS別記）の表示

list-style-position

値（パラメータ）	内容
outside	リストマーカーをボックスの外側に表示する（初期値）
inside	リストマーカーをボックスの内側に表示する

入力例	list-style-position: inside;

サンプルコード（CSS別記）

/*CSSコード*/
.list-style-position-bg1 {
  background-color: #fdf2f4;
  width: 500px;
}
.list-style-position-bg2 {
  background-color: #d6e3ff;
  width: 500px;
}
.list-style-position1 {
  list-style-position: outside;
  border: 1px solid;
}
.list-style-position2 {
  list-style-position: inside;
  border: 1px solid;
}


<!--HTMLコード-->
<div class="list-style-position-bg1">＜通常のリスト＞
  <ul>
    <li>リスト項目１</li>
    <li>リスト項目２</li>
    <li>リスト項目３</li>
  </ul>
</div>
<div class="list-style-position-bg2">＜通常のリストを外側に変更（デフォルトのため変化なし）＞<br>
（分かりやすくするためにborderを表示しています）
  <ul class="list-style-position1">
    <li>リスト項目１</li>
    <li>リスト項目２</li>
    <li>リスト項目３</li>
  </ul>
</div>
<div class="list-style-position-bg2">＜通常のリストを内側に変更＞<br>
（分かりやすくするためにborderを表示しています）
  <ul class="list-style-position2">
    <li>リスト項目１</li>
    <li>リスト項目２</li>
    <li>リスト項目３</li>
  </ul>
</div>

サンプルコード（CSS別記）の表示

list-style-image

値（パラメータ）	内容
none	リストマーカーに画像を使用しない（初期値）
url(URI)	リストマーカーに画像を使用する（画像をURIで指定します） 画像がズレますので、背景（background-image）で使用するか、 「FontAwesome」を活用しましょう

入力例	list-style-image: url();

サンプルコード（CSS別記）

/*CSSコード*/
.list-style-image-bg1 {
  background-color: #fdf2f4;
  width: 500px;
}
.list-style-image-bg2 {
  background-color: #d6e3ff;
  width: 500px;
}
.list-style-image1 {
  list-style-image: url(https://maven-gathering.com/wp/morph/wp-content/uploads/sites/10/2020/04/favicon-maven-03-02-e1586315036223.jpg); 
}

<!--HTMLコード-->
<div class="list-style-image-bg1">＜通常のリスト＞
  <ul>
    <li>リスト項目１</li>
    <li>リスト項目２</li>
    <li>リスト項目３</li>
  </ul>
</div>
<div class="list-style-image-bg2">＜通常のリストマーカーを画像に変更＞<br>
  <ul class="list-style-image1">
    <li>リスト項目１</li>
    <li>リスト項目２</li>
    <li>リスト項目３</li>
  </ul>
</div>

サンプルコード（CSS別記）の表示

list-style

値（パラメータ）	内容
list-style-typeで使用する値	リストの先頭に付く記号のタイプを定義します
list-style-positionで使用する値	リストの先頭に付く記号の位置を定義します
list-style-imageで使用する値	リストの先頭に付く記号を画像にするか定義します

タイプと画像を一緒に定義した場合は、画像が優先されます。

入力例	list-style: circle inside url(https://maven-gathering.com/wp/morph/wp-content/uploads/sites/10/2020/04/favicon-maven-03-02-e1586315036223.jpg);

サンプルコード（CSS別記）

/*CSSコード*/
.list-style-bg1 {
  background-color: #fdf2f4;
  width: 500px;
}
.list-style-bg2 {
  background-color: #d6e3ff;
  width: 500px;
}
.list-style1 {
  list-style: circle inside url(https://maven-gathering.com/wp/morph/wp-content/uploads/sites/10/2020/04/favicon-maven-03-02-e1586315036223.jpg);
}

<!--HTMLコード-->
<div class="list-style-bg1">＜通常のリスト＞
  <ul>
    <li>リスト項目１</li>
    <li>リスト項目２</li>
    <li>リスト項目３</li>
  </ul>
</div>
<div class="list-style-bg2">＜通常のリストを白丸・内側・画像に変更＞
  <ul class="list-style1">
    <li>リスト項目１</li>
    <li>リスト項目２</li>
    <li>リスト項目３</li>
  </ul>
</div>

サンプルコード（CSS別記）の表示