Webサイトのメニューリストなどで、HTMLのリストを使うことがあるかと思います。

リストを使うと、先頭に●のリストマーカーが自動でつきますよね。

このマークは、CSSプロパティのlist-styleを使うと変更することができます。

今回は、CSSのlist-styleの使い方を解説していきます。

ぜひ最後まで読んでくださいね！

＼プログラミングスクールを比較／

	DMM WEBCAMP	COACHTECH	RUNTEQ
目指せる姿	WEBエンジニアへの転職	フリーランスエンジニア	WEBエンジニアへの転職
分割払い	○	○	○
補助金	○	×	○
転職保証	○	×	×
受講期間	3ヶ月〜	3ヶ月〜	5ヶ月〜
特徴	【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり	【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当	【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す
料金	329,350円〜 ※給付金適用後	42万9,000円~	55万円
	公式HP	公式HP	公式HP

list-styleを指定するには？

list-styleはリストマーカーを一括で指定できるプロパティです。

具体的には以下のように記述します。

.list {
  list-style: square inside;
}

list-styleは、以下の3つのCSSプロパティをまとめて指定したものです。

それぞれのプロパティについて、どのようなものなのか解説していきましょう。

list-style-typeについて

list-style-typeは、リストマーカーの種類を指定するプロパティです。

以下に選べるマーカーを一部紹介します。

list-style-type: circle;   /* 白丸 */
list-style-type: square;   /* 黒四角 */
list-style-type: decimal;   /* 数字*/

デフォルトのリストマーカーを別のものに変更したいときに使いますね。

list-style-imageについて

list-style-imageは、リストマーカーに画像ファイルを使用したいときに指定するプロパティです。

list-style-image: url("画像のパス");

上記のように、url()の中に画像までのパスを書きます。

list-style-typeとlist-style-imageの両方が指定されていた場合、画像が優先され、画像が読み込めないときに、list-style-typeで設定した表示になります。

list-style-positionについて

list-style-positionは、リストマーカーの表示位置を指定するプロパティです。

値はoutsideとinsideの2つのみで、初期値のoutsideでは要素の外側に表示され、insideで内側に表示されます。

list-style-position: inside;  /* 要素の内側に表示される */

まとめ：CSSのlist-styleを使いこなそう

今回は、CSSのlist-styleを使ったリストマーカーの設定方法を解説してきました。

マーカーに画像ファイルが使えることを知らなかった、という方もいたのではないでしょうか？

ぜひ活用してみてくださいね。今回の記事が参考になれば幸いです。

＼プログラミングスクールを比較／

	DMM WEBCAMP	COACHTECH	RUNTEQ
目指せる姿	WEBエンジニアへの転職	フリーランスエンジニア	WEBエンジニアへの転職
分割払い	○	○	○
補助金	○	×	○
転職保証	○	×	×
受講期間	12週間〜	3ヶ月〜	5ヶ月〜
特徴	【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり	【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当	【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す
料金	329,350円〜 ※給付金適用後	42万9,000円~	55万円
	公式HP	公式HP	公式HP