Embedded Files
リスト(list)のマーカースタイル
リスト(list)のマーカースタイル
リストとは、箇条書きのこと。
一見箇条書きでないテキストでも<ul><li>タグでリストとして扱われていることが沢山あります。
とりあえず<ul><li>タグのスタイルについて解説しま～す。
リストのマーカー（点など）スタイル
list-style-type: disc
値：disc, circle, square, decimal,
lower-roman, upper-roman,
lower-alpha, upper-alpha, none
例1
<style>
.disk {
list-style-type: disc
}
</style>
<body>
<ul class="disk">
<li>discです</li>
<li>黒丸です</li>
</ul>
</body>
例2
<style>
#circle{
list-style-type: circle
}
#square {
list-style-type: square
}
</style>
<body>
<ul>
<li class="circle">白丸です</li>
<li class="square">四角です</li>
</ul>
</body>
リストのマーカースタイルは
<ul>タグ、<li>タグの
どちらにも設定できます。
ｕｌにつけると
<ul></ul>の中の<li>タグすべてに
同じスタイルが設定されます。
（例１）
ｌｉタグにつけると
個別にスタイルを設定できます。
（例２）
<UL>
<LI>リスト</LI>
<LI>リスト</LI>
</UL>
disc： 黒丸
circle： 白丸
square： 四角
decimal： 数字
lower-roman： 小文字ローマ
upper-roman： 大文字ローマ
lower-alpha： 小文字アルファベット
upper-alpha： 大文字アルファベット
none： なし
左欄の例のソースを書くと ↓
<head>
<STYLE type="text/css">
.dc { list-style-type: decimal } /* 数字 */
.lr { list-style-type: lower-roman } /* 小ﾛｰﾏ数字 */
.ur { list-style-type: upper-roman } /* 大ﾛｰﾏ数字 */
.la { list-style-type: lower-alpha } /* 小ｱﾙﾌｧﾍﾞｯﾄ */
.ua { list-style-type: upper-alpha } /* 大ｱﾙﾌｧﾍﾞｯﾄ */
.nn { list-style-type: none } /* ﾏｰｸなし */
</STYLE>
</head>
<body>
<ul class="dc">
<li>decimalです</li>
<li>数字</li>
</ul>
<ul class="lr">
<li>lower-romanです</li>
<li>小文字ローマ数字</li>
</ul>
<ul class="ur">
<li>upper-romanです</li>
<li>大文字ローマ数字</li>
</ul>
<ul class="la">
<li>lower-alphaです</li>
<li>小文字ｱﾙﾌｧﾍﾞｯﾄ</li>
</ul>
<ul class="ua">
<li>upper-alphaです</li>
<li>大文字ｱﾙﾌｧﾍﾞｯﾄ</li>
</ul>
<ul class="nn">
<li>noneです</li>
<li>マークなし</li>
</ul>
</body>
右欄のソースを書くと ↓
各マーカーの例 ↑
（このスタイル、GoogleSiteでは
数字と白丸以外適用不可
だったので画像貼付で・・・）
Page updated
Google Sites
Report abuse