HTML & CSS - 箇条書きのマークを変更する

箇条書きのマークを変更する

箇条書きのマークを変更するには、CSS の list-style-type プロパティで定義します。list-style-type プロパティの値は箇条書きのマークを設定します。ただし、list-style-typelist-style-image を同時に指定した場合は list-style-image の値が優先されます。

<!DOCTYPE html>
<html lang="ja">
  ...
  <ul class="liststyletype_square">
    <li>マークを黒四角に変更したリスト</li>
  </ul>
  ...
</html>
箇条書きのマークを変更する - HTML
/* マーカーなし */
.liststyletype_none{
    list-style-type: none;
}

/* 黒丸 */
.liststyletype_disc{
    list-style-type: disc;
}

/* 白丸 */
.liststyletype_circle{
    list-style-type: circle;
}

/* 黒四角 */
.liststyletype_square{
    list-style-type: square;
}

/* 小文字のローマ数字 */
.liststyletype_lowerroman{
    list-style-type: lower-roman;
}

/* 大文字のローマ数字 */
.liststyletype_upperroman{
    list-style-type: upper-roman;
}

/* 算用数字 */
.liststyletype_decimal{
    list-style-type: decimal;
}

/* 先頭に 0 をつけた算用数字 */
.liststyletype_decimalleadingzero{
    list-style-type: decimal-leading-zero;
}

/* 小文字のギリシャ文字 */
.liststyletype_lowergreek{
    list-style-type: lower-greek;
}

/* 大文字のギリシャ文字 */
.liststyletype_uppergreek{
    list-style-type: upper-greek;
}

/* 小文字のラテン文字 */
.liststyletype_lowerlatin{
    list-style-type: lower-latin;
}

/* 大文字のラテン文字 */
.liststyletype_upperlatin{
    list-style-type: upper-latin;
}

/* 小文字のアルファベット */
.liststyletype_loweralpha{
    list-style-type: lower-alpha;
}

/* 大文字のアルファベット */
.liststyletype_upperalpha{
    list-style-type: upper-alpha;
}

/* 漢数字 */
.liststyletype_cjkideographic{
    list-style-type: cjk-ideographic;
}

/* あいうえお順 */
.liststyletype_hiragana{
    list-style-type: hiragana;
}

/* アイウエオ順 */
.liststyletype_katakana{
    list-style-type: katakana;
}

/* いろはにほへと順 */
.liststyletype_hiraganairoha{
    list-style-type: hiragana-iroha;
}

/* イロハニホヘト順 */
.liststyletype_katakanairoha{
    list-style-type: katakana-iroha;
}

/* ヘブライ数字 */
.liststyletype_hebrew{
    list-style-type: hebrew;
}

/* アルメニア数字 */
.liststyletype_armenian{
    list-style-type: armenian;
}

/* グルジア数字 */
.liststyletype_georgian{
    list-style-type: georgian;
}
箇条書きのマークを変更する - CSS

関連記事