コピペでできる!CSSとhtmlだけの[clip-path]で作るリストデザイン10選

CSS HTML
 

CSSとhtmlだけの[clip-path]で作るリストデザインです。
[clip-path]を使ったら以前のやり方より融通が効いたりメンテナンスが楽だったり、指定も少なくて済んだりして便利です。

カウンタの利用について

cssでカウンタを利用する場合初期値をリセットしなければなりません。
リセット後には要素にカウンタの値を加えるため、 counter() 関数を使用します。

<ol class="cp_listsample">
	<li>item</li>
	<li>item</li>
	<li>item</li>
	<li>item</li>
</ol>
ol.cp_listsample {
	counter-reset: number; /* section のカウンタを 0 にセット */
}
ol.cp_listsample li:before {
	counter-increment: number; /* number カウンタを増加 */
	content: counter(number); /* カウンタを表示 */
}
  1. item
  2. item
  3. item
  4. item

また、文字列を付与させることも可能です。
counter-reset: カウンタ名(任意);
counter-increment: カウンタ名(上と同じカウンタ名);
content:counter(上と同じカウンタ名) “付与したい文字”;

ol {
	counter-reset: number; /* カウンタ名(任意) */
}
ol li:before {
	counter-increment: number; /* カウンタ名(上と同じカウンタ名) */
	content: counter(number) "付与したい文字"; /* カウンタを表示 */
}

カウンタを入れ子にする

カウンタを入れ子にする場合は自動的に子要素で生成されますが、
counters() 関数を使って、入れ子となったカウンタの異なる階層の間に、文字列を挿入することができます。

ol {
	counter-reset: number;                /* 各 ol 要素に新しいインスタンスの number カウンタを生成 */
	list-style-type: none;
}
li:before {
	counter-increment: number;            /* number カウンタのこのインスタンスのみ増加 */
	content: counters(number, ".") " ";   /* "." で区切られた number カウンタのインスタンスの値を付加 */
}

色は好みで変えていただければ、かまいません。
また、基本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のリストデザイン [6種]

[clip-path]で作るリストデザインです。

三角付きのリスト

ニャン易度
  • 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 0 0 15px;
}
ul.cp_list li:before {
  position:absolute;
  top: 8px;
  left: 0;
  content:'';
  width: 8px;
  height: 10px;
  background: #3F51B5;
  clip-path: polygon(0 0, 0% 100%, 100% 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 {
  padding:0;
  list-style-type:none;
}
ul.cp_list li {
  position:relative;
  padding: 0 0 0 25px;
}
ul.cp_list li:before {
  position:absolute;
  top: 0;
  left: 0;
  content:'';
  display:block;
  height: 15px;
  width: 15px;
  background: #FFC107;
  border-radius: 2px;
  clip-path: polygon(80% 0, 100% 0, 100% 100%, 50% 100%, 50% 80%, 80% 80%);
  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;
  list-style-type:none;
}
ul.cp_list li {
  position:relative;
  padding: 0 0 0 20px;
}
ul.cp_list li::before {
  position: absolute;
  top: 0.5em;
  left: 0;
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  background: #00BCD4;
  border-radius: 2px;
  clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 70%, 70% 70%, 70% 0);
  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;
  list-style-type:none;
}
ul.cp_list li {
  position:relative;
  padding: 0 0 0 25px;
}
ul.cp_list li::before {
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  background: #BA68C8;
  border-radius: 2px;
  clip-path: polygon(50% 40%, 40% 48%, 75% 85%, 40% 85%, 40% 100%, 100% 100%, 100% 40%, 85% 40%, 85% 75%);
  transform: rotate(-45deg);
  transform-origin: bottom center;
}

丸囲み矢印付きのリスト

ニャン易度
  • 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;
  list-style-type:none;
}
ul.cp_list li {
  position:relative;
  padding: 0 0 0 20px;
}
ul.cp_list li::before,
ul.cp_list li::after {
  position: absolute;
  top: 5px;
  left: 0;
  content: '';
  width: 14px;
  height: 14px;
}
ul.cp_list li::before {
  background: #EC407A;
  clip-path: circle(50% at 50% 50%);
}
ul.cp_list li::after {
  left: -1px;
  background: #ffffff;
  clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 70%, 70% 70%, 70% 0);
  transform:  rotate(-45deg) scale(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;
  list-style-type:none;
}
ul.cp_list li {
  position:relative;
  padding: 0 0 0 20px;
}
ul.cp_list li::before,
ul.cp_list li::after {
  position: absolute;
  top: 0.3em;
  content: '';
  display: flex;
  justify-content: center;
  align-items: center;
  width: 13px;
  height: 15px;
  background: #4DD0E1;
}
ul.cp_list li::before {
  left: 0;
  border-radius: 3px;
}
ul.cp_list li::after {
  left: 8px;
  clip-path: polygon(0 0, 0% 100%, 100% 50%);
  transform: scale(0.5);
}

