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

記事内に商品プロモーションが含まれる場合があります

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

予備知識

【HTMLで箇条書き】ul・ol・liタグの使い方まとめ

コピペしたデザインがうまく反映されないときはこちら↓

CSSが効かない・反映されないときの対処法まとめ

1. シンプルなリストデザイン

まずは単純な例から紹介していきます。ほとんどがulとli、olとliのどちらでも使うことができます。

HTMLコード例

この記事で紹介するリスト例はどれも以下のコードを使っています（番号付きの場合はulをそのままolに置き換えます）。

HTML

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>Photoshop</li>
  <li>Illustrator</li>
</ul>

1-1.モノクロ

モノクロでシンプルな箇条書きです。デザインを崩さずにさらっと使うことができるかと思います。

CSS

ul, ol {
  background: #fcfcfc;/*背景色*/
  padding: 0.5em 0.5em 0.5em 2em;/*ボックス内の余白*/
  border: solid 3px gray;/*線の種類 太さ 色*/
}

ul li, ol li {
  line-height: 1.5; /*文の行高*/
  padding: 0.5em 0; /*前後の文との余白*/
}

1-2.爽やか

青の破線で囲み、爽やかな印象を出しました。

CSS

ul, ol {
  color: #668ad8;/*文字色*/
  border: dashed 2px #668ad8;/*破線 太さ 色*/
  background: #f1f8ff; /*背景色*/
  padding: 0.5em 0.5em 0.5em 2em;
}

ul li, ol li {
  line-height: 1.5;
  padding: 0.5em 0;
}

二重線バージョン

borderをdoubleにして線を太めにするとこうなります。

CSS

ul, ol {
  color: #668ad8; 
  border: double 5px #668ad8;/*二重線 太さ 色*/
  background: #f1f8ff; 
  padding: 0.5em 0.5em 0.5em 2em;
}

ul li, ol li {
  line-height: 1.5;
  padding: 0.5em 0;
}

1-3.上下のみボーダー

左右のborderを取ってみました。少しスマートな印象になりますね。上下の線はもう少し太くしても良いでしょう。

CSS

ul, ol {
  color: #1e366a;
  border-top: solid #1e366a 1px;/*上のボーダー*/
  border-bottom: solid #1e366a 1px;/*下のボーダー*/
  padding: 0.5em 0 0.5em 1.5em;
}

ul li, ol li {
  line-height: 1.5;
  padding: 0.5em 0;
}

1-4.クール

1pxのドット線で囲いました。色は自由に変えましょう。

CSS

ul, ol {
  color: #1e366a;
  border: dotted #1e366a 1px;/*ドット 色 太さ*/
  padding: 0.5em 0.5em 0.5em 2em;
}

ul li, ol li {
  line-height: 1.5;
  padding: 0.5em 0;
}

1-5. シャドウボックス

全体に影をつけました。立体感があり、目を引きやすくなるかもしれませんね。

CSS

ul, ol {
  background: #fffcf4;
  border-radius :8px;/*角の丸み*/
  box-shadow :0px 0px 5px silver;/*5px=影の広がり具合*/
  padding: 0.5em 0.5em 0.5em 2em;
}
ul li, ol li {
  line-height: 1.5;
  padding: 0.5em 0;
}

背景色を変えた場合

背景（background）を灰色にしてみると以下のようになります。。

CSS

ul, ol {
  background: #dadada;/*灰色に*/
  border-radius :8px;
  box-shadow :0px 0px 5px silver;
  padding: 0.5em 0.5em 0.5em 2em;
}
ul li, ol li {
  line-height: 1.5;
  padding: 0.5em 0;
}

1-6.ステッチ風

内側に破線を入れて、ステッチ風にしてみました。かわいい雰囲気のウェブサイトやブログにはマッチするでしょう。

CSS

ul, ol {
  background: #fffde8;
  box-shadow: 0px 0px 0px 10px #fffde8;/*線の外側*/
  border: dashed 2px #ffb03f;/*破線*/
  border-radius: 9px;
  margin-left: 10px;/*はみ出ないように調整*/
  margin-right: 10px;/*はみ出ないように調整*/
  padding: 0.5em 0.5em 0.5em 2em;
}

