CSSでリストをスタイリングする方法
リストのスタイリングが少し違うだけでかなりおしゃれに見えたり、独自性を出すことができます。
CSSでリストをスタイリングする方法をみていきましょう。
CSSでリストをスタイリングする方法
リストをスタイリングするときに特によく使われるプロパティは以下の通りです。- list-style-type
- list-style-position
- list-style-image
<ul>
<li>リストのサンプル文</li>
<li>リストのサンプル文</li>
<li>リストのサンプル文</li>
</ul>
<ol>
<li>リストのサンプル文</li>
<li>リストのサンプル文</li>
<li>リストのサンプル文</li>
</ol>ul {
list-style-type: circle;
list-style-position: inside;
list-style-image: url(../img/icon.png);
}
ol {
/* list-style-type: lower-alpha; */
list-style-type: none;
}一括指定プロパティでリストを指定する方法
まとめて指定できるプロパティのことを一括指定プロパティと呼びます。 たとえば、list-styleプロパティでは、上で紹介したプロパティを一括で指定することができます。<ul>
<li>リストのサンプル文</li>
<li>リストのサンプル文</li>
<li>リストのサンプル文</li>
</ul>
<ol>
<li>リストのサンプル文</li>
<li>リストのサンプル文</li>
<li>リストのサンプル文</li>
</ol>ul {
/* list-style-type: circle;
list-style-position: inside;
list-style-image: url(../img/icon.png); */
list-style: circle inside url(../img/icon.png);
}
ol {
list-style-type: lower-alpha;
list-style: inside;
/* list-style-type: none; */
}