トップへ(mam-mam.net/)

コピペで使えるCSSとUL・LIタグを使ったリストのデザイン9種類

検索：

コピペで使えるCSSとUL・LIタグを使ったリストのデザイン

丸マークのリスト

HTML・CSSソースコードを見る 
<ul class="mam_list1">
  <li>HTML<br>CSS</li>
  <li>UL LI</li>
  <li>SVG</li>
</ul>
<style>
ul.mam_list1{
  /*お好きなサイズに*/
  font-size:24px;
  /*お好きな背景色に*/
  background:#DEF;
  margin:0.2em 0.1em;
  padding:0;
  box-sizing:border-box;
  border:2px #ACF dashed;
  border-radius:0.5em;
}
ul.mam_list1>li{
  position:relative;
  list-style-type: none!important;
  margin:0.1em;
  padding:0.1em 0.1em 0.1em 1.2em;
  text-indent:0;
  font-size:1em;
  border-radius:0.5em;
  background:none;
}
ul.mam_list1>li::before{
  position:absolute;
  display:inline-block; 
  vertical-align: middle;
  content:'';
  width:0.8em;
  height: 0.8em;
  left:0;
  top:0m;
  background: #fff;
  border-radius: 50%;
  border:none;
  background:#ACF;
  margin: 0.2em;
  box-shadow:0.1em 0.1em 0.1em 0 rgba(0,0,0,0.4);
}
</style>

チェックマークのリスト

HTML・CSSソースコードを見る 
<ul class="mam_list2">
  <li>HTML<br>CSS</li>
  <li>UL LI</li>
  <li>SVG</li>
</ul>
<style>
ul.mam_list2{
  /*お好きなサイズに*/
  font-size:24px;
  /*お好きな背景色に*/
  background:#FFF;
  margin:0.2em 0.1em;
  padding:0;
  box-sizing:border-box;
  border:2px #FA6 dashed;
  border-radius:0.5em;
}
ul.mam_list2>li{
  position:relative;
  list-style-type: none!important;
  margin:0.1em;
  padding:0.1em 0.1em 0.1em 1.2em;
  text-indent:0;
  font-size:1em;
  border-radius:0.5em;
  background:none;
}
ul.mam_list2>li::before{
  content:"";
  position:absolute;
  width:0.4em;
  height:0.2em;
  border-radius:0.1em;
  left:0.1em;
  top:0.8em;
  background:#FA6;
  transform-origin:0.3em 0.1em 0;
  transform:rotate(45deg);
}
ul.mam_list2>li::after{
  content:"";
  position:absolute;
  width:0.7em;
  height:0.2em;
  border-radius:0.1em;
  left:0.3em;
  top:0.8em;
  background:#FA6;
  box-shadow:0.1em 0.1em 0.1em 0px rgba(0,0,0,0.3);
  transform-origin:0.1em 0.1em 0;
  transform:rotate(-45deg);
}
</style>

丸マークの凹んだリスト

HTML・CSSソースコードを見る 
<ul class="mam_list3">
  <li>HTML<br>CSS</li>
  <li>UL LI</li>
  <li>SVG</li>
</ul>
<style>
ul.mam_list3{
  /*お好きなサイズに*/
  font-size:24px;
  /*お好きな背景色に*/
  background:#DEF;
  margin:0.2em 0.1em;
  padding:0;
  box-sizing:border-box;
  border:none;
  border-radius:0.5em;
  box-shadow:0.1em 0.1em 0.2em 0 rgba(0,0,0,0.5) inset;
}
ul.mam_list3>li{
  position:relative;
  list-style-type: none!important;
  margin:0.1em;
  padding:0.1em 0.1em 0.1em 1.2em;
  text-indent:0;
  font-size:1em;
  border-radius:0.5em;
  background:none;
}
ul.mam_list3>li::before{
  position:absolute;
  display:inline-block; 
  vertical-align: middle;
  content:'';
  width:0.8em;
  height: 0.8em;
  left:0;
  top:0m;
  background: #fff;
  border-radius: 50%;
  border:none;
  background:#ACF;
  margin: 0.2em;
  box-shadow:0.1em 0.1em 0.1em 0 rgba(0,0,0,0.4);
}
</style>

チェックマークの凹んだリスト

HTML・CSSソースコードを見る 
<ul class="mam_list4">
  <li>HTML<br>CSS</li>
  <li>UL LI</li>
  <li>SVG</li>
