【CSS】箇条書きリストデザインまとめ

wp-custom-list-design WordPress

箇条書き『ul ol li』を使って箇条書きリストをリストカスタムしてみましょう。
デザインを色々まとめてみましたのでお好きにコピーして使ってくださいね！

Contents
  1. デザイン一覧
  2. さいごに

デザイン一覧

編集長K
KTA

リストをつらつら書いていきますので気にいったデザインがあったら自由に使ってください

以下のHTML表記をベースにしていきます。
『ul』『ol』の表記はどちらでもOKです。好きな箇条書きリストができますので場面に応じて使い分けてみてください！

HTML
<ul>
 <li>リスト1</li>
 <li>リスト2</li>
 <li>リスト3</li>
 <li>リスト4</li>
</ul>

BOX箇条書きリスト

1.シンプルBOXリスト

編集長K
KTA

シンプルなBOXで囲っただけの箇条書きリストです

  • リスト1
  • リスト2
  • リスト3
  • リスト4
HTML
<ul>
 <li>リスト1</li>
 <li>リスト2</li>
 <li>リスト3</li>
 <li>リスト4</li>
</ul>
css
ul{
  background: #fcfcfc;/*背景色*/
  padding: 0.5em 0.5em 0.5em 2em;/*ボックス内の余白*/
  border: solid 3px #333;/*線の種類 太さ 色*/
}

2.シンプルドット囲み箇条書きリスト

編集長K
KTA

BOXをdashedで囲った箇条書きリストです

  • リスト1
  • リスト2
  • リスト3
  • リスト4
HTML
<ul>
 <li>リスト1</li>
 <li>リスト2</li>
 <li>リスト3</li>
 <li>リスト4</li>
</ul>
css
ul{
  background: #fcfcfc;/*背景色*/
  padding: 0.5em 0.5em 0.5em 2em;/*ボックス内の余白*/
  border: dashed 5px #ff7675;/*線の種類 太さ 色*/
  color:#ff7675;/*文字色*/
}

3.爽やかに青の2本線箇条書きリスト

編集長K
KTA

BOXをdoubleで囲った箇条書きリストです

  • リスト1
  • リスト2
  • リスト3
  • リスト4
HTML
<ul>
 <li>リスト1</li>
 <li>リスト2</li>
 <li>リスト3</li>
 <li>リスト4</li>
</ul>
css
ul{
 background-color: #cce6ff;/*背景色*/
 padding: 0.5em 0.5em 0.5em 2em;/*ボックス内の余白*/
 border: double 10px #74b9ff;/*線の種類 太さ 色*/
 color: #0084ff;/*文字色*/
}

4.立体感のある囲み箇条書きリスト

BOXをgrooveでリッチにしたような箇条書きリスト

  • リスト1
  • リスト2
  • リスト3
  • リスト4
HTML
<ul>
 <li>リスト1</li>
 <li>リスト2</li>
 <li>リスト3</li>
 <li>リスト4</li>
</ul>
css
ul{
 background-color: #ffffff;/*背景色*/
 padding: 0.5em 0.5em 0.5em 2em;/*ボックス内の余白*/
 border: groove 15px silver;/*線の種類 太さ 色*/
 color: #333333;/*文字色*/
}

独立した箇条書きリスト

5.付箋風リスト

編集長K
KTA

付箋風の箇条書きリストです

  • リスト1
  • リスト2
  • リスト3
  • リスト4
HTML
<ul>
 <li>リスト1</li>
 <li>リスト2</li>
 <li>リスト3</li>
 <li>リスト4</li>
</ul>
css
ul{
  padding: 0;
  position: relative;
}

ul li{
  list-style:none;
  border-left:solid 15px #222;/*左側の線*/
  padding:0.2em;/*余白*/
  margin-bottom:0.2em;/*下の線との余白*/
  background-color:gray;/*背景色*/
  width:50%;/*幅*/
  line-height: 3em;/*リストの高さ*/ 
  color:#fff;/*文字の色*/
}

6.付箋風リスト立体ver

BOXを影あり付箋風にしてみた

  • リスト1
  • リスト2
  • リスト3
  • リスト4