ul li, ol li {
  line-height: 1.5;
  padding: 0.5em 0;
}

色を変えてみた場合

青色バージョンだと以下のようになります。

CSS

ul, ol {
  background: #f1f8ff;
  box-shadow: 0px 0px 0px 10px #f1f8ff;/*線の外側*/
  border: dashed 2px #668ad8;/*破線*/
  border-radius: 9px;
  margin-left: 10px;/*はみ出ないように調整*/
  margin-right: 10px;/*はみ出ないように調整*/
  padding: 0.5em 0.5em 0.5em 2em;
}

ul li, ol li {
  line-height: 1.5;
  padding: 0.5em 0;
}

1-7.付箋風

見出しに使われるようなバーを並べてみました。メニューや目次に使うと良いかもしれないですね。

CSS

ul, ol {
  padding: 0;
  position: relative;
}

ul li, ol li {
  color: #2d8fdd;
  border-left: solid 6px #2d8fdd;/*左側の線*/
  background: #f1f8ff;/*背景色*/
  margin-bottom: 3px;/*下のバーとの余白*/
   line-height: 1.5;
  padding: 0.5em;
  list-style-type: none!important;/*ポチ消す*/
}

右端を丸くしてみた場合

右側の端を丸くすると、少しかわいくなります。

CSS

ul, ol {
  padding: 0;
  position: relative;
}

ul li, ol li {
  color: black;
  border-left: solid 8px orange;/*左側の線*/
  background: whitesmoke;/*背景色*/
  margin-bottom: 5px;/*下のバーとの余白*/
  line-height: 1.5;
  border-radius: 0 15px 15px 0;/*右側の角だけ丸く*/
  padding: 0.5em;
  list-style-type: none!important;
}

グレイの下線を足してみると…

グレイの下線を足して影のようにしました。左側の緑の部分の色はお好みで変えましょう。

CSS

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;/*ポチ消す*/
  font-weight: bold;
}

1-8.タグ風

白色の円を配置すると穴のようになり、タグに見えますね。これは番号付きの箇条書き（olとli）では使えません。

CSS

ul, ol {
  padding: 0;
}

ul li {
  position: relative;
  list-style-type: none!important;/*ポチ消す*/
  padding: 0.5em 0.5em 0.5em 0.5em;
  margin-bottom: 5px;
  line-height: 1.5;
  background: #dbebf8;
  vertical-align: middle;
  color: #505050;
  border-radius: 15px 0px 0px 15px;/*左側の角丸く*/
}

ul li:before{ 
  display:inline-block; 
  vertical-align: middle;
  /*以下白丸つくる*/
  content:'';
  width:1em;
  height: 1em;
  background: #fff;
  border-radius: 50%;
  margin-right: 8px;
}

2.アイコンフォントでulの箇条書きをおしゃれに

Font Awesomeという「簡単にウェブサイト上でアイコンを表示できるサービス」を使えば、よりリストデザインの幅が広がります。FontAwesomeの使い方は以下で解説しています（とっても簡単です）。

【保存版】Font Awesomeの使い方：Webアイコンフォントを使おう

FontAwesomeが導入済みの場合は、これから紹介するCSSコードをコピペしてそのまま使うことができます。ただし、バージョンが違うことにより、フォント名や導入の仕方がちょっと異なるので、うまくいかない場合には、上のFontAwesomeの使い方解説を読んでみてください。

【参考】アイコンを黒ポチ代わりに使う方法

ulの黒ポチの代わりにアイコンフォントを使う場合、CSSで以下のような書き方をします。

黒ポチを消す：ulに対してlist-style-type: none!importantを指定
liの疑似要素を作る：li:beforeでアイコンを表示させる
positionでアイコンの位置調整：liはrelativeに、li:beforeはabsoluteに

疑似要素というのは、ものすごくざっくり言うと「要素の前後に何かをくっつける」ためのものです。ここではアイコンを前にくっつけます。ちょっとややこしいと思うので、よく分からないという方はCSSコード例をとりあえずコピペしてみて頂ければと思います。

2-1. シェブロンマーク