画像を使わずにCSSで作る、おしゃれなリストデザイン9選+1

はじめに

リストデザインは、画像が少ないページなどでちょっとしたアクセントに使うと、印象がぐっと引き締まります。
デザインや色彩に統一感を出せればさらにおしゃれな感じもUPします。

逆にデザインを過剰にしたり使いすぎたりすると、ごちゃごちゃした印象を与えてしまうので、注意が必要です。シンプルに使えればいいですね。

今回ご紹介するものは、ページによって使い分けできるようクラスを利用しています。
また、レスポンシブに対応するために、widthheight等の単位をremにしています。

ulとolに分けてそれぞれご紹介します。

ulのリストデザイン

短い横線

    ジャ・ジャンクー長編作品1
  • 一瞬の夢 小武 (1997年)
  • プラットホーム 站台 (2000年)
  • 青の稲妻 任逍遥 (2002年)
  • 世界 世界 (2004年)

色は変更可能です。シンプルですが、サイトのメインカラーやアクセントカラーを使ってやると、その部分がいい具合にフォーカスされます。

オリジナルのドット1

    ジャ・ジャンクー長編作品2
  • 長江哀歌 三峽好人 (2006年)
  • 四川のうた 二十四城記 (2008年)
  • 罪の手ざわり 天注定 (2013年)
  • 山河ノスタルジア 山河故人(2015年)

色は変更可能です。これもシンプルですが、控えめなアクセントになるものです。
HTMLは、上の「短い横線」の例の li.line から li.dot1 に変更してやります。

オリジナルのドット2

    ジャ・ジャンクー長編作品1
  • 一瞬の夢 小武 (1997年)
  • プラットホーム 站台 (2000年)
  • 青の稲妻 任逍遥 (2002年)
  • 世界 世界 (2004年)

色は変更可能です。白抜きでさらにシンプルに見えますが、ボーダーに強い色をもってきても違和感なく使えそうです。
HTMLは、上例と同じくliのクラスを li.dot2 に変更してやります。

オリジナルのドット3

    ジャ・ジャンクー長編作品2
  • 長江哀歌 三峽好人 (2006年)
  • 四川のうた 二十四城記 (2008年)
  • 罪の手ざわり 天注定 (2013年)
  • 山河ノスタルジア 山河故人(2015年)

色は変更可能です。ボーダーをダブルにしたもので、それだけでドット2とはまったく印象が違ってきます。
HTMLは、上例と同じくliのクラスを li.dot3 に変更してやります。

矢印に丸い背景

    ジャ・ジャンクー長編作品1
  • 一瞬の夢 小武 (1997年)
  • プラットホーム 站台 (2000年)
  • 青の稲妻 任逍遥 (2002年)
  • 世界 世界 (2004年)

かわいく印象的なリストを作りたいときに。矢印の色も背景色も変更可能です。サイトカラーに合わせてどうぞ。
HTMLは、上例と同じくliのクラスを li.tri-cir に変更してやります。

olのリストデザイン

丸の背景のol

    ジャ・ジャンクー長編作品2
  1. 一瞬の夢 小武 (1997年)
  2. 長江哀歌 三峽好人 (2006年)
  3. 罪の手ざわり 天注定 (2013年)
  4. 山河ノスタルジア 山河故人(2015年)

少し目立たせたい場合にどうでしょうか。フォント色も背景色も変更可能です。

数字に二重線の丸の背景

    ジャ・ジャンクー長編作品2
  1. 一瞬の夢 小武 (1997年)
  2. 長江哀歌 三峽好人 (2006年)
  3. 罪の手ざわり 天注定 (2013年)
  4. 山河ノスタルジア 山河故人(2015年)

HTMLは上の「数字に丸の背景」を参考にしてください。同様に、olのクラスを list2-c2 に、liのクラスを list2-c2-count に変更してやります。

背景の円にちょっとアクセントをつけてli.list2-c2-count::afterborder-radius: 50% 30%;としています。また、円のなかの数字のフォントは、例ではイタリックにしていますが、他に手書きっぽいものにするとか、工夫すると面白くなると思います。

四角の背景のol

    ジャ・ジャンクー長編作品2
  1. 一瞬の夢 小武 (1997年)
  2. プラットホーム 站台 (2000年)
  3. 青の稲妻 任逍遥 (2002年)
  4. 世界 世界 (2004年)

四角くすると丸とはまた違った印象になりますね。フォント色も背景色も変更可能です。
HTMLは、上例の「丸の背景のol」と同じ内容で、olのクラスを list2-s に、liのクラスを list2-s-count に変更してやります。

ひし形の背景のol

    ジャ・ジャンクー長編作品2
  1. 一瞬の夢 小武 (1997年)
  2. 長江哀歌 三峽好人 (2006年)
    • ヴェネツィア国際映画祭・金獅子賞
    • アジア・フィルム・アワード・監督賞
    • ロサンゼルス映画批評家協会賞・外国語映画賞・撮影賞

  3. 罪の手ざわり 天注定 (2013年)
    • カンヌ国際映画祭・脚本賞
    • キネマ旬報外国映画ベストテン・3位

  4. 山河ノスタルジア 山河故人(2015年)

ちょっとエッジを与えたい場合に。ボーダーをつけることでさらにシャープな印象になります。フォント色も背景色もボーダー色も変更可能です。
HTMLは、上例と同じ内容で、olのクラスを list2-d に、liのクラスを list2-d-count に変更してやります。

オマケ:olの数字の書体をイタリックに

  1. 数字赤1
  2. List Design2
  3. List Design3

ちょっと強調したい場合にどうでしょうか。数字の書体をイタリックにするだけでも、ちょっとしたアクセントになります。リスト全体のフォント色も数字のフォント色だけも変更可能です。リスト全体の色(例の場合は赤)を数字だけにつけたい場合は、下のCSSで .list1-r li,li.list1-r-count::after{color:#ea0e00;}li.list1-r-count::after{color:#ea0e00;} に修正します。

おわりに

注意点として、上の例をそのままコピーした場合、もともとのCSSの(line-heightmarginpadding等の)設定次第ではレイアウトが崩れる場合があるかもしれません。その場合は、とくにtopleftの数字を調整してお使いください。

付け足しですが、上の例で出したジャ・ジャンクーというのは現代中国映画の監督で、ぼくのお気に入りのひとりです。映像空間や物語の間の取り方がとても上手で、デザインにも参考になるかもしれません。もしご覧になったことがなければ一度予告編を観てみてくださいな。