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

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

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

今回の記事では、CSSでマーカー(リストの先頭の記号や数字)を設定するlist-styleについて解説します。

HTMLのリストを利用する際に、先頭に●や■などの記号や数字を表示したい場合があるでしょう。

そんな時はlist-styleを使って表示するのが最適です。

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

 

目次

 

【動画の解説はこちら!】

 

田島悠介

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

大石ゆかり

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

田島悠介

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

大石ゆかり

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

 

list-styleとは

list-styleとは、マーカーを設定するプロパティです。

マーカーは、リスト内の各項目の先頭に表示される●や■のような記号です。

●や■のような記号の他に、数字やアルファベットなども指定できます。

li_t_p_1

また、画像をリストマーカー(リスト項目の先頭記号)に使用することも可能です。

list-styleを指定しておくことで、自動で画像付きリストマーカーを先頭に表示できます。

 

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

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と入力した場合は○が表示されます。

 

連番を使用する場合の例

以下を入力した場合リストの最初から1,2,3…と順番に表示されます。

list-style-type: decimal;

decimalの部分にlower-alphaと入力した場合はアルファベット小文字、hiraganaと入力した場合はひらがなが順番で表示されます。

他にも漢数字やギリシア文字等での表記が可能です。

表記の指定方法の詳細は以下のURLを参照してください。

list-style-type:MDN

 

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は画像を使う場合に使用するんだ。次はそれぞれの種類のマーカーを適用した場合の例を実際に見てみよう。

 

実際に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-style-typeを利用して、リスト項目の先頭にリストマーカーを表示させます。

記号の場合の例

list-style-typeでcircle(白い丸)を設定します。

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

白い丸が表示されます。

li_t_p_2

 

連番の場合の例

list-style-typeでlower-alpha(小文字アルファベットの連番)を設定します。

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に慣れていないという人でも使えます。

list-style-typeとlist-type-imageである2つのプロパティを理解することで、デザイン性を考慮したリストを作成できるので覚えておきましょう。

執筆してくれたメンター

メンターSS

文系・未経験でIT企業に就職して、9年目。

環境構築から開発・設計・テストまで何でも屋さんをやっていました。

テックアカデミーではJavaコースを担当しています。

 

田島悠介

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

大石ゆかり

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

田島悠介

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

大石ゆかり

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

 

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