コピペでできる！CSSとhtmlだけのリストデザイン15選

CSS HTML
 
 

htmlとcssだけでできるリストデザイン15選です。
おもに[ul/li]でつくるリストを集めました。

色は好みで変えていただければ、かまいません。
また、基本htmlは<ul><li>タグを使用しています。

紹介している<ul>タグには、クラス名（.cp_list）を付与していますが、こちらも
css部分を下記のように変更すれば、クラスをつけずに使用することも可能です。

ul {cssの中身}

色には6桁の16進数のカラーコード(#000000)も使えますが、他に、

  • 3桁の16進数カラーコード(#000)
  • RGB色相・彩度・明度(rgb(0,0,0))
  • RGBA色相・彩度・明度・透明度(rgb(0,0,0,1))

なども使用できます。
RGBA値での指定は、サポートしていないブラウザだと、透明度だけが無視されるのではなく、色指定そのものが認識されずに無効となるので注意が必要です。

browser:  ✔︎ ✔︎ ✔︎ 

ul/liのリストデザイン [15種]

おもにカウントなしのul/liで作るリストのデザインです。

付箋風のリスト

ニャン易度
  • css
  • html
  • copy
  • easy
<ul class="cp_list">
  <li>css</li>
  <li>html</li>
  <li>copy</li>
  <li>easy</li>
</ul>
ul.cp_list {
  position: relative;
  padding: 0;
  list-style-type: none;
}
ul.cp_list li {
  padding: 0.5em;
  margin-bottom: 3px;
  color:#1A237E;
  background: #80DEEA;
  border-left: solid 6px #1A237E;
}

付箋風のリスト＋影付き

ニャン易度
  • css
  • html
  • copy
  • easy
<ul class="cp_list">
  <li>css</li>
  <li>html</li>
  <li>copy</li>
  <li>easy</li>
</ul>
ul.cp_list {
  position: relative;
  padding: 0;
  list-style-type: none;
}
ul.cp_list li {
  padding: 0.5em;
  margin-bottom: 5px;
  color:#FFA000;
  background: #FFE082;
  border-left: 6px solid #FFA000;
  border-bottom: 2px solid #E0E0E0;
}

リストアイコンに丸を重ねたリスト

ニャン易度
  • css
  • html
  • copy
  • easy
<ul class="cp_list">
  <li>css</li>
  <li>html</li>
  <li>copy</li>
  <li>easy</li>
</ul>
ul.cp_list {
  padding: 0.5em;
  list-style-type: none;
}
ul.cp_list li {
  position: relative;
  padding: 0.5em 1em 0.5em 2.3em;
  margin-bottom:5px;
  border-bottom: 1px solid rgba(25,118,210,1);
}
ul.cp_list li:after,
ul.cp_list li:before{
  position: absolute;
  content:'';
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
ul.cp_list li:before {
  left: 0;
  width: 17px;
  height: 17px;
  background: rgba(25,118,210, 1);
}
ul.cp_list li:after {
  top: 1em;
  left: 0.5em;
  width: 14px;
  height: 14px;
  background: rgba(25,118,210, 0.5);
}

リストアイコンにひし形を重ねたリスト

ニャン易度
  • css
  • html
  • copy
  • easy
<ul class="cp_list">
  <li>css</li>
  <li>html</li>
  <li>copy</li>
  <li>easy</li>
</ul>
ul.cp_list {
  padding: 0.5em;
  list-style: none;
}
ul.cp_list li {
  position: relative;
  padding: 0.5em 1em 0.5em 2.3em;
  margin-bottom:5px;
  border-bottom: 1px solid rgba(255,143,0,1);
}
ul.cp_list li:after,
ul.cp_list li:before {
  position: absolute;
  content:'';
  transform: rotate(45deg);
}
ul.cp_list li:before {
  top: 0.7em;
  left: 0.2em;
  width: 12px;
  height: 12px;
  border:2px solid rgba(255,143,0,1);
}
ul.cp_list li:after {
  top: 0.9em;
  left: 0.7em;
  width: 14px;
  height: 14px;
  background: rgba(255,143,0,0.5);
  transform: rotate(60deg);
}

タグ風のリスト

ニャン易度
  • css
  • html
  • copy
  • easy
<ul class="cp_list">
  <li>css</li>
  <li>html</li>
  <li>copy</li>
  <li>easy</li>
</ul>
ul.cp_list {
  position: relative;
  padding: 0;
  list-style-type: none;
}
ul.cp_list li {
  display: flex;
  align-items: center;
  padding: 5px 0px 5px 30px;
  margin-bottom: 5px;
  color: #ffffff;
  background: #009688;
  border-radius: 20px 0px 0px 20px;
}
ul.cp_list li::before {
  position: absolute;
  left: 10px;
  content:'';
  width:1em;
  height: 1em;
  background: #fff;
  border-radius: 50%;
}

リストに区切り線をつける

ニャン易度
  • css
  • html
  • copy
  • easy
<ul class="cp_list">
  <li>css</li>
  <li>html</li>
  <li>copy</li>
  <li>easy</li>
</ul>
ul.cp_list {
  position: relative;
  padding: 5px;
  border: solid 1px #AB47BC;
  list-style-type: none;
}
ul.cp_list li {
  display: flex;
  padding: 5px 10px 5px 20px;
  border-bottom: 1px dashed #AB47BC;
}
ul.cp_list li::before {
  position: absolute;
  left : 5px;
  content: "
ul.cp_list {
position: relative;
padding: 5px;
border: solid 1px #AB47BC;
list-style-type: none;
}
ul.cp_list li {
display: flex;
padding: 5px 10px 5px 20px;
border-bottom: 1px dashed #AB47BC;
}
ul.cp_list li::before {
position: absolute;
left : 5px;
content: "\002713";
font-weight: bold;
color: #AB47BC;
}
ul.cp_list li:last-of-type {
border-bottom: none;
}
2713";
  font-weight: bold;
  color: #AB47BC;
}
ul.cp_list li:last-of-type {
  border-bottom: none;
}

リストの区切り枠にタブで見出しをつける

ニャン易度
  • css
  • html
  • copy
  • easy
<ul class="cp_list">
  <li>css</li>
  <li>html</li>
  <li>copy</li>
  <li>easy</li>
</ul>
ul.cp_list {
  position: relative;
  padding: 0 0.5em;
  margin-top: 2em;
  list-style-type: none;
  border: solid 2px #29B6F6;
}
ul.cp_list::after {
  position: absolute;
  bottom: 100%;
  left: -2px;
  content: "LIST";
  padding: 1px 7px;
  font-weight: bold;
  font-size: .8em;
  color: #fff;
  background: #29B6F6;
  border-radius: 4px 4px 0px 0px;
}
ul.cp_list li {
  padding: 5px 5px 5px 20px;
  border-bottom: 1px dashed #81D4FA;
}
ul.cp_list li::before {
  position: absolute;
  left : 5px;
  content: "
ul.cp_list {
position: relative;
padding: 0 0.5em;
margin-top: 2em;
list-style-type: none;
border: solid 2px #29B6F6;
}
ul.cp_list::after {
position: absolute;
bottom: 100%;
left: -2px;
content: "LIST";
padding: 1px 7px;
font-weight: bold;
font-size: .8em;
color: #fff;
background: #29B6F6;
border-radius: 4px 4px 0px 0px;
}
ul.cp_list li {
padding: 5px 5px 5px 20px;
border-bottom: 1px dashed #81D4FA;
}
ul.cp_list li::before {
position: absolute;
left : 5px;
content: "\002713";
color: #FF5722;
font-weight: bold;
}
ul.cp_list li:last-of-type {
border-bottom: none;
}

2713";
  color: #FF5722;
  font-weight: bold;
}
ul.cp_list li:last-of-type {
  border-bottom: none;
}

リストの区切り枠にタブで「content:attr()」を使用した見出しをつける

ニャン易度
  • css
  • html
  • copy
  • easy
<ul class="cp_list" title="List">
  <li>css</li>
  <li>html</li>
  <li>copy</li>
  <li>easy</li>
</ul>
ul.cp_list {
  position: relative;
  padding: 0 0.5em;
  margin-top: 2em;
  list-style-type: none;
  border: solid 2px #00796B;
}
ul.cp_list::after {
  position: absolute;
  bottom: 100%;
  left: -2px;
  content:attr(title);
  padding: 1px 7px;
  font-weight: bold;
  font-size: .8em;
  background: #00796B;
  color: #fff;
  border-radius: 4px 4px 0px 0px;
}
ul.cp_list li {
  line-height: 1.5;
  padding: 5px 0 5px 20px;
  border-bottom: 1px dashed #4DB6AC;
}
ul.cp_list li::before {
  position: absolute;
  left : 5px;
  content: "
ul.cp_list {
position: relative;
padding: 0 0.5em;
margin-top: 2em;
list-style-type: none;
border: solid 2px #00796B;
}
ul.cp_list::after {
position: absolute;
bottom: 100%;
left: -2px;
content:attr(title);
padding: 1px 7px;
font-weight: bold;
font-size: .8em;
background: #00796B;
color: #fff;
border-radius: 4px 4px 0px 0px;
}
ul.cp_list li {
line-height: 1.5;
padding: 5px 0 5px 20px;
border-bottom: 1px dashed #4DB6AC;
}
ul.cp_list li::before {
position: absolute;
left : 5px;
content: "\002713";
color: #00796B;
font-weight: bold;
}
ul.cp_list li:last-of-type {
border-bottom: none;
}
2713";
  color: #00796B;
  font-weight: bold;
}
ul.cp_list li:last-of-type {
  border-bottom: none;
}

アイコン部分を塗り潰す

ニャン易度
  • css
  • html
  • copy
  • easy
<ul class="cp_list">
  <li>css</li>
  <li>html</li>
  <li>copy</li>
  <li>easy</li>
</ul>
ul.cp_list {
  padding: 0 0.5em;
  list-style-type: none;
}
ul.cp_list li {
  position:relative;
  padding: 5px;
  margin-bottom: 4px;
  background: #FFECB3;
  border-left : 2em solid #FF7043;
}
ul.cp_list li::before {
  position: absolute;
  left: -1.5em;
  content: "
ul.cp_list {
padding: 0 0.5em;
list-style-type: none;
}
ul.cp_list li {
position:relative;
padding: 5px;
margin-bottom: 4px;
background: #FFECB3;
border-left : 2em solid #FF7043;
}
ul.cp_list li::before {
position: absolute;
left: -1.5em;
content: "\002713";
display: block;
color: #fff;
}
ul.cp_list li:last-of-type {
border-bottom: none;
}
2713";
  display: block;
  color: #fff;
}
ul.cp_list li:last-of-type {
  border-bottom: none;
}

三角付きのリスト

ニャン易度
  • css
  • html
  • copy
  • easy
<ul class="cp_list">
  <li>css</li>
  <li>html</li>
  <li>copy</li>
  <li>easy</li>
</ul>
ul.cp_list {
  padding:0.5em;
  list-style-type:none;
}
ul.cp_list li {
  position:relative;
  padding: 0em 0.3em 0.3em 1.3em;
}
ul.cp_list li:before {
  position:absolute;
  content:'';
  top: 0.5em;
  left: 0.2em;
  border-style: solid;
  border-width: 6px 0 6px 9px;
  border-color: transparent transparent transparent #3F51B5;
}

チェックマーク付きのリスト

ニャン易度
  • css
  • html
  • copy
  • easy
<ul class="cp_list">
  <li>css</li>
  <li>html</li>
  <li>copy</li>
  <li>easy</li>
</ul>
ul.cp_list {
  padding:0.5em;
  list-style-type:none;
}
ul.cp_list li {
  position:relative;
  padding: 0em 0.3em 0.3em 1.3em;
}
ul.cp_list li:after,
ul.cp_list li:before {
  position:absolute;
  top: 0.43em;
  left: 0.5em;
  content:'';
  display:block;
  background: #FFC107;
  height: 11px;
  width: 4px;
  border-radius: 10px;
  transform: rotate(45deg);
}
ul.cp_list li:before {
  top: 0.6em;
  left: 0.2em;
  height:8px;
  transform:rotate(-45deg);
}

カギカッコ付きのリスト

ニャン易度
  • css
  • html
  • copy
  • easy
<ul class="cp_list">
  <li>css</li>
  <li>html</li>
  <li>copy</li>
  <li>easy</li>
</ul>
ul.cp_list {
  padding:0.5em;
  list-style-type:none;
}
ul.cp_list li {
  position:relative;
  padding: 0em 0.3em 0.3em 1.3em;
}
ul.cp_list li::before {
  position: absolute;
  content: '';
  display: block;
  top: 0.5em;
  left: 0;
  width: 6px;
  height: 6px;
  border-right: 3px solid #00BCD4;
  border-bottom: 3px solid #00BCD4;
  transform: rotate(-45deg);
}

矢印付きのリスト

ニャン易度
  • css
  • html
  • copy
  • easy
<ul class="cp_list">
  <li>css</li>
  <li>html</li>
  <li>copy</li>
  <li>easy</li>
</ul>
ul.cp_list {
  padding:0.5em;
  list-style-type:none;
}
ul.cp_list li {
  position:relative;
  padding: 0em 0.3em 0em 1.3em;
}
ul.cp_list li::before,ul.cp_list li::after {
  position: absolute;
  content: '';
}
ul.cp_list li::after {
  top: 8px;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 25%;
  border-right: 3px solid #BA68C8;
  border-bottom: 3px solid #BA68C8;
  transform: rotate(-45deg);
}
ul.cp_list li::before {
  top: 12px;
  left: 0;
  width: 11px;
  height: 3px;
  background-color: #BA68C8;
  border-radius: 25%;
}

丸囲み矢印付きのリスト

ニャン易度
  • css
  • html
  • copy
  • easy
<ul class="cp_list">
  <li>css</li>
  <li>html</li>
  <li>copy</li>
  <li>easy</li>
</ul>
ul.cp_list {
  padding:0.5em;
  list-style-type:none;
}
ul.cp_list li {
  position:relative;
  padding: 0em 0.3em 0em 1.3em;
  display: flex;
  align-items: center;
}
ul.cp_list li::before,
ul.cp_list li::after {
  position: absolute;
  content: '';
}
ul.cp_list li::before {
  top: .35em;
  left: 0em;
  width: 14px;
  height: 14px;
  background-color: #EC407A;
  border-radius: 100%;
}
ul.cp_list li::after {
  top: 0.6em;
  left: 0.15em;
  width: 5px;
  height: 5px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}

吹き出し付きのリスト

ニャン易度
  • css
  • html
  • copy
  • easy
<ul class="cp_list">
  <li>css</li>
  <li>html</li>
  <li>copy</li>
  <li>easy</li>
</ul>
ul.cp_list {
  padding:0.5em;
  list-style-type:none;
}
ul.cp_list li {
  position:relative;
  padding: 0em 0.3em 0em 1.5em;
}
ul.cp_list li::before,
ul.cp_list li::after {
  position: absolute;
  content: '';
  display: flex;
  justify-content: center;
  align-items: center;
}
ul.cp_list li::after {
  top: 0.3em;
  left: 0em;
  width: 15px;
  height: 15px;
  background-color: #4DD0E1;
  border-radius: 25%;
}
ul.cp_list li::before {
  top: 0.45em;
  left: 0.8em;
  height: 0;
  width: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid #4DD0E1;
}

copypet.jp

CSS3などで新たに追加された要素･装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。そんな時に「あ〜、あれストックしときゃよかったなぁ」って困った自分用のストックブログです。カスタマイズなどがしやすいよう、昨今のweb制作に取り入れられる一般的なコードを中心に掲載しています。

More Info

こんな記事はいかがですか？