HTML
<ul>
 <li>リスト1</li>
 <li>リスト2</li>
 <li>リスト3</li>
 <li>リスト4</li>
</ul>
css
ul{
  padding: 0;
  position: relative;
}
ul li{
  list-style:none;
  border-left:solid 8px #0984e3;/*左側の線の太さ・色*/
  border-bottom:solid 5px #636e72;/*下側の線の太さ・色*/
  padding:0.2em;/*余白*/
  margin-bottom:0.2em;/*下の線との余白*/
  background-color:#18fa;/*背景色*/
  width:50%;/*幅*/
  line-height: 3em;/*リストの高さ*/ 
  color:#fff;/*文字の色*/
}

7.li BOXを囲む

個別に線で囲んでみた

  • リスト1
  • リスト2
  • リスト3
  • リスト4
HTML
<ul>
 <li>リスト1</li>
 <li>リスト2</li>
 <li>リスト3</li>
 <li>リスト4</li>
</ul>
css
ul{
  padding: 0;
}
ul li{
  list-style:none;
  border-radius: 20px;/*左側の線の太さ・色*/
  border:solid 5px #6c5ce7;
  padding-left:1em;/*左側の余白*/
  margin-bottom:0.2em;/*下の線との余白*/
  background-color:#a29bfe;/*背景色*/
  width:50%;/*幅*/
  line-height: 3em;/*リストの高さ*/ 
  color:#fff;/*文字の色*/
}

8.BOXをボタン風に

各BOXを影ありにしてボタン風にしてみた

  • リスト1
  • リスト2
  • リスト3
  • リスト4
HTML
<ul>
 <li>リスト1</li>
 <li>リスト2</li>
 <li>リスト3</li>
 <li>リスト4</li>
</ul>
css
.ul{
  padding: 0;
}

.ul li{
  list-style:none;
  border-radius: 20px;/*左側の線の太さ・色*/
  border-bottom:solid 5px #e17055;
  padding-left:1em;/*左側の余白*/
  margin-bottom:0.2em;/*下の線との余白*/
  background-color:#fab1a0;/*背景色*/
  width: 50%;/*幅*/
  line-height: 3em;/*リストの高さ*/ 
  color:#fff;/*文字の色*/
}
.ul li:before{ 
  display:inline-block; 
  vertical-align: middle;
  content:'★';/*olの代わる環境依存文字*/
  margin-right: 8px;
}

9.BOXをボタン風にpart2

各BOXを下向きボタン風にしてみた

  • リスト1
  • リスト2
  • リスト3
  • リスト4
HTML
<ul>
 <li>リスト1</li>
 <li>リスト2</li>
 <li>リスト3</li>
 <li>リスト4</li>
</ul>
css
ul{
  padding: 0;
}

ul li{
  list-style:none;
  border-radius: 10px;/*左側の線の太さ・色*/
  border-top:solid 5px #0984e3;
  padding-left:1em;/*左側の余白*/
  margin-bottom:0.2em;/*下の線との余白*/
  background-color:#74b9ff;/*背景色*/
  width: 50%;/*幅*/
  line-height: 3em;/*リストの高さ*/ 
  color:#333;/*文字の色*/
}
ul li:before{ 
  display:inline-block; 
  vertical-align: middle;
  /*以下白丸つくる*/
  content:'❄';/*olの代わる環境依存文字*/
  margin-right: 8px;
}

10.カーソルを合わせた時に変化するリスト

リストにカーソルをホバーさせた時の動きを加えてみた

ボタンとしてa hrefをリストにしてみてもいいかもしれませんね

  • リスト1
  • リスト2
  • リスト3
  • リスト4
HTML
<ul>
 <li>リスト1</li>
 <li>リスト2</li>
 <li>リスト3</li>
 <li>リスト4</li>
</ul>
css
.ul{
  padding: 0;
}

.ul li{
  list-style:none;
  border-radius: 10px;/*左側の線の太さ・色*/
  border-top:solid 5px #000;
  padding-left:1em;/*左側の余白*/
  margin-bottom:0.2em;/*下の線との余白*/
  background-color:#636e72;/*背景色*/
  width: 50%;/*幅*/
  line-height: 3em;/*リストの高さ*/ 
  color:#fff;/*文字の色*/
}

