CSSでul・ol・liの箇条書きの点を消す、編集する、別のものに変更する方法/list-style-typeプロパティ（他）の使い方

htmlでulタグを使えば自動的に頭に「・」が付き、olを使えば自動的に数字が振られます。この点とナンバリングをどうにかしよう、というコーナーです。

list-style-typeプロパティの使い方

基本形

とりあえず、素のリストを出してみます。

• 男と
• 女の
• 泪酒

<ul>
<li>男と</li><li>女の</li><li>泪酒</li>
</ul>

1. 君は
2. 小金を持ってる
3. フレンズなんだね

<ol>
<li>君は</li><li>小金を持ってる</li><li>フレンズなんだね</li>
</ol>

点や数字を消す

これの頭の「・」や数字を消すには、list-style-typeプロパティをnoneに指定します。ul、ol、どちらでも使えます。

• お前に
• 食わせる
• タンメンはない

<ul style = "list-style-type:none;">
<li>お前に</li><li>食わせる</li><li>タンメンはない</li>
</ul>

親要素と子要素、どちらに使用しても大丈夫です。

1. 闇の炎に
2. 抱かれて
3. 眠れ

<ol>
<li style = "list-style-type:none;">闇の炎に</li><li>抱かれて</li><li>眠れ</li>
</ol>

ちがうリスト記号にしてみる

list-style-typeは各国語に対応し、大量の種類があります。

disc（点）

• A
• B
• C

<ul style = "list-style-type:disc;">
<li>A</li><li>B</li><li>C</li>
</ul>

ulのデフォルト値で、olもこれを適用すると頭に黒ポチを付けることができます（普通しませんが）。
以下基本的に書き方同じなので、コード省略します。

circle（円）

• A
• B
• C

square（四角）

• A
• B
• C

decimal（算用数字）

• A
• B
• C

olのデフォルト値です。

decimal-leading-zero(0付き算用数字)

• A
• B
• C

cjk-ideographic（漢数字）

• A
• B
• C

lower-roman（小文字のローマ数字）

• A
• B
• C

upper-roman（大文字のローマ数字）

• A
• B
• C

lower-latinまたはlower-alpha（小文字のアルファベット）

• A
• B
• C

upper-latinまたはupper-alpha（大文字のアルファベット）

• A
• B
• C

hiragana（ひらがな）

• A
• B
• C

katakana（カタカナ）

• A
• B
• C

hiragana-iroha（いろは）

• A
• B
• C

katakana-iroha（イロハ）

• A
• B
• C

lower-greek（ギリシャ文字）

• A
• B
• C

kannada（カンナダ文字）

• A
• B
• C

trad-chinese-formal（中国の伝統的数字表記※試験運用）

• A
• B
• C

armenian（アルメニア数字）

• A
• B
• C

hebrew（ヘブライ数字）

• A
• B
• C

という具合で、大量に用意されています（まだいっぱいあります）。

自分でデザインする

CSSは効くので、独自デザインをすることが可能です。疑似要素を用いればオリジナル画像やアイコンを使うことも可能です。

• Sample Text
• Sample Text
• Sample Text

.oliveGreen{
color:darkolivegreen;
}

1. Sample Text
2. Sample Text
3. Sample Text

.underDouble{
text-decoration:underline double grey;
}

• Sample Text
• Sample Text
• Sample Text

.borderLeft li{
list-style-type:none;
border-left:5px solid lightsteelblue;
margin-bottom:3px 0;
padding-left:0.5em;
}