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