リストの装飾

<li>タグはList Itemの略で、リストの項目に使用します。
リスト表示したい項目に<li>タグをつけて<ul>～</ul> または<ol>～</ol>の間に記述します。
<ul>（Unordered List）リスト項目（・）
<ol>（Ordered List）リスト項目（1、2、3、・・・）

ul　指定なし（初期設定）

HTML

<ul>
<li>リンゴ</li>
<li>バナナ</li>
<li>イチゴ</li>
</ul>

ul　リストマーカーの種類「list-style-type」

HTML

<ul style="list-style-type: square">
<li>リンゴ</li>
<li>バナナ</li>
<li>イチゴ</li>
</ul>

none／リストマーカー非表示(Hide)
disk／●
circle／〇
square／■


ul　画像を使う「list-style-image」

HTML

<ul class="panda">
<li>リンゴ</li>
<li>バナナ</li>
<li>イチゴ</li>
</ul>

CSS

.panda {
list-style-image: url("panda.gif");
}

panda.gifダウンロード 

ul　サンプル1　背景を入れる

HTML

<ul class="sample1">
<li>リンゴ</li>
<li>バナナ</li>
<li>イチゴ</li>
</ul>

CSS

ul.sample1 {
padding: 1em 1em 1em 3em;
background: #e3f6f5;
border-radius: 10px;
}

ul　サンプル2　丸をカラーにする

HTML

<ul class="sample2">
<li>リンゴ</li>
<li>バナナ</li>
<li>イチゴ</li>
</ul>

CSS

ul.sample2 li {
position: relative;
list-style-type: none;
}
ul.sample2 li::after {
display: block;
content: '';
position: absolute;
top: .5em;
left: -1em;
width: 6px;
height: 6px;
background-color:hotpink;
border-radius: 100%;
}

ul　サンプル3　チェックマーク

HTML

<ul class="sample3">
<li>リンゴ</li>
<li>バナナ</li>
<li>イチゴ</li>
</ul>

CSS

ul.sample3 li {
position: relative;
list-style-type: none;
}
ul.sample3 li::after {
display: block;
content: '';
position: absolute;
top: .5em;
left: -1em;
width: 8px;
height: 3px;
border-left: 2px solid #3498db;
border-bottom: 2px solid #3498db;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}

ul　サンプル4　ラインを入れる

HTML

<ul class="sample4">
<li>リンゴ</li>
<li>バナナ</li>
<li>イチゴ</li>
</ul>

CSS

ul.sample4 li{
padding:5px 10px;
border-bottom:1px solid #84b2e0;
list-style-position:inside;

ol　指定なし（初期設定）

  1. リンゴ
  2. バナナ
  3. イチゴ

HTML

<ol>
<li>リンゴ</li>
<li>バナナ</li>
<li>イチゴ</li>
</ol>

ol　リストマーカーの種類「list-style-type」

  1. リンゴ
  2. バナナ
  3. イチゴ

HTML

<ol style="list-style-type: upper-roman">
<li>リンゴ</li>
<li>バナナ</li>
<li>イチゴ</li>
</ol>

lower-roman／小文字のローマ数字
upper-roman／大文字のローマ数字
cjk-ideographic／漢数字
katakana／カタカナ
hiragana／ひらがな
lower-alpha／小文字のアルファベット
upper-alpha／大文字のアルファベット

ol　サンプル1　丸囲み数字

  1. リンゴ
  2. バナナ
  3. イチゴ

HTML

<ol class="mihon1">
<li>リンゴ</li>
<li>バナナ</li>
<li>イチゴ</li>
</ol>

CSS

ol.mihon1 {
counter-reset:cp_clist;
list-style-type: none;
padding:0.5em;
}
ol.mihon1 li {
position: relative;
padding-left: 30px;
padding: 0.5em 0.5em 0.5em 35px;
}
ol.mihon1 li::before {
position: absolute;
display:inline-block;
top: 50%;
left: 0;
counter-increment: cp_clist;
content: counter(cp_clist);
padding: 0 0.1em 0 0.1em;
background: #F4511E;
color: #fff;
font-weight:bold;
border-radius: 50%;
width: 25px;
height: 25px;
line-height: 25px;
text-align:center;
transform: translateY(-50%);
}

参考ページ「ボタン、リストデザイン」