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

関連記事