コピペで使えるリストデザイン34選：CSSで箇条書きをおしゃれに

今回はul/ol/liを使った箇条書き（リスト）のデザイン例を紹介します。どれも画像は必要なく、CSSだけで作ることができます。メニューリストとして使っても、記事内でポイントをまとめるときに使っても良いでしょう。それぞれCSSコードを載せていますので、コピペしてご自由にお使いください。

[yumeyumepopi0718]

css デザイン　装飾

[areyoukicking]

“ul { padding: 0; } ul li, ol li { color: #404040; border-left: solid 6px #1fa67a;/*左側の線*/ border-bottom: solid 2px #dadada;/*下に灰色線*/ background: whitesmoke; margin-bottom: 5px;/*下のバーとの余白*/ line-height: 1.5; padding: 0.5em; list-style-type: none!important;/*ポチ

[miraesu]

CSSでカスタマイズ

[mio_tukushi]

参考にしてトライしてみる。わたしは猿以下の可能性もある。

[favorite358]

囲み線はいつも参考にさせていただいていて、とても助かっています。今回箇条書きもコピペしてみたところ、ナビゲーションバーまで変わってしまいました。対処法を教えていただくことはできないでしょうか？

[ta87523]

参考にさせていただきますヾ(*・ω・)ﾉ

[lightning2014]

箇条書きに特化したCSS。便利で助かります

[mtblue7010]

まじたすかる φ(．_．)ﾒﾓﾒﾓ

[korokorohouse]

CSS　コピペ　おしゃれなリスト

[kosodateiruka]

絶対使う

[tsukuruiroiro]

オシャレなリストデザイン集です。