CSSでlist-style-type部分だけ大きくしたい

CSSでlist-style-type部分だけ大きくしたい

CSSでHTMLのリストマーカー部分のフォントを変更したい。


グーグル先生で検索すると、イメージを使う方法などが検索結果に引っかかりますが、いちいちイメージファイルを用意するのは面倒です。

そこで、CSSだけを使ってこれをなんとかしてみましょう。

基本的な例

次のような例で試してみましょう。
なおここではolになっていますが、ulでも見た目上はまったく同じ結果になります。


HTML

<ol>
<li>あいうえお</li>
<li>かきくけこ</li>
<li>さしすせそ</li>
<li>たちつてと</li>
</ol>

このhtmlだけを表示しても、番号部分と「あいうえお」というリストの内容部分は同じフォントサイズが適用されてしまい、番号だけを大きく見せたり、逆に番号だけを小さく見せたりと言ったことはできません。

そこで以下のcssを追加します。

CSS

ol{
    counter-reset: li;
    padding-left: 16px;
    margin-left: 16px;
    list-style: none;
}
ol li{
   position: relative;
   margin: 3px 5px 6px 10px;
   padding: 2px 8px;
}
ol li:before {
    counter-increment: li;
    content: counter(li);
    position: absolute;
    font-size: 20px;
    top: -1px;
    left: -20px;
    width: 1.6em;
    text-align: center;
}

これで以下の表示となります。

リストの番号だけフォントが大きくなってますね。





olのcounter-reset:li;で数字を1からに設定しておき、さらにli:beforeの部分で数字の表示内容を決めています。

逆に数値部分を小さく見せたい場合には、font-sizeを小さくした上で、topやleftなどを調整すれば変更できます。

なおこの例では結果をわかりやすく見せるために番号を大きくしたため行間が広めになっていますが、これもol liのmarginやpaddingを変更することで調整できます。




これをさらに加工することで、特徴のあるリストへと変更することもできます。

以下に応用例を2つ紹介します。

応用例1

番号をグレーの四角背景で囲んでみました。
背景部分の横幅はwidthで決まります。




応用例1の変更CSS　※ol li:beforeを下記に変更します。

ol li:before {
    counter-increment: li;
    content: counter(li);
    position: absolute;
    font-size: 20px;
    top: -1px;
    left: -1.4em;
    width: 1.6em;
    text-align: center;
    color: #FFF;
    background: #BBB;
    font-weight: bold;
    font-family: Helvetica, Arial, sans-serif;
    text-shadow: #777 1px 1px 3px;
}

応用例2

番号を小さめにした上で、丸に白抜きの番号にしてみました。





応用例2の変更・追加CSS　※ol li:beforeを下記に変更します。

ol li:before {
    counter-increment: li;
    content: counter(li);
    position: absolute;
    font-size: 15px;
    top: 0px;
    left: -1.4em;
    width: 1.2em;
    text-align: center;
    color: #FFF;
    background: #BBB;
    font-weight: bold;
    font-family: Helvetica, Arial, sans-serif;
    box-shadow: -1px 1px 5px #555;
    border-radius: 10px;
}

かなり印象が変わりますね。

みなさんもいろいろ試してみてください。