<ul>や<ol>タグでマークアップするリストは、
スタイルで先頭に表示されるマークを指定することができます。
デフォルトでは黒い丸がつきますが、
ほかにもマークは用意されていて、
list-style-typeプロパティで値を設定することで
そのマークを変更できます。
ulやolのlist-style-typeで指定する値
none
disc
circle
square
lower-roman
upper-roman
decimal
decimal-leading-zero
lower-alpha
upper-alpha
cjk-ideographic
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
#container{ background-color: greenyellow; } ul.none{list-style-type:none;} ul.disc{list-style-type:disc;} ul.circle{list-style-type:circle;} ul.square{list-style-type:square;} ul.lower-roman{list-style-type:lower-roman;} ul.upper-roman{list-style-type:upper-roman;} ul.decimal{list-style-type:decimal;} ul.decimal-leading-zero{list-style-type:decimal-leading-zero;} ul.lower-alpha{list-style-type:lower-alpha;} ul.upper-alpha{list-style-type:upper-alpha;} ul.cjk-ideographic{list-style-type:cjk-ideographic;} |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>HTMLのメモ</title> <link rel="stylesheet" href="test.css"> </head> <body> <div id="container"> <h1>人気果物ベスト３</h1> <h2>list-style-type:none</h2> <ul class="none"> <li>りんご</li> <li>みかん</li> <li>メロン</li> </ul> <h2>list-style-type:disc</h2> <ul class="disc"> <li>りんご</li> <li>みかん</li> <li>メロン</li> </ul> <h2>list-style-type:circle</h2> <ul class="circle"> <li>りんご</li> <li>みかん</li> <li>メロン</li> </ul> <h2>list-style-type:square</h2> <ul class="square"> <li>りんご</li> <li>みかん</li> <li>メロン</li> </ul> <h2>list-style-type:lower-roman</h2> <ul class="lower-roman"> <li>りんご</li> <li>みかん</li> <li>メロン</li> </ul> <h2>list-style-type:upper-roman</h2> <ul class="upper-roman"> <li>りんご</li> <li>みかん</li> <li>メロン</li> </ul> <h2>list-style-type:decimal</h2> <ul class="decimal"> <li>りんご</li> <li>みかん</li> <li>メロン</li> </ul> <h2>list-style-type:decimal-leading-zero</h2> <ul class="decimal-leading-zero"> <li>りんご</li> <li>みかん</li> <li>メロン</li> </ul> <h2>list-style-type:lower-alpha</h2> <ul class="lower-alpha"> <li>りんご</li> <li>みかん</li> <li>メロン</li> </ul> <h2>list-style-type:upper-alpha</h2> <ul class="upper-alpha"> <li>りんご</li> <li>みかん</li> <li>メロン</li> </ul> <h2>list-style-type:cjk-ideographic</h2> <ul class="cjk-ideographic"> <li>りんご</li> <li>みかん</li> <li>メロン</li> </ul> </div> </body> </html> |