.ul li:hover{
 background-color: #dfe6e9;
 transition: .3s;
 border-top: solid 4px #b2bec3;
 color:#333;
}

olの数列リスト

編集長K
KTA

POINT!
list-style: none;でカウンタの表示を消してcounter-reset:number;でカウンタをリセットします。

そのうえで改めてcounter-increment: number;とcontent: counter(number);でカウンタをつけていきます。

11.シンプルなカウンタリスト

リストを〇で囲っています

  1. リスト1
  2. リスト2
  3. リスト3
  4. リスト4
HTML
<ol>
 <li>リスト1</li>
 <li>リスト2</li>
 <li>リスト3</li>
 <li>リスト4</li>
</ol>
css
ol{
 list-style: none; /*カウンタを消す*/
 counter-reset:number; /*カウンタをリセット*/
}
ol li {
 position: relative;
 padding-left: 30px;
 line-height: 2em;
 padding: 0.5em 0.5em 0.5em 2em;
 background: #e0e0e0;
 width:50%;
 border-bottom: solid 0.2em #fff;
}

ol li:before{
  /* 以下数字をつける */
 position: absolute;
 counter-increment: number;
 content: counter(number);
 /*以下数字のデザイン変える*/
 display:inline-block;
 background: #333;
 color: white;
 font-weight:solid;
 font-size: 0.8em;
 border-radius: 40px;
 left: 0em;
 width: 20px;
 height: 20px;
 line-height: 20px;
 text-align: center;
 /*以下 上下中央寄せのため*/
 top: 1.8em;
 -webkit-transform: translateY(-50%);
 transform: translateY(-50%);
}

12.シンプルなカウンタリスト2

リストを□で囲っています

  1. リスト1
  2. リスト2
  3. リスト3
  4. リスト4
HTML
<ol>
 <li>リスト1</li>
 <li>リスト2</li>
 <li>リスト3</li>
 <li>リスト4</li>
</ol>
css
ol {
  counter-reset:number; /*カウンターをリセット*/
  list-style-type: none!important; /*カウンタを消す*/
}
ol li {
  position: relative;
  line-height: 2em;
  padding: 0.5em 3.5em;
  background: #e0e0e0;
  width:50%;
  border-bottom: solid 0.2em #fff;
}

