CSS3.0の各種修飾 - リスト関連
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> list-style </title> <style type="text/css"> li { background-color: #aaa; } </style> </head> <body> イメージを使用する <ul style="list-style-image:url(hana.gif);"> <li>列1-1</li> <li>列1-2</li> <li>列1-3</li> <li>列1-4</li> </ul> ローマ数字を使用する <ol style="list-style-type:upper-roman;"> <li>列1-1</li> <li>列1-2</li> <li>列1-3</li> <li>列1-4</li> </ol> ひらがなを使用し、要素内に表示 <ol style="list-style-type:hiragana; list-style-position:inside;"> <li>列1-1</li> <li>列1-2</li> <li>列1-3</li> <li>列1-4</li> </ol> </body> </html>
display:list-itemを使い、divをリストとして表示する。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> display:list-item </title> <style type="text/css"> div>div{ background-color: #aaa; display:list-item; list-style-image:url(hana.gif); list-style-position:inside; } </style> </head> <body> divをリストとして表示する <div> <div>列1-1</div> <div>列1-2</div> <div>列1-3</div> <div>列1-4</div> </div> </body> </html>