リストマークの表示を簡単に指定する「list-style」を解説

今回は、リストの形式を設定するプロパティ「list-style」のお話をします。

箇条書きで表示したいときにリストの形式がよく使われます。リスト項目の頭に付ける「リストマーク」には様々な種類があり、表示の仕方を指定することができます。

その分コードが複雑そう・・・

と心配する必要はありません。list-styleプロパティを使えば、短いコードで一括で指定することができます。

今回は、list-style

・基本的な使い方
・複数の値を一括で指定する方法

について説明します。

list-styleとは

list-styleの読み方

list-styleは、「リストスタイル」と読みます。リストには様々な種類や形式がありますが、用途に合わせてスタイルを設定するイメージです。

list-styleの説明

list-styleは、リストマークの種類や表示位置を指定するプロパティです。 list-style-type、 list-style-image、 list-style-positionの1~3つの値を一括で指定することができます。

書式は次のようになります。

list-style:[list-style-type] [list-style-image] [list-style-position];

プロパティの指定順は任意になります。また、各プロパティの記述は省略することが可能です。それぞれのプロパティの値のみを記述すると適用することができます。

list-styleで利用できる値

list-styleでは以下の値を使うことができます。

説明
list-style-type リストマークの種類を指定します。
list-style-image イメージ画像をリストマークに指定します。
list-style-position リストマークを表示する位置を指定します。
none リストマークを指定しません。
注意
list-style-type、list-style-image、list-style-positionを指定する場合は、各プロパティの値を参照してください。

対応ブラウザ

対応ブラウザは以下の通りです。

PC用ブラウザ 対応状況
Chrome 完全対応
Edge 完全対応
Firefox  完全対応
nternet Explorer  完全対応
Opera  完全対応
Safari  完全対応
スマートフォン用ブラウザ 対応状況
Android webview  完全対応
Android版Chrome  完全対応
Android版Firefox  完全対応
Android 版 Opera  完全対応
iOS版Safari  完全対応
Samsung Internet  完全対応

list-styleの基本的な使い方

リストマークの種類を指定する

リストマークの種類を指定する場合は、list-style-typeプロパティの値を指定します。

ulのリストマークを指定する

まず、以下のHTMLを記述して、ulのリストを表示させます。

 

このように、初期値では黒い円のリストマークが表示されます。

ulタグにlist-style:circleを指定すると、白い円のリストマークを表示することができます。

list-style:squareを指定すると、四角のリストマークを表示することができます。

olのリストマークを指定する

olのリストマークは、様々な数字や文字に指定することができます。その中から、漢数字とアルファベットを例に挙げて紹介します。

以下のHTMLを記述して、olのリストを表示させます。

初期値では1,2,3・・・というように、数字のリストマークが表示されます。

olタグにlist-style-type:cjk-ideographic;を指定すると、リストマークの数字を漢数字で表示することができます。

一、二、三・・・と漢数字で表示されました。

list-style-type:upper-latin;を指定すると、リストマークをアルファベットで表示することができます。

このように、大文字のアルファベットでA,B,C・・・と表示することができました。

画像をリストマークに指定する

画像をリストマークに指定する場合は、list-style-imageプロパティの値を指定します。

list-style:ur1(   );の( )内にイメージ画像を指定するとリストマークに表示されます。

リストマークがイメージ画像で表示されました。

リストマークの位置を指定する

リストマークの位置を指定する場合は、list-style-positionプロパティの値を指定します。

list-style: inside;を指定すると、リストマークがリストボックスの内側に表示されます。

list-style: outside;を指定すると、リストマークがリストボックスの外側に表示されます。

複数の値を一括で指定する

list-styleプロパティでは、list-style-type、 list-style-image、 list-style-positionの値を複数指定して、一括で適応することができます。list-style-typeと list-style-imageが同時に設定された場合、list-style-typeは画像が表示できない場合に予備として表示されます。

まず、list-style-typeとlist-style-positionを一括で指定していきます。リストマークを四角に表示するsquare、内側に表示するinsideを指定します。

このように、2つの値を一括で適応することができました。

次に、list-style-imageとlist-style-positionを一括で指定します。リストマークのイメージ画像と、内側に表示するinsideを指定します。

イメージ画像がリストマークになり、外側に表示されました。

まとめ

いかがでしたか?list-styleを使うと、リストマークの表示や位置を簡単に指定することができます。用途に合わせて活用してみてください。

参考文献:https://developer.mozilla.org/ja/docs/Web/CSS/list-style

https://developer.mozilla.org/ja/docs/Web/CSS/list-style-type

https://developer.mozilla.org/ja/docs/Web/CSS/list-style-image

https://developer.mozilla.org/ja/docs/Web/CSS/list-style-position