リストにまつわるお役立ち情報

List Technique Memo

リストを横向きに配置

リストのli要素を横向きに並べます。

例：

その1
その2
その3
その4


                    HTML
                    <ul>
        <li>その1</li>
        <li>その2</li>
        <li>その3</li>
        <li>その4</li>
    </ul>


    CSS
    ul li {
        display: inline-block;
    }

要素をなんでもリストに変換

span要素をdisplay: list-item; でli要素に変換します。

例：

その1

その2

その3

その4


                HTML
    <ul>
        <span>その1</span>
        <span>その2</span>
        <span>その3</span>
        <span>その4</span>
    </ul>


CSS
    ul span {
        display: list-item;
    }

行頭を好きな記号で採番

行頭記号を疑似要素「::before」を使い「*」に置き換えます。

例：

その1
その2
その3
その4


                HTML
    <ul>
        <li>その1</li>
        <li>その2</li>
        <li>その3</li>
        <li>その4</li>
    </ul>


CSS
    ul li {
        list-style: none;
    }

    ul li::before {
        content: '* ';
    }

行頭記号の色や大きさを調整

行頭記号のスタイルを疑似要素「::before」を使い書き換えます。

例：

その1
その2
その3
その4


                HTML
    <ul>
        <li>その1</li>
        <li>その2</li>
        <li>その3</li>
        <li>その4</li>
    </ul>


CSS
    ul li {
        list-style: none;
    }

    ul li::before {
        content: '> ';
        color: #1c757b;
        font-size: 200%;
        font-weight: 900;
    }

クリックしやすいリンク

リンクをリストの文字ではなくリスト自体に張ります。

例：

その1
その2
その3
その4


                HTML
    <ul>
        <li><a href="#i1">その1</a></li>
        <li><a href="#i2">その2</a></li>
        <li><a href="#i3">その3</a></li>
        <li><a href="#i4">その4</a></li>
    </ul>


CSS
    ul li a {
        display: block;
    }

横向きのナビゲーション

１と５を組み合わせると、横向きのナビゲーションを作れます。

例：

その1
その2
その3
その4


                HTML
    <ul>
        <li><a href="#i1">その1</a></li>
        <li><a href="#i2">その2</a></li>
        <li><a href="#i3">その3</a></li>
        <li><a href="#i4">その4</a></li>
    </ul>


CSS
    ul li {
        display: inline-block;
    }

    ul li a {
        display: block;
    }