コピペでできるリストのデザインサンプル一覧[HTML/CSSのみ]

<ul class="t8-list-1">
    <li>サンプル1</li>
    <li>サンプル2</li>
    <li>サンプル3</li>
</ul>

<ol class="t8-list-2">
    <li>サンプル1</li>
    <li>サンプル2</li>
    <li>サンプル3</li>
</ol>

<ul class="t8-list-2a">
    <li>サンプル1</li>
    <li>サンプル2</li>
    <li>サンプル3</li>
</ul>

.t8-list-2a li{
    list-style-type: none;
}

<ul class="t8-list-3">
    <li>サンプル1</li>
    <li>サンプル2</li>
    <li>サンプル3</li>
</ul>

.t8-list-3 li{
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid #0d6efd;
    list-style-type: none;
    width: 50%;
}

<ul class="t8-list-4">
    <li>サンプル1</li>
    <li>サンプル2</li>
    <li>サンプル3</li>
</ul>

.t8-list-4 li{
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    background: #0d6efd;
    list-style-type: none;
    width: 50%;
}

<ul class="t8-list-5">
    <li>サンプル1</li>
    <li>サンプル2</li>
    <li>サンプル3</li>
</ul>

.t8-list-5{
    list-style-type: upper-alpha;
}

<ul class="t8-list-6">
    <li>サンプル1</li>
    <li>サンプル2</li>
    <li>サンプル3</li>
</ul>

.t8-list-6 li{
    list-style-type: hiragana;
}

<ul class="t8-list-7">
    <li>サンプル1</li>
    <li>サンプル2</li>
    <li>サンプル3</li>
</ul>

.t8-list-7 li{
    list-style-type: hiragana-iroha;
}

<ul class="t8-list-8">
    <li>サンプル1</li>
    <li>サンプル2</li>
    <li>サンプル3</li>
</ul>

.t8-list-8 li{
    list-style-type: none;
}

.t8-list-8 li::before{
    display: inline-block;
    width: 1em;
    height: 1em;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: '\f00c';
    color: #0d6efd;
    margin-right: 0.5em;
}

<ul class="t8-list-9">
    <li>サンプル1</li>
    <li>サンプル2</li>
    <li>サンプル3</li>
</ul>

.t8-list-9 li{
    list-style-type: none;
}

.t8-list-9 li::before{
    display: inline-block;
    width: 1em;
    height: 1em;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: '\f14a';
    color: #0d6efd;
    margin-right: 0.5em;
}

<ul class="t8-list-10">
    <li>サンプル1</li>
    <li>サンプル2</li>
    <li>サンプル3</li>
</ul>

.t8-list-10 li{
    list-style-type: none;
}

.t8-list-10 li::before{
    display: inline-block;
    width: 1em;
    height: 1em;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: '\f0da';
    color: #0d6efd;
    margin-right: 0.5em;
}

<ul class="t8-list-11">
    <li>サンプル1</li>
    <li>サンプル2</li>
    <li>サンプル3</li>
</ul>

.t8-list-11 li{
    list-style-type: none;
}

.t8-list-11 li::before{
    display: inline-block;
    width: 1em;
    height: 1em;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: '\f054';
    color: #0d6efd;
    margin-right: 0.5em;
}

<ul class="t8-list-12">
    <li>サンプル1</li>
    <li>サンプル2</li>
    <li>サンプル3</li>
</ul>

.t8-list-12 li{
    list-style-type: none;
}

.t8-list-12 li::before{
    display: inline-block;
    width: 1em;
    height: 1em;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: '\f138';
    color: #0d6efd;
    margin-right: 0.5em;
}

<ul class="t8-list-13">
    <li>サンプル1</li>
    <li>サンプル2</li>
    <li>サンプル3</li>
</ul>

.t8-list-13 li{
    list-style-type: none;
}

.t8-list-13 li::before{
    display: inline-block;
    width: 1em;
    height: 1em;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: '\f0a4';
    color: #0d6efd;
    margin-right: 0.5em;
}