CSS入門(リストのCSSについて)

リストのCSSについて、まとめています。リストの先頭に表示される"黒丸"や"数字"のことをマーカーと言います。マーカーの種類や位置を変えることができます。

list-style-type

マーカーの種類を指定出来ます。

ul{
  list-style-type: disc;  /* 円形(初期値) */
}

文字やアイコンフォントも指定できます。下記以外にもあるので、各自で調べてください。

ul{
  list-style-type: square;  /* 四角形 */
  list-style-type: circle;  /* 白抜きの円形 */
  list-style-type: decimal;  /* 数値 */
  list-style-type: '@';  /* 文字 */
  list-style-type: none;  /* マーカーなし */

  /* アイコンフォント用の記述 */
  font-family:blogicon;
  list-style-type: `\f050`;  /* アイコンフォント */
}

表示例

アイコンフォントを使用する場合は、font-familyでフォント名を指定しておきます。

• じゃがいも
• 人参
• 玉ねぎ

list-style-image

マーカーに画像を指定することができます。

ul{
  list-style-image: url("https://s.hatena.ne.jp/images/star.gif");
}

表示例

• じゃがいも
• 人参
• 玉ねぎ

list-style-position

マーカーの位置をリストの内側もしくは外側に指定します。

ul{
  list-style-position: outside;
  /* list-style-position: inside; */
}

表示例

list-style-position:inside;を指定した場合。

• じゃがいも
• 人参
• 玉ねぎ

list-style-position:outside;を指定した場合。

• じゃがいも
• 人参
• 玉ねぎ

list-style

マーカーに関する指定をまとめて行うことができます。

ul{
/*-----------------------*/
/* 1つのプロパティを指定 */
/*-----------------------*/
/* typeのみ */
list-style: square;

/* imageのみ */
list-style: url("https://s.hatena.ne.jp/images/star.gif");

/* position */
list-style: inside;

/*-----------------------*/
/* 2つのプロパティを指定 */
/*-----------------------*/
/* typeとposition */
list-style: decimal inside;

/*-----------------------*/
/* 3つのプロパティを指定 */
/*-----------------------*/
/* typeとimageとposition */
list-style: lower-roman url("https://s.hatena.ne.jp/images/star.gif") outside;
}

参考サイト

• https://developer.mozilla.org/ja/docs/Web/CSS/list-style-type