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

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

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

list3

HTML

CSS

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

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

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

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

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

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

list4

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

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

HTML

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

list-styleをnoneにする

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

list5

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

list6

CSS

擬似要素を作る

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

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

list6

CSS

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

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

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

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

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

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

list7

CSS

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

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

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

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

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

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

list4

CSS

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

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

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

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

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

ポップなリスト

list-ex1

HTML

CSS

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

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

list-ex2

HTML

CSS

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

数字だけ色が違うリスト

list-ex3

HTML

CSS

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

という時は、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

最短でエンジニアを目指すなら侍エンジニア塾

cta_under_bnr

侍エンジニア塾は業界で初めてマンツーマンレッスンを始めたプログラミングスクールです。これまでの指導実績は16,000名を超え、未経験から数多くのエンジニアを輩出しています。

あなたの目的に合わせてカリキュラムを作成し、現役エンジニア講師が専属であなたの学習をサポートするため効率よく学習を進めることができますよ。

無理な勧誘などは一切ありません。まずは無料体験レッスンを受講ください。

無料体験レッスンの詳細はこちら

書いた人

ナナミ

ナナミ

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

おすすめコンテンツ

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

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