箇条書きリスト(ul、ol、li)をおしゃれにするCSSスニペット9選。黒丸マークや番号も美しく！
スタイリッシュなデザインの箇条書きリスト(ul、ol、liタグ)のCSSサンプルをまとめました。
デザインが美しいウェブサイト・ブログが増えています。フォーム周りのデザインも趣向を凝らしたものが多く見受けられるようになりました。目を引くデザインは利用者の興味を引き付けます。
箇条書きリストは並列項目等の情報を整理してわかりやすく表示できる部品であり利用する機会も多いです。上手く使えば文章の読みやすさが一段階上昇します。
本記事ではフォームの中でも「箇条書きリスト(ul、ol、liタグ)」に焦点を当て、おしゃれなCSSスニペットを一覧にしてみました。
箇条書きリストの基本デザイン。シンプルでわかりやすいCSSデザイン例。
基本的な箇条書きリストデザイン その①
See the Pen
CSS color of UL/OL list bullets and numbers by Andreas Nylin (@andreasnylin)
on CodePen.
CSSのみで実装されたシンプルな箇条書きリストのサンプルです。単純な黒丸、番号、下の方にはよくある記号を使用したサンプルがあります。
箇条書きリストを文章内で利用するようなケースの場合、リストの装飾を派手にしてしまうと箇条書き部分が目立ちすぎてしまう欠点があります。文章全体を読みやすくするためには、本サンプルのようにシンプルなものに留めておく方が良い場合もあります。
基本的な箇条書きリストデザイン その②
See the Pen
Custom bullets using CSS by Justin Brown (@hajududat)
on CodePen.
こちらはulの箇条書きを様々な記号に置き換えたサンプルです。
記号をCSSで作る場合は、まず文章全体や見出しや箇条書きリストの文章部分の文字フォントやフォントサイズを決めてからデザインを考えましょう。
スタイリッシュなデザインの箇条書きリストCSSサンプル
大きな黒丸が見出しも兼ねる箇条書きリスト
See the Pen
Bubble List (OL) by Travis Maynard (@travm)
on CodePen.
olリストの番号部分を、大きな黒丸で囲ったサンプルです。
大きいですが配色がシンプルな黒ですので、目立ちすぎることもなく文章部分のサイズ感ともマッチしています。箇条書きリストを見出しも兼ねて使いたい場合は、このようなデザイン構成が向いています。
動きを持つ箇条書きリスト
See the Pen
Custom Bullet Points by Kieran Hunter (@kieranfivestars)
on CodePen.
こちらの箇条書きリストサンプルはマウスでホバーすると、記号部分の色が変わる動きを持っています。
記号部分のデザインや作りはシンプルなのですが、背景色との配色の親和性が抜群で非常にスタイリッシュですね。
デザイン性にこだわった箇条書きリスト
See the Pen
Styles For Ordered List Item Numbers by Paul Murphy (@88paulmurphy)
on CodePen.
CIRCLED、BOXED、RIGHT-ALIGNED、PILLSの4パターンのサンプルが掲載されています。
非常にデザイン性にこだわったサンプルでカッコイイですね。文章内で使うよりも、見出し付きのボックス部分とセットで使って、WEBコンテンツの部品のように使うと良さそうです。
例えばブログ等で冒頭で要点を解説したい場合などに使うと目立って良いでしょう。
カラフルに色が変わる箇条書きリスト
See the Pen
CSS Gradient Counter List by Mattia Astorino (@equinusocio)
on CodePen.
箇条書きリストの番号部分の色がカラフルに変化して推移します。
配色的に使いどころが難しいところはありますが、面白いアイデアのサンプルですね。
アニメーションする箇条書きリスト
See the Pen
Custom Bullets with SVG Data URIs by EnitsirkV (@tinvalerio)
on CodePen.
マウスでホバーすると、箇条書きリストのマーク部分がアニメーションします。
実用性は低いかもしれませんが、アニメーションが楽しいサンプルです。もし使う場合は文章部分の位置が少しずれてしまっているので調整して使った方が良いです。
遊び心満載！面白過ぎる箇条書きリストのデザインサンプル
アニメーションで削除される箇条書きリスト
See the Pen
Slice list items by Aaron Iker (@aaroniker)
on CodePen.
箇条書きリストに削除ボタンを付けてみたサンプルです。
×ボタンを押してみてください。削除時のアニメーションの動きが非常に面白いです。
アイコンはsvgをつかっています。ulリストは実はこのような使い方もできるんですね。
動き続ける箇条書きリスト
See the Pen
Bubble Sorting – Simply Visualised by Colin (@demaine)
on CodePen.
ulリストをアニメーションさせて、上下に動かしているサンプルです。
実際に使う場面は無さそうですが、アニメーションが見ていて楽しいですね。
ウェブサイトのフォームをおしゃれにするCSSスニペットシリーズ記事一覧
フォームの各入力要素のスニペットはシリーズ記事化していますので、こちらの記事も参考にしてください。
https://kodocode.net/design-css-textbox/