ol li:before{
  /* 以下カウンタをつける */
  position: absolute;
  counter-increment: number;
  content: counter(number);
  /*以下カウンタデザイン変える*/
  display:inline-block;
  background: #333;
  color: white;
  font-weight:bold;
  font-size: 1em;
  left: 0;
  width: 3em;
  height: 100%;
  line-height: 3em;
  text-align: center;
  /*以下 上下中央寄せのため*/
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

13.リストの区切り線【ドット線】追加ver

  1. リスト1
  2. リスト2
  3. リスト3
  4. リスト4
HTML
<ol>
 <li>リスト1</li>
 <li>リスト2</li>
 <li>リスト3</li>
 <li>リスト4</li>
</ol>
css
ol {
  counter-reset:number; /*カウンターをリセット*/
  list-style-type: none!important; /*カウンタを消す*/
}
ol li {
  position: relative;
  line-height: 2em;
  padding: 0.5em 3.5em;
  background: #e0e0e0;
  width:50%;
  border-bottom:dotted;
}

ol li:before{
  /* 以下カウンタをつける */
  position: absolute;
  counter-increment: number;
  content: counter(number);
  /*以下カウンタデザイン変える*/
  display:inline-block;
  background: #333;
  color: white;
  font-weight:bold;
  font-size: 1em;
  left: 0;
  width: 3em;
  height: 100%;
  line-height: 3em;
  text-align: center;
  /*以下 上下中央寄せのため*/
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
ol li:last-of-type {
  border-bottom: none; /*一番下の線だけ消す*/
}

FontAwesomeを使ったデザイン

14.チェックのみ

  • リスト1
  • リスト2
  • リスト3
  • リスト4
HTML
<ul>
 <li>リスト1</li>
 <li>リスト2</li>
 <li>リスト3</li>
 <li>リスト4</li>
</ul>
css
ul{
 list-style: none;
 margin:0;
}
ul li {
 position: relative;
 padding-left: 15px;
}
ul li::before {
 font-family: "Font Awesome 5 Free";
 font-weight: 900;
 position: absolute;
 content: "\f00c";
 color:  #303030;
 left:-10px;
}

15.チェック背景カラー変える

  • リスト1
  • リスト2
  • リスト3
  • リスト4
HTML
<ul>
 <li>リスト1</li>
 <li>リスト2</li>
 <li>リスト3</li>
 <li>リスト4</li>
</ul>
css
ul{
  list-style: none;
  margin:0;
}
ul li {
  position: relative;
  padding-left: 15px;
  background:#e0e0e0;
  width:50%;
}
ul li::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  content: "\f00c";
  color:  #303030;
  left:-10px;
}

16.リストっぽく

  • リスト1
  • リスト2
  • リスト3
  • リスト4
HTML
<ul>
 <li>リスト1</li>
 <li>リスト2</li>
 <li>リスト3</li>
 <li>リスト4</li>
</ul>
css
ul{
  list-style: none;
  margin:0;
}
ul li {
  position: relative;
  padding: 0.5em 3.5em;
  background:#e0e0e0;
  width:50%;
}
ul li::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  content: "\f138";
  color:  #fff;
  display:inline-block;
  background: #333;
  left: 0;
  width: 3em;
  height: 100%;
  line-height: 3em;
  text-align: center;
  /*以下 上下中央寄せのため*/
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

17.リストっぽく右ver

アイコン右寄せサイズUP

  • リスト1
  • リスト2
  • リスト3
  • リスト4
HTML
<ul>
 <li>リスト1</li>
 <li>リスト2</li>
 <li>リスト3</li>
 <li>リスト4</li>
</ul>
css
ul{
  list-style: none;
  margin:0;
}
ul li {
  position: relative;
  padding: 0.5em 3.5em;
  background:#e0e0e0;
  width:50%;
}
ul li::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 1.5em;
  position: absolute;
  content: "\f138";
  color:  #fff;
  display:inline-block;
  background: #333;
  right: 0;
  width: 3em;
  height: 100%;
  text-align: center;
  /*以下 上下中央寄せのため*/
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

18.リストっぽく右ver+hover

アイコンを動かしてみたUP

  • リスト1
  • リスト2
  • リスト3
  • リスト4
HTML
<ul>
 <li>リスト1</li>
 <li>リスト2</li>
 <li>リスト3</li>
 <li>リスト4</li>
</ul>
css
ul{
 list-style: none;
 margin:0;
}
ul li {
 position: relative;
 padding: 0.5em;
 background:#e0e0e0;
 width:50%;
}
ul li::before {
 font-family: "Font Awesome 5 Free";
 font-weight: 900;
 font-size: 1.5em;
 position: absolute;
 content: "\f138";
 color:  #fff;
 display:inline-block;
 background: #e0e0e0;
 right: 0;
 width: 3em;
 height: 100%;
 text-align: center;
  /*以下 上下中央寄せのため*/
 top: 50%;
 -webkit-transform: translateY(-50%);
 transform: translateY(-50%);
 transition: all 2s;
}
ul li:hover::before{
 right:-1em;
}

19.リストっぽく色変えver

  • リスト1
  • リスト2
  • リスト3
  • リスト4
HTML
<ul>
 <li>リスト1</li>
 <li>リスト2</li>
 <li>リスト3</li>
 <li>リスト4</li>
</ul>
css
ul{
 list-style: none;
 margin:0;
}
ul li {
 position: relative;
 padding: 0.5em 3.5em;
 background:#7bed9f;
 width:50%;
}
ul li::before {
 font-family: "Font Awesome 5 Free";
 font-weight: 900;
 position: absolute;
 content: "\f5ad";
 color:  #303030;
 display:inline-block;
 background:#2ed573;
 left: 0;
 width: 3em;
 height: 100%;
 line-height: 3em;
 text-align: center;
  /*以下 上下中央寄せのため*/
 top: 50%;
 -webkit-transform: translateY(-50%);
 transform: translateY(-50%);
}

さいごに

注意

カスタムは自己責任でやりましょうね！
wp-about-custom-aveterk-1

コメント