CSSでリストをスタイリングする方法
リストのスタイリングが少し違うだけでかなりおしゃれに見えたり、独自性を出すことができます。
CSSでリストをスタイリングする方法をみていきましょう。
CSSでリストをスタイリングする方法
リストをスタイリングするときに特によく使われるプロパティは以下の通りです。
- list-style-type
- list-style-position
- list-style-image
list-style-typeプロパティは先頭のマークを変更することができます。 また、list-style-positionプロパティでinsideにすれば先頭マークを文章の中の内側に入れることができます。 list-style-imageプロパティで画像を指定することもできます。urlはシングルクオテーションやダブルクオテーションで囲ってあげてもいいし、囲わなくても大丈夫です。
<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; */
}MDNの構文のところに注意事項が書いてあります。
https://developer.mozilla.org/ja/docs/Web/CSS/list-style
list-style プロパティは1～3つのキーワードを任意の順序で指定します。
list-style-type と list-style-image が両方とも設定された場合、 list-style-type は画像が利用できない場合の予備として使用されます。
つまりはimageが優先されるということです。
また、指定していない場合は、初期値が使われます。初期値は、MDNの仕様書の初期値で確認できます。
注意点としては、個別に指定していても、list-styleプロパティを優先度の高いところに書いていれば、初期値で上書きされたりします。
CSSを書くときには、常に優先度を考えて記述しましょう。