スライドショー

CSSでリストを素敵にするlist-styleの使い方+もっと自由な作り方

こんにちは!ライターのナナミです。

リストって便利ですよね。箇条書きを見せる際には欠かせない見栄えです。

そんなリストの見栄えを変更したい…
頭につけるアイコンを変えたい…

ということも、よくあるのではないでしょうか?今回はそんなお悩みを解決していきましょう!リストの見栄えを調整するlist-styleについて解説します。

この記事は下記の流れで進めていきます。

  • 【基礎】list-styleとは何か
  • 【基礎】list-styleの使い方
  • 【発展】擬似要素でもっと自由なデザイン
  • 【発展】コピペで使えるデザイン例

リストの見栄えが変えられると、デザインの幅が広がりますね!list-styleよりも自由に作れる手法も紹介していきますので、ぜひ覚えていってください。

list-styleとは?

<ul>タグ<ol>タグなどのリスト用HTMLを使うと、下記のように頭に点や数字がつきますよね。

list1

この頭につく部分を調整できるのが、list-styleというプロパティです。

list-styleを使えば、点を四角に、数字をローマ数字になど、色々な見栄えに変更することができます。

list2

オールド、カレントを問わず、どのブラウザでも使用できるプロパティです。

そもそも<ul>タグや<ol>タグがわからない…
という方は、下記の記事から見てみましょう!

【HTML入門】ul,ol,li要素でリストを作成してデザインを変える方法
更新日 : 2018年11月30日

list-styleの使い方

では、早速list-styleを使っていきましょう。下記のようにCSSを指定します。

CSS

ul または ol{
    list-style :見栄えの指定;
}

見栄えの指定部分には、どのようなアイコンを頭につけるのかを言葉で指定します。

例えば、頭の点を四角に変える場合は…

list3

HTML

<ul>
    <li>頭に点がついたリストです</li>
    <li>頭に点がついたリストです</li>
    <li>頭に点がついたリストです</li>
    <li>頭に点がついたリストです</li>
    <li>頭に点がついたリストです</li>
</ul>

CSS

ul {
    list-style: square;     /* アイコンの種類指定 */
}

このように指定してあげればOKです。指定できる値は、めちゃくちゃ多いです。

ここで解説すると長くなってしまうので、詳細はリファレンスをご覧ください。
http://www.htmq.com/style/list-style-type.shtml

もっと自由なデザインにする

list-styleでの指定、簡単でとても便利ですね。しかしちょっとした弱点として下記が挙げられます。

  • 頭のアイコンや数字の色を変えられない
  • 自由な形を指定できない

これを解決するのが、擬似要素::beforeを使う方法です。

list4

list-styleよりもちょっと実装がややこしくなりますが、どんな見栄えも自由に指定することができます。画像アイコンを指定するのもこれでOK、かなり幅が広がりますね!

この項目では、下記のHTMLを基本に進めていきますね。

HTML

<ul class="list_test-wrap">
    <li class="list_test">擬似要素で頭のアイコンをつけます</li>
    <li class="list_test">擬似要素で頭のアイコンをつけます</li>
    <li class="list_test">擬似要素で頭のアイコンをつけます</li>
    <li class="list_test">擬似要素で頭のアイコンをつけます</li>
    <li class="list_test">擬似要素で頭のアイコンをつけます</li>
</ul>

では、実装の流れを見てみましょう。

list-styleをnoneにする

まずはいらないもののお掃除からいきましょう。これから擬似要素で頭のアイコンを作るので、既存のアイコンは不要ですね。

list5

list-styleをnoneにして、アイコンを無くしてしまいましょう。

list6

CSS

.list_test-wrap {
    list-style:  none;      /* デフォルトのアイコンを消す */
    margin:  0;             /* デフォルト指定上書き */
    padding: 0;             /* デフォルト指定上書き */
}

擬似要素を作る

アイコンを表示させる土台を作っていきます。

アイコンをつける<li>タグに::beforeを指定して、contentで実体化させましょう。

list6

CSS

.list_test-wrap {
    list-style:  none;      /* デフォルトのアイコンを消す */
    margin:  0;             /* デフォルト指定上書き */
    padding: 0;             /* デフォルト指定上書き */
}

.list_test::before {
    content:  ""; /* 空の要素作成 */
}

