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

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

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

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

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

 

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

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

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

 

 

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の方が優先されます。

[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に慣れていないという人でも使えるでしょう。

 

CSSを学習中の方へ

これで解説は終了です、お疲れさまでした。

  • つまずかず「効率的に」学びたい
  • 副業や転職後の「現場で使える」知識やスキルを身につけたい

CSSを学習していて、このように思ったことはありませんか?

テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を完全オンラインでしっかり習得できます。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします!