コピペで使えるCSSとUL・LIタグを使ったリストのデザイン
丸マークのリスト
- HTML
CSS - UL LI
- SVG
- 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 LI
- SVG
- 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 LI
- SVG
- 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 LI
- SVG
- 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 LI
- SVG
- 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
- LI
- SVG
- 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>