リストタグ <ul> <ol>

Posted by muchag | CSS,HTML |
初回投稿:2010-07-10 (土) 23:52:43 | 最終更新:2010-07-11 (日) 0:35:36

リスト表示用のHTMLタグ <ul> <ol>

今まではあんまり好きになれず使ってこなかったが
今回使いたくなったので調べてみた。
 

用例と差異

<ul> <ol> は <li> とセットで

  1. <ul>
  2.     <li>hoge</li>
  3.     <li>moge</li>
  4. </ul>
  5.  
  6. <ol>
  7.     <li>hoge</li>
  8.     <li>moge</li>
  9. </ol>

このように記述する。

実際に使ってみると

<ul>
  • hoge
  • moge

 

<ol>
  1. hoge
  2. moge

 
こんな感じ。

つまるところ <ul> と <ol> の違いは、どうやら
先頭のマーク。

<ul> は● <ol> は数字。
でも、それはデフォルトがそうっていうだけで
CSSなどで自由に設定できる。
本当にそれだけの違い・・・ですか? 🙄
 

入れ子

あ~ あと、入れ子も可能。

  1. <ul>
  2.     <li>hoge</li>
  3.     <ul>
  4.         <li>soge</li>
  5.     </ul>
  6.     <li>moge</li>
  7.     <ul>
  8.         <li>xoge</li>
  9.         <ul>
  10.             <li>goge</li>
  11.             <ul>
  12.                 <li>poge</li>
  13.                 <ul>
  14.                     <li>koge</li>
  15.                     <ul>
  16.                         <li>koge</li>
  17.                         <ul>
  18.                             <li>koge</li>
  19.                             <ul>
  20.                                 <li>koge</li>
  21.                                 <ul>
  22.                                     <li>koge</li>
  23.                                     <ul>
  24.                                         <li>koge</li>
  25.                                     </ul>
  26.                                 </ul>
  27.                             </ul>
  28.                         </ul>
  29.                     </ul>
  30.                 </ul>
  31.             </ul>
  32.         </ul>
  33.     </ul>
  34. </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用) > リストに関するプロパティ > リストのマークの種類

でも、ブラウザに依存するらしいので、あんまり特殊なのは使わない方がいいかも。
 

実験

さて! うちのブラウザはいかに!

none
  • hoge
  • moge
disc
  • hoge
  • moge
circle
  • hoge
  • moge
square
  • hoge
  • moge
decimal
  • hoge
  • moge
decimal-leading-zero
  • hoge
  • moge
lower-roman
  • hoge
  • moge
upper-roman
  • hoge
  • moge
lower-greek
  • hoge
  • moge
lower-alpha
  • hoge
  • moge
upper-alpha
  • hoge
  • moge
lower-latin
  • hoge
  • moge
upper-latin
  • hoge
  • moge
cjk-ideographic
  • hoge
  • moge
hiragana
  • hoge
  • moge
katakana
  • hoge
  • moge

 

結果
Firefox 3.6.6

全て表示された。

Firefox 3.5.10

全て表示された。

IE 7.0.5730.13

decimal-leading-zero ×
lower-greek ×
lower-latin ×
upper-latin ×
cjk-ideographic ×
hiragana ×
katakana ×
上記は全て disc(デフォルト)に。

IE 6.0.2900.5512.xpsp_sp3_gdr.090206-1234

decimal-leading-zero ×
lower-greek ×
lower-latin ×
upper-latin ×
cjk-ideographic ×
hiragana ×
katakana ×
上記は全て disc(デフォルト)に。
 
あなたのブラウザはいかが?

Posted by muchag | CSS,HTML |
初回投稿:2010-07-10 (土) 23:52:43 | 最終更新:2010-07-11 (日) 0:35:36

コメントはまだありません »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a comment