</ul>
<style>
ul.mam_list4{
  /*お好きなサイズに*/
  font-size:24px;
  /*お好きな背景色に*/
  background:#FFF;
  margin:0.2em 0.1em;
  padding:0;
  box-sizing:border-box;
  background:#FEC;
  border:none;
  border-radius:0.5em;
  box-shadow:0.1em 0.1em 0.2em 0 rgba(0,0,0,0.5) inset;
}
ul.mam_list4>li{
  position:relative;
  list-style-type: none!important;
  margin:0.1em;
  padding:0.1em 0.1em 0.1em 1.2em;
  text-indent:0;
  font-size:1em;
  border-radius:0.5em;
  background:none;
}
ul.mam_list4>li::before{
  content:"";
  position:absolute;
  width:0.4em;
  height:0.2em;
  border-radius:0.1em;
  left:0.1em;
  top:0.8em;
  background:#FA6;
  transform-origin:0.3em 0.1em 0;
  transform:rotate(45deg);
}
ul.mam_list4>li::after{
  content:"";
  position:absolute;
  width:0.7em;
  height:0.2em;
  border-radius:0.1em;
  left:0.3em;
  top:0.8em;
  background:#FA6;
  box-shadow:0.1em 0.1em 0.1em 0px rgba(0,0,0,0.3);
  transform-origin:0.1em 0.1em 0;
  transform:rotate(-45deg);
}
</style>

ふせん風のリスト

ふせん風のリスト。

HTML・CSSソースコードを見る 
<ul class="mam_list21">
  <li>HTML<br>CSS</li>
  <li>UL LI</li>
  <li>SVG</li>
</ul>
<style>
ul.mam_list21{
  /*お好きなサイズに*/
  font-size:24px;
  margin:0;
  padding:0;
  background:none;
  box-sizing:border-box;
}
ul.mam_list21>li{
  /*お好きな背景色に*/
  background:#DEF;
  position:relative;
  box-sizing:border-box;
  list-style-type: none!important;
  margin:0.2em 0.1em 0.2em 0em;
  padding:0.1em 0.1em 0.1em 1.2em;
  text-indent:0;
  font-size:1em;
  border-radius:0em;
  box-shadow:0.2em 0.2em 0.2em 0 rgba(0,0,0,0.5);
}
ul.mam_list21>li::before{
  box-sizing:border-box;
  position:absolute;
  display:inline-block; 
  content:'';
  width:0.8em;
  left:0;
  top:0;
  bottom:0;
  background: #ACF;
  border-radius: 0%;
  border:none;
  margin: 0;
}
</style>

ふせん風のリスト（少し変形）

ふせん風のリスト。transform:rotate() skew();で少し変形。

HTML・CSSソースコードを見る 
<ul class="mam_list22">
  <li>HTML</li>
  <li>CSS</li>
  <li>UL</li>
  <li>LI</li>
  <li>SVG</li>
</ul>
<style>
ul.mam_list22{
  /*お好きなサイズに*/
  font-size:24px;
  margin:0em;
  padding:0;
  background:none;
  box-sizing:border-box;
}
ul.mam_list22>li{
  /*お好きな背景色に*/
  background:#FEC;
  position:relative;
  box-sizing:border-box;
  list-style-type: none!important;
  margin:0.5em 0.1em 0.5em 0em;
  padding:0.1em 0.1em 0.1em 1.2em;
  text-indent:0;
  font-size:1em;
  border-radius:0em;
  box-shadow:0.2em 0.2em 0.2em 0 rgba(0,0,0,0.5);
}
ul.mam_list22>li:nth-of-type(4n+1){
  transform:rotate( 1deg) skew(-1deg);
}
ul.mam_list22>li:nth-of-type(4n+2){
  transform:rotate( 0deg) skew( 0deg);
}
ul.mam_list22>li:nth-of-type(4n+3){
  transform:rotate(-1deg) skew( 1deg);
}
ul.mam_list22>li:nth-of-type(4n+0){
  transform:rotate( 0deg) skew( 0deg);
}
ul.mam_list22>li::before{
  box-sizing:border-box;
  position:absolute;
  display:inline-block; 
  content:'';
  width:0.8em;
  left:0;
  top:0;
  bottom:0;
  background: #FA6;
  border-radius: 0%;
  border:none;
  margin: 0;
}
</style>

クリップのマークのリスト

インラインSVGでクリップの画像をマークにしたリスト

  • HTML
    CSS
  • UL LI
  • SVG
HTML・CSSソースコードを見る 
<ul class="mam_list_svg1">
  <li>HTML<br>CSS</li>
  <li>UL LI</li>
  <li>SVG</li>