ol/liのリストデザイン [4種]

[ol]のようにカウンタを利用して作るカウント付きのリストデザインです。

カウントのデザインを吹き出しに

ニャン易度
  1. css
  2. html
  3. copy
  4. easy
<ol class="cp_clist">
  <li>css</li>
  <li>html</li>
  <li>copy</li>
  <li>easy</li>
</ol>
ol.cp_clist {
  padding: 0;
  counter-reset:cp_clist; /*数字をリセット*/
  list-style-type: none;
}
ol.cp_clist li {
  position: relative;
  margin: 0 0 0 30px;
}
ol.cp_clist li::before {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  /* カウントさせる */
  counter-increment: cp_clist;
  content: counter(cp_clist);
  /*装飾*/
  background: #03A9F4;
  color: #fff;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  /*位置の調整*/
  padding: 0;
  margin: 2px 0 0 -30px;
}
ol.cp_clist li::after {
  position: absolute;
  top: 7px;
  left: -15px;
  content: '';
  width: 12px;
  height: 10px;
  background: #03A9F4;
  clip-path: polygon(0 0, 0% 100%, 80% 50%);
}

カウントのデザインを四角い吹き出しに

ニャン易度
  1. css
  2. html
  3. copy
  4. easy
<ol class="cp_clist">
  <li>css</li>
  <li>html</li>
  <li>copy</li>
  <li>easy</li>
</ol>
ol.cp_clist {
  padding: 0;
  counter-reset:cp_clist; /*数字をリセット*/
  list-style-type: none;
}
ol.cp_clist li {
  position:relative;
  background: #F8BBD0;
  padding: 0 5px;
  margin: 0 0 10px 30px;
}
ol.cp_clist li:before {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  /* カウントさせる */
  counter-increment: cp_clist;
  content: counter(cp_clist);
  /*装飾*/
  font-weight: bold;
  color: #fff;
  background: #F06292;
  width: 20px;
  height: 20px;
  clip-path: polygon(0% 0%, 85% 0, 85% 40%, 100% 50%, 85% 60%, 85% 100%, 0 100%);
  /*位置の調整*/
  padding: 0 5px 0 0;
  margin: 2px 0 0 -30px;
}

HOVERで矢印が出る

ニャン易度
  1. css
  2. html
  3. copy
  4. easy
<ol class="cp_clist">
  <li>css</li>
  <li>html</li>
  <li>copy</li>
  <li>easy</li>
</ol>
ol.cp_clist {
  padding: 0;
  counter-reset:cp_clist; /*数字をリセット*/
  list-style-type: none;
}
ol.cp_clist li {
  position: relative;
  padding: 0 5px;
  margin: 0 0 5px 40px;
  min-height: 28px;
  background: #FFAB91;
  color: #333;
  transition: all .3s ease-out;
}
ol.cp_clist li::before {
  position: absolute;
  top: 0;
  left: -10px;
  display: flex;
  justify-content: center;
  align-items: center;
  /* カウントさせる */
  counter-increment: cp_clist;
  content: counter(cp_clist);
  /*装飾*/
  color: #fff;
  background: #FF5722;
  height: 28px;
  width: 28px;
  /*位置の調整*/
  padding: 0;
  margin: 0px 0 0 -30px;
}
ol.cp_clist li::after {
  content: '';
  position: absolute;
  top: 10px;
  left: -17px;
  background: #FF5722;
  width: 10px;
  height: 10px;
  clip-path: polygon(0 0, 0% 100%, 50% 50%);
  transition: all .3s ease-out;
}
/*hover時の設定*/
ol.cp_clist li:hover {
  background: #FFCCBC;
}
ol.cp_clist li:hover::after {
  left: -6px;
}

作るカウントのデザインを葉っぱのような形に

ニャン易度
  1. css
  2. html
  3. copy
  4. easy
<ol class="cp_clist">
  <li>css</li>
  <li>html</li>
  <li>copy</li>
  <li>easy</li>
</ol>
ol.cp_clist {
  padding: 0;
  counter-reset:cp_clist; /*数字をリセット*/
  list-style-type: none;
}
ol.cp_clist li{
  position:relative;
  margin: 0 0 0 25px;
}
ol.cp_clist li::before {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  /* カウントさせる */
  counter-increment: cp_clist;
  content: counter(cp_clist);
  /*装飾*/
  background: #4CAF50;
  color:#fff;
  height: 20px;
  width: 20px;
  clip-path: inset(0px round 10px 1px);
  /*位置の調整*/
  padding: 0;
  margin: 2px 0 0 -25px;
}

copypet.jp

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

More Info

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