リストタグ <ul> <ol>
リスト表示用のHTMLタグ <ul> <ol>。
今まではあんまり好きになれず使ってこなかったが
今回使いたくなったので調べてみた。
<ul> <ol> は <li> とセットで
- <ul>
- <li>hoge</li>
- <li>moge</li>
- </ul>
- <ol>
- <li>hoge</li>
- <li>moge</li>
- </ol>
このように記述する。
実際に使ってみると
- hoge
- moge
- hoge
- moge
こんな感じ。
つまるところ <ul> と <ol> の違いは、どうやら
先頭のマーク。
<ul> は● <ol> は数字。
でも、それはデフォルトがそうっていうだけで
CSSなどで自由に設定できる。
本当にそれだけの違い・・・ですか? 🙄
あ~ あと、入れ子も可能。
- <ul>
- <li>hoge</li>
- <ul>
- <li>soge</li>
- </ul>
- <li>moge</li>
- <ul>
- <li>xoge</li>
- <ul>
- <li>goge</li>
- <ul>
- <li>poge</li>
- <ul>
- <li>koge</li>
- <ul>
- <li>koge</li>
- <ul>
- <li>koge</li>
- <ul>
- <li>koge</li>
- <ul>
- <li>koge</li>
- <ul>
- <li>koge</li>
- </ul>
- </ul>
- </ul>
- </ul>
- </ul>
- </ul>
- </ul>
- </ul>
- </ul>
- </ul>
- hoge
- soge
- moge
- xoge
- goge
- poge
- koge
- koge
- koge
- koge
- koge
- koge
意地になって10段階までしてみたけど、何段階までいけるんだろう・・・。
CSSで設定する場合は
list-style-type : none; /* マークを使用しない */
list-style-type : disc; /* 黒い丸、デフォルト */
list-style-type : circle; /* 白い丸 */
list-style-type : square; /* 黒い四角 */
list-style-type : decimal; /* 数字 */
list-style-type : decimal-leading-zero; /* 数字(zero-fill) */
list-style-type : lower-roman; /* ローマ数字(小文字) */
list-style-type : upper-roman; /* ローマ数字(大文字) */
list-style-type : lower-greek; /* ギリシア文字(小文字) */
list-style-type : lower-alpha; /* アルファベット(小文字) */
list-style-type : upper-alpha; /* アルファベット(大文字) */
list-style-type : lower-latin; /* アルファベット(小文字) */
list-style-type : upper-latin; /* アルファベット(大文字) */
list-style-type : cjk-ideographic; /* 漢数字 */
list-style-type : hiragana; /* ひらがな */
list-style-type : katakana; /* かたかな */<引用元>
Home > CSSリファレンス(HTML/XHTML用) > リストに関するプロパティ > リストのマークの種類
でも、ブラウザに依存するらしいので、あんまり特殊なのは使わない方がいいかも。
さて! うちのブラウザはいかに!
- hoge
- moge
- hoge
- moge
- hoge
- moge
- hoge
- moge
- hoge
- moge
- hoge
- moge
- hoge
- moge
- hoge
- moge
- hoge
- moge
- hoge
- moge
- hoge
- moge
- hoge
- moge
- hoge
- moge
- hoge
- moge
- hoge
- moge
- hoge
- moge
全て表示された。
全て表示された。
decimal-leading-zero ×
lower-greek ×
lower-latin ×
upper-latin ×
cjk-ideographic ×
hiragana ×
katakana ×
上記は全て disc(デフォルト)に。
decimal-leading-zero ×
lower-greek ×
lower-latin ×
upper-latin ×
cjk-ideographic ×
hiragana ×
katakana ×
上記は全て disc(デフォルト)に。
あなたのブラウザはいかが?