HTML & CSS - 箇条書きのマークを変更する
箇条書きのマークを変更する
箇条書きのマークを変更するには、CSS の list-style-type プロパティで定義します。list-style-type プロパティの値は箇条書きのマークを設定します。ただし、list-style-type と list-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