先頭にマーカーを表示させよう!CSSのlist-styleの使い方【初心者向け】

初心者向けにCSSで書く【list-style】の使い方(リストのマーカー表示)を解説しています。マーカーを表示させることで見栄えもよくなるので、ぜひ利用してみてください。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

CSSで書くlist-styleについて解説している記事になります。

list-styleとはそもそも分からないという方やCSSを始めたばかりという方は参考になるでしょう。

 

なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。

なお、今回の記事の内容は動画でもご覧いただけます。

テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。

 

田島悠介

今回はlist-styleの使い方を練習してみよう。

大石ゆかり

田島メンター!!list-styleは何をするプロパティなんですか~?

田島悠介

リストの先頭に、記号やa,b,c~などのマーカーを追加するものだよ。アルファベットや数字は、自動で順番に表示してくれるようになっているんだ。

大石ゆかり

リスト項目のあるコンテンツの場合必要になりそうですね。お願いします!

 

list-styleとは

list-styleはリスト内の各項目の先頭に表示されるマーカーを設定することができるプロパティです。

マーカーには●や■のような記号の他に、数字やアルファベットなども指定することができます。
また、画像をリストマーカーに使用することも可能です。

li_t_p_1

list-styleを指定しておくことによって、自動でこれらのマーカーがリスト項目の先頭に表示されるようになります。

 

list-styleの書き方

リストマーカーの指定には“list-style-type”“list-style-image”の2つのプロパティがあります。

list-style-type:記号やアルファベットなどをマーカーに指定します。
list-style-image:画像をマーカーに指定します。

list-style-type

list-style-typeは以下の様な形で指定します。

list-style-type: 指定する記号の値;

list-style-typeには●や■などの記号を連続して表示するものと、1,2,3…a,b,c…あ,い,う…のように特定の順番のものを連番で表示するものがあります。

 

記号を使用する場合の例

list-style-type: square;

と入力すると、■の記号が先頭に表示されます。
squareの部分にdiscと入力した場合は●、circleと入力した場合は○が表示されます。

 

連番を使用する場合の例

list-style-type: decimal;

と入力した場合リストの最初から1,2,3…と順番に表示されます。
decimalの部分にlower-alphaと入力した場合はアルファベット小文字、hiraganaと入力した場合はひらがなが順番で表示されます。他にも漢数字やギリシア文字等での表記が可能です。

 

list-style-image

list-style-imageは以下の様な形で指定します。

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

あらかじめマーカー用の画像ファイルをサーバーにアップロードしておき、画像へのパスを入力することでマーカーに指定します。

・画像のパスは絶対パス・相対パスどちらでも可です。
・list-style-typeとlist-style-imageが同時に設定されていた場合、list-style-imageの方が優先されます。

 

田島悠介

list-styleの基本的な書き方になるよ。

大石ゆかり

list-style-typeは値によって、記号になったり順番になったりするんですね。

田島悠介

そしてlist-style-imageは画像を使う場合に使用するんだ。次はそれぞれの種類のマーカーを適用した場合の例を実際に見てみよう。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

実際にlist-styleを書いてみよう

以下のリストにlist-styleを使用します。

(cssとhtmlファイルが同じディレクトリ内にあり、cssのファイル名が”list.css”である場合の例です)

html

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″/>
<link rel=”stylesheet” href=”list.css” type=”text/css”>
</head>
<body>
<ul class=”list1″>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>
</body>
</html>

list-style-type

記号の場合の例

list.css

.list1 {
list-style-type : circle;
}

白い丸が表示されます。

li_t_p_2

 

連番の場合の例

list.css

.list1 {
list-style-type : lower-alpha;
}

小文字のアルファベットが順番で表示されます。

li_t_p_3

 

list-style-image

html・cssと同じディレクトリ内にマーカー用の画像”icon_1.png”がアップロードされている場合の例です。

list.css

.list1 {
list-style-image : url(“icon_1.png”);
}

指定した画像が先頭に表示されます。

li_t_p_4

 

以上、list-styleの使い方について解説しました。よく見やすくするためにリストマーカーは便利です。簡単に設定できるのでCSSに慣れていないという人でも使えるでしょう。

 

田島悠介

ちなみに何も指定していない場合は”disc”、黒丸が表示されるようになっているよ。

大石ゆかり

そういえば普通にリストを作成したときはいつも黒丸が表示されていました。マーカーはこんな風に設定することができたんですね。

田島悠介

画像と記号が同時に指定されている状況では、画像が優先されるということも覚えておこう。

大石ゆかり

了解です。ありがとうございました!

 

[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。