リスト関連のCSSプロパティのショートハンド

CSS - list-style

概要

CSSプロパティ｢list-style｣は、リストの先頭に対して、中点などのマーカーを指定する際のショートハンドプロパティです。この中では、マーカー文字を指定する list-style-type、マーカー文字に画像を指定する list-style-image、マーカー文字の位置を指定する list-style-position をまとめて指定しています。

また list-style-typeと list-style-image を同時に指定した場合は｢list-style-image｣が優先されます。

<p>好きな動物リストです</p>
<ul>
  <li>ネコ</li>
  <li>犬</li>
  <li>ウサギ</li>
</ul>
<style>
li {
  list-style: square inside;
}
</style>

取りうる値

それぞれの値を指定します。指定しなかった場合はデフォルト値が適用されます。

{ list-style: （list-style-typeの値もしくはlist-style-image値）  list-style-positionの値;}

list-styleに関連のプロパティ一覧

プロパティ名	説明
list-style	マーカーに関する指定をまとめて行うショートハンド
list-style-image	マーカーに画像を指定する
list-style-type	マーカー文字の種類を指定する
list-style-position	マーカー文字の位置を指定する
marker-offset	マーカーとの間隔を指定する

値の解説

各プロパティ詳細についてはそれぞれのページで解説しますが、上記で紹介した例を元に簡単に値についての確認をしておきましょう。指定した値は以下の通りです。

{ list-style: square inside; }

list-style-typeの値について

ここでは｢square｣を指定しています。このプロパティには様々なキーワードが用意されており、マーカー文字が円形や四角などに変化します。キーワードの詳細は list-style-type プロパティページを参照してみてください。

list-style-positionの値について

ここでは｢inside｣を指定しています。マーカー文字の表示位置を内側に指定しています。指定できるキーワードは「outside」か「inside」です。キーワードの詳細は list-style-position ページを参照してみてください。

list-style-imageの値について

使い方は値に表示させたい画像のurlを指定します。注意したいのは、指定した画像はサイズの変更ができません。もし変更したい場合などは背景に画像を指定するCSSプロパティ background-image などを利用します。

<p>好きな動物リストです</p>
<ul>
  <li>ネコ</li>
  <li>犬</li>
  <li>ウサギ</li>
</ul>
<style>
li {
  list-style: url('https://www-creators.com/wp-content/uploads/2017/10/icon_sample_-crown.png') inside;
  }
</style>

使用例

指定には英数字なども使えるので、用途によって使い分けるとよいでしょう。

<p>好きな動物リストです</p>
<ul class="circle">
  <li>ネコ</li>
  <li>犬</li>
  <li>ウサギ</li>
</ul>
<p>好きな科目リストです</p>
<ul class="lower-latin">
  <li>国語</li>
  <li>英語</li>
  <li>数学</li>
</ul>
<style>
.circle > li {
  list-style: circle outside;
}
.lower-latin > li {
  list-style: lower-latin outside;
}
</style>