【CSS】おしゃれなHTMLリストデザイン8選。ありきたりな一覧に飽きたらコレ！

HTMLでリストを作るための<ul>や<ol>といったタグは、Webデザインの世界では大昔から存在し、今でも使われ続けています。

こうしたリストは凡庸に思われがちですが、才能あるWebデザイナーの手にかかればユニークな作品に仕上げることも可能です。

今回はWebデザイナーが、工夫を凝らして作ったクリエイティブなリストを8つ、おまけつきでご紹介します。

1. グラデーションつきのリスト

See the Pen Gradient Ordered List by Erin E. Sullivan (@erinesullivan) on CodePen.

長いリストにおける課題は、なんといっても各項目を目立たせることです。この例では、太字のフォントとグラデーションをつけた背景によって、リストが美しく彩られています。

またCSSのbox-shadowで、リストに深みをつけているところもポイントです。魅力的で読みやすいデザインですね。

2. デザインがレスポンシブに変化するリスト

See the Pen Responsive Comma List by John Graham (@RobotsPlay) on CodePen.

Webページを延々とスクロールするのが好きな人もいますが、一般的にはコンパクトにまとまった情報が好まれます。

この例では、PCなどの大きな画面では何列かに分かれたリストが表示されますが、モバイルデバイスではコンマで区切られたデザインに変化します。

3. スタイリッシュなモノクロのリスト

See the Pen custom ordered list bullets by Dimitri Denis (@dimilo) on CodePen.

リストの種類ごとにデザインを変えるのが面倒なら、この例を参考にしてみましょう。

さまざまな種類のリストに、統一感のあるモノクロのデザインを採用しています。幅広く活用できそうな、スタイリッシュなデザインです。

4. 立体的に動くリスト

See the Pen 3D List expansion by Andrew Canham (@candroo) on CodePen.

ここまでにご紹介した例はシンプルなものが多かったですが、こちらは豪華なアニメーションのついた、目をひくデザインです。

SVGとJavaScriptを組み合わせて、リストをスムーズに動かしています。プレゼンテーションや、ランディングページにも応用できそうですね。

5. シンプルなタイムラインリスト

See the Pen Simple timeline from an unordered list by Lazy Jones (@lazy) on CodePen.

Webデザインをしていると、ついついプロセスを複雑にしてしまいがちです。しかし、タイムラインには派手なスクリプトは必要ありません。

基本的なタイムラインに必要なのは、シンプルな番号なしリストだけ。さらにCSSの疑似要素を使って線を追加すれば、全体を結び付けられます。

6. シンプルな階層化リスト

See the Pen Resetting list counters by Mark (@xmark) on CodePen.

場合によってリストは、階層化が必要になることもあります。

この例ではCSSのcounter-resetを使って、リストを階層化しているようです。4階層まで対応しています。

7. おしゃれな階層リスト

See the Pen Styled List Counters by Chris Coyier (@chriscoyier) on CodePen.

こちらもさきほどの例とおなじく、階層化機能をそなえたリストです。

CSSを使って数字の背景色を変化させているため、ひと目で階層を見分けられます。

8. CSS Gridを使ったリスト

See the Pen Ridiculously responsive lists with CSS Grid by Raúl R Pearson (@raulrpearson) on CodePen.

レスポンシブなリストを作りたいなら、CSS Gridを使うのがおすすめ。

大きな画面ではリストが複数の列に分割され、小さな画面ではひとつの列に折りたたまれます。

おまけ：さまざまなデザインのリスト一覧

See the Pen list style – Ol and ul style by WILDER TAYPE (@wilder_taype) on CodePen.

CSSには、じつはさまざまな種類のリストが標準で用意されています。こうしたリストを一覧で見てみたいなら、このスニペットが参考になるはず。

従来の箇条書きだけでなく、画像やFont Awesomeのアイコンも使用されています。

おわりに

HTMLリストはWebデザインに不可欠な存在ですが、おしゃれさとは無縁だと思われがちです。

リストを使う際には、ほんの少しCSSやJavaScriptを使ってみましょう。工夫次第で、スタイリッシュなリストを実装できますよ。

（原文：Eric Karkovack　翻訳：Nakajima Asuka）