リストの種類について調べてみました
2015年11月18日
【こちらの記事は、約4分程でお読みいただけます。】
こんにちは、水曜日のブログ担当の工藤です。
リストの種類ですが、使うものは、たいてい黒点か数字かぐらいですが、実はたくさんあります。
リストの種類
| 黒点 | disc |
|
|---|---|---|
| 四角形 | square |
|
| 白点 | circle |
|
| 数字（1〜） | decimal |
|
| 数字（01から） | decimal-leading-zero |
|
| 小文字のローマ数字 | lower-roman |
|
| 大文字のローマ数字 | upper-roman |
|
| 小文字のギリシャ数字 | lower-greek |
|
| 小文字の英語 | lower-alpha／lower-latin |
|
| 大文字の英語 | upper-alpha ／ upper-latin |
|
| アルメニア数字 | armenian |
|
| グルジア数字 | georgian |
|
| なし | none |
|
その他特殊な文字
・cjk-ideographic（漢数字）
・hebrew（ヘブライ数字）
・hiragana（ひらがな）
・hiragana-iroha（いろは）
・katakana（カタカタ）
・katakana-iroha（イロハ）
・urdu (ウドゥルー数字)
他にも干支や十干、韓国語数字など様々な特殊文字がありますが、ブラウザのよっては対応されていない（正確にはCSS2.1で削除された）ので、使う時は気をつけましょう。
スタイルの記述場所
ulに記述すれば、子要素のliにすべて反映されます。
liタグ単体に付けるとそれだけ、が反映されます。
ul{
font-size: 2rem;
list-style: upper-roman;
padding: 100px;
}
li:nth-child(2){
list-style: disc;
}
使いみちはあるか分かりませんが、覚えておくといいかもしれません。
list-style-position
insideかoutsideでリストの位置を指定します。
初期値はoutside。
insideは、文字の内側に配置されます。
- a
- b
- c
ul{
list-style-position: outside;
}
- a
- b
- c
ul{
list-style-position: inside;
}
リセットCSSを効かせた状態で、リストを実装すると下記のような状態になります。
リストの位置が…なんて時はlist-positionを見なおしてみましょう。
終わりに
リストのディスプレイプロパティは、list-item。
横並びに文字を指定するために、
li{
display: inline-block;
}
などに指定していると、リストのスタイルが効かない場合があるので注意しましょう。