</ul>
<style>
ul.mam_list_svg1{
  /*お好きなサイズに*/
  font-size:24px;
  margin:0;
  padding:0;
  background:none;
  box-sizing:border-box;
}
ul.mam_list_svg1>li{
  /*お好きな背景色に*/
  background:#DEF;
  position:relative;
  list-style-type: none!important;
  margin:0.2em 0.1em 0.2em 0.1em;
  padding:0.1em 0.1em 0.1em 1.2em;
  text-indent:0;
  font-size:1em;
  border-radius:0.5em;
}
ul.mam_list_svg1>li::before{
  position:absolute;
  display:inline-block; 
  vertical-align: middle;
  content:'';
  width:0.8em;
  height: 0.8em;
  left:0;
  top:0;
  background: #fff;
  border-radius: 50%;
  border:1px #666 solid;
  margin: 0.2em;
  background-image:url(
    "data:image/svg+xml;charset=utf-8,\
    %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' style='width:1em;height:1em;'%3E\
      %3Cpath style='fill:none;stroke:%23111;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;'\
        d='M40,48 l0,-36 a8,8 0,0,0 -16,0 l0,40 a6,6 0,0,0 12,0 l0,-28 a4,4 0,0,0 -8,0 l0,20' \
      /%3E\
    %3C/svg%3E"
  );
  box-shadow:0.1em 0.1em 0.1em 0 rgba(0,0,0,0.4);
}
</style>

肉球のマークのリスト

インラインSVGで肉球の画像をマークにしたリスト

  • HTML
    CSS
  • UL LI
  • SVG
HTML・CSSソースコードを見る 
<ul class="mam_list_svg2">
  <li>HTML<br>CSS</li>
  <li>UL LI</li>
  <li>SVG</li>
</ul>
<style>
ul.mam_list_svg2{
  /*お好きなサイズに*/
  font-size:24px;
  margin:0;
  padding:0;
  background:none;
  box-sizing:border-box;
}
ul.mam_list_svg2>li{
  /*お好きな背景色に*/
  background:#FCA;
  position:relative;
  list-style-type: none!important;
  margin:0.2em 0.1em 0.2em 0.1em;
  padding:0.1em 0.1em 0.1em 1.2em;
  text-indent:0;
  font-size:1em;
  border-radius:0.5em;
}
ul.mam_list_svg2>li::before{
  position:absolute;
  display:inline-block; 
  vertical-align: middle;
  content:'';
  width:0.8em;
  height: 0.8em;
  left:0;
  top:0;
  background: #fff;
  border-radius: 50%;
  border:1px #666 solid;
  margin: 0.2em;
  background-image:url(
    "data:image/svg+xml;charset=utf-8,\
    %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' style='width:1em;height:1em;'%3E\
      %3Cpath style='fill:%23944;stroke:%23222;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;'\
        d='M20,60 A8,8 0,0,1 16,48 A18,24 0,0,1 48,48 A8,8 0,0,1 44,60 A32,32 0,0,0 20,60 z' \
      /%3E\
      %3Cpath style='fill:%23944;stroke:%23222;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;'\
        d='M10,20 a4,8 0,0,1 0,16 a4,8 0,0,1 0,-16 z' \
      /%3E\
      %3Cpath style='fill:%23944;stroke:%23222;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;'\
        d='M24,8 a4,8 0,0,1 0,16 a4,8 0,0,1 0,-16 z' \
      /%3E\
      %3Cpath style='fill:%23944;stroke:%23222;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;'\
        d='M40,8 a4,8 0,0,1 0,16 a4,8 0,0,1 0,-16 z' \
      /%3E\
      %3Cpath style='fill:%23944;stroke:%23222;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;'\
        d='M54,20 a4,8 0,0,1 0,16 a4,8 0,0,1 0,-16 z' \
      /%3E\
    %3C/svg%3E"
  );
  box-shadow:0.1em 0.1em 0.1em 0 rgba(0,0,0,0.4);
}
</style>

SVGを使った付箋風のリスト

インラインSVG画像を背景に使った付箋風のリスト

  • HTML
    CSS
  • UL LI
  • SVG
HTML・CSSソースコードを見る 
<ul class="mam_list_svg3">
  <li>HTML<br>CSS</li>
  <li>UL LI</li>
  <li>SVG</li>
</ul>
<style>
ul.mam_list_svg3{
  /*お好きなサイズに*/
  font-size:24px;
  margin:0;
  padding:0;
  background:none;
  box-sizing:border-box;
}
ul.mam_list_svg3>li{
  list-style-type: none!important;
  margin:0.2em 0.1em 0.2em 0.1em;
  padding:0.1em;
  /*お好きな色に*/
  border-left:#ACF 1em solid;
  border-top:0 none;
  border-right:0 none;
  border-bottom:0 none;
  text-indent:0;
  font-size:1em;
  border-radius:0.5em;
  background-image:url(
    "data:image/svg+xml;charset=utf-8,\
    %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' style='width:64px;height:64px;' preserveAspectRatio='none' %3E\
      %3Cpath style='fill:%23DEF;stroke:none;'\
        d='M0,0 L64,0 L64,56 L56,64 L0,64 z' \
      /%3E\
      %3Cpath style='fill:%23ACF;stroke:none;'\
        d='M62,44 L64,56 L56,64 z' \
      /%3E\
    %3C/svg%3E"
  );
  background-size: 100% 100%;
}
</style>