擬似要素の作り方がよくわからない…

という方は、まずは下記の記事からチェック!

CSSの擬似要素beforeとafterとは?使い方を徹底解説
更新日 : 2018年11月27日

アイコンの見栄えを指定する

土台ができたら、アイコン自体を設定していきます。

今回はちょっと大きめの赤い丸アイコンにしてみましょう。

list7

CSS

.list_test-wrap {
    list-style:  none;      /* デフォルトのアイコンを消す */
    margin:  0;             /* デフォルト指定上書き */
    padding: 0;             /* デフォルト指定上書き */
}

.list_test:before {
    content:  "";     /* 空の要素作成 */
    width:  10px;               /* 幅指定 */
    height:  10px;              /* 高さ指定 */
    display:  inline-block;     /* インラインブロックにする */
    background-color: #F44336;  /* 背景色指定 */
    border-radius:  50%;        /* 要素を丸くする */
}

角丸をつけられるborder-radiusで丸アイコンを作りました。

border-radiusてなんだっけ…
という方は、下記の記事がおすすめです。

CSSのborder-radiusで要素を角丸にする方法
更新日 : 2018年11月27日

アイコンの位置を調整する

現在の状態でもまあまあいい感じなのですが、場合によっては位置を調整しないとずれている…ということもありますね。

positionを使ってちょこっと調整してあげましょう。

list4

CSS

.list_test-wrap {
    list-style:  none;  /* デフォルトのアイコンを消す */
    margin:  0;         /* デフォルト指定上書き */
    padding: 0;         /* デフォルト指定上書き */
}


.list_test:before {
    content:  "";     /* 空の要素作成 */
    width:  10px;               /* 幅指定 */
    height:  10px;              /* 高さ指定 */
    display:  inline-block;     /* インラインブロックにする */
    background-color: #F44336;  /* 背景色指定 */
    border-radius:  50%;        /* 要素を丸くする */
    position:  relative;        /* 位置調整 */
    top: -1px;                  /* 位置調整 */
    margin-right: 5px;          /* 余白指定 */
}

いい感じになりましたね!

こんな感じで、擬似要素でアイコンを指定することができます。ちょっと手間はかかりますが、自由なデザインにできるのが魅力ですね。

コピペで使えるリストデザイン例

リストのデザインは、発想によって無限の可能性があります。

今回はそんな中から使いやすそうなものをちょこっとピックアップしました。参考にしてみてください。

ポップなリスト

list-ex1

HTML

<ul class="list_test-wrap">
    <li class="list_test">テキストが入ります。テキストが入ります。</li>
    <li class="list_test">テキストが入ります。テキストが入ります。</li>
    <li class="list_test">テキストが入ります。テキストが入ります。</li>
    <li class="list_test">テキストが入ります。テキストが入ります。</li>
    <li class="list_test">テキストが入ります。テキストが入ります。</li>
</ul>

CSS

.list_test-wrap {
    list-style:  none;  /* デフォルトのアイコンを消す */
    margin:  0;         /* デフォルト指定上書き */
    padding: 0;         /* デフォルト指定上書き */
}

.list_test:before {
    content:  "";     /* 空の要素作成 */
    width: 20px;                /* 幅指定 */
    height: 20px;               /* 高さ指定 */
    display:  inline-block;     /* インラインブロックにする */
    background-color: #0074bf;  /* 背景色指定 */
    position:  relative;        /* 位置調整 */
    top: 3px;                   /* 位置指定 */
    border-radius:  50%;        /* 要素を丸くする */
    margin-right: 5px;          /* 余白指定 */
}

.list_test {
    padding:  10px;             /* 余白指定 */
    background-color:  #65ace4; /* 背景色指定 */
    border-radius:  10px;       /* 角丸指定 */
    margin-bottom: 5px;         /* 要素と要素の間指定 */
    color: #fff;                /* 文字色指定 */
    font-size:  20px;           /* 文字サイズ指定 */
}

背景色も使って、ちょっとポップな仕上がりにしてみました。リスト自体を目立たせたい時にもいいかもしれませんね。

画像アイコンを使ったリスト

list-ex2

HTML

<ul class="list_test-wrap">
    <li class="list_test">テキストが入ります。テキストが入ります。</li>
    <li class="list_test">テキストが入ります。テキストが入ります。</li>
    <li class="list_test">テキストが入ります。テキストが入ります。</li>
    <li class="list_test">テキストが入ります。テキストが入ります。</li>
    <li class="list_test">テキストが入ります。テキストが入ります。</li>
</ul>

CSS

.list_test-wrap {
    list-style:  none;  /* デフォルトのアイコンを消す */
    margin:  0;         /* デフォルト指定上書き */
    padding: 0;         /* デフォルト指定上書き */
}

.list_test:before {
    content:  "";                 /* 空の要素作成 */
    width: 40px;                            /* 幅指定 */
    height: 40px;                           /* 高さ指定 */
    display:  inline-block;                 /* インラインブロックにする */
    position:  relative;                    /* アイコンの位置を調整 */
    top: -10px;                             /* アイコンの位置を調整 */
    margin-right: 5px;                      /* 余白指定 */
    background-image:  url(test-icon.png);  /* アイコン指定 */
    background-size:  contain;              /* アイコンの大きさ指定 */
    background-repeat:  no-repeat;          /* アイコンをリピートしないようにする */
    vertical-align: top;                    /* アイコンの位置を調整 */
}

.list_test {
    padding:  10px;                         /* 余白指定 */
    margin-bottom: 5px;                     /* 要素と要素の間指定 */
    font-size:  20px;                       /* 文字サイズ指定 */
}

擬似要素に背景画像をつけて、画像アイコンをつけてみました。画像が使えるとかなーり幅が広がりますね、便利です。

数字だけ色が違うリスト

list-ex3

HTML

<ol class="list_test-wrap">
    <li class="list_test">テキストが入ります。テキストが入ります。</li>
    <li class="list_test">テキストが入ります。テキストが入ります。</li>
    <li class="list_test">テキストが入ります。テキストが入ります。</li>
    <li class="list_test">テキストが入ります。テキストが入ります。</li>
    <li class="list_test">テキストが入ります。テキストが入ります。</li>
</ol>

CSS

.list_test-wrap {
    list-style:  none;          /* デフォルトのアイコンを消す */
    margin:  0;                 /* デフォルト指定上書き */
    padding: 0;                 /* デフォルト指定上書き */
    counter-reset: li_count;    /* カウンタをセット */
}

.list_test {
    padding:  10px;             /* 余白指定 */
    margin-bottom: 5px;         /* 要素と要素の間指定 */
    font-size:  20px;           /* 文字サイズ指定 */
}

.list_test:before  {
  counter-increment: li_count;  /* カウンタの値を計算していく */
  content: counter(li_count)"."; /* 数字出力 */
  color: #F44336;               /* 文字色指定 */
  margin-right: 5px;            /* 余白指定 */
}

数字だけ色を変えたい…
でもいちいち数字を入力するのは…

という時は、CSSで要素の数を数えて、それに対応した数字が入るようにしちゃいましょう。これなら数字の色も変えられるし、HTMLでわざわざ入力しておく必要もありません。

この方法についての詳細は、下記の記事が詳しく説明してくれています。
https://prasm.blog/14859

その他のサンプル

色々なサイトが、とてもたくさんのサンプルを紹介してくれています。ぜひいろんなサイトを見て、自分のイメージ通りのデザインを探してみてください。

コピペで使えるリストデザイン34選:CSSで箇条書きをおしゃれに
https://saruwakakun.com/html-css/reference/ul-ol-li-design

CSSで作るリストデザイン38選!オシャレな箇条書きを実現
https://www.yuu-diaryblog.com/2017/03/14/list-design/

まとめ

いかがでしたか?リストは汎用性が高いからこそ、独自のデザインを使いたくなっちゃうポイントだと思います。

そんな時、この記事がみなさんのお役に立てれば幸いです。どんどん活用して、素敵なWEBサイトを作ってください!

LINEで送る
Pocket

無料でSEからWebエンジニアへ転職しませんか?



侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

ナナミ

ナナミ

1991年生まれ。
文系大学卒業後、フリーターを経てフロントエンジニアになる。
HTML、CSS、 jQueryなどのコーディングやCMS設計に従事。
文系からエンジニアを目指す人にもわかりやすい記事を目指して、日々精進中。
体は日本酒でできている。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説