liguofeng29’s blog

個人勉強用ブログだっす。

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>

f:id:liguofeng29:20160205000043p:plain

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>

f:id:liguofeng29:20160205000557p:plain