htmlとcssだけでできるリストデザイン15選です。
おもに[ul/li]でつくるリストを集めました。
色は好みで変えていただければ、かまいません。
また、基本htmlは<ul><li>タグを使用しています。
紹介している<ul>タグには、クラス名(.cp_list)を付与していますが、こちらも
css部分を下記のように変更すれば、クラスをつけずに使用することも可能です。
ul {cssの中身}
色には6桁の16進数のカラーコード(#000000)も使えますが、他に、
なども使用できます。
RGBA値での指定は、サポートしていないブラウザだと、透明度だけが無視されるのではなく、色指定そのものが認識されずに無効となるので注意が必要です。
<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;
line-height: 1.5;
border-left: solid 6px #1A237E;
background: #80DEEA;
color:#1A237E;
}
<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;
line-height: 1.5;
border-left: 6px solid #FFA000;
border-bottom: 2px solid #E0E0E0;
background: #FFE082;
color:#FFA000;
}
<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{
content:'';
position: absolute;
border-radius: 50%;
}
ul.cp_list li:before {
top: 50%;
left: 0.2em;
width: 17px;
height: 17px;
background: rgba(25,118,210, 1);
transform: translateY(-50%);
}
ul.cp_list li:after {
top: 1.1em;
left: 0.7em;
width: 14px;
height: 14px;
background: rgba(25,118,210, 0.5);
}
<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 {
content:'';
position: absolute;
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);
}
<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 0.5em 0.6em 0.5em;
margin-bottom: 5px;
line-height: 1.5;
vertical-align: middle;
background: #f1c6c6;
border-radius: 20px 0px 0px 20px;
color: #ffffff;
}
ul.cp_list li::before {
display:inline-block;
vertical-align: middle;
content:'';
margin-right: 8px;
width:1em;
height: 1em;
background: #fff;
border-radius: 50%;
}
<ul class="cp_list">
<li>css</li>
<li>html</li>
<li>copy</li>
<li>easy</li>
</ul>
ul.cp_list {
position: relative;
padding: 0.5em;
border: solid 1px #AB47BC;
list-style-type: none;
}
ul.cp_list li {
padding: 0.5em 0 0.5em 1.4em;
line-height: 1.5;
border-bottom: 1px dashed #AB47BC;
}
ul.cp_list li::before {
position: absolute;
content: "ul.cp_list {
position: relative;
padding: 0.5em;
border: solid 1px #AB47BC;
list-style-type: none;
}
ul.cp_list li {
padding: 0.5em 0 0.5em 1.4em;
line-height: 1.5;
border-bottom: 1px dashed #AB47BC;
}
ul.cp_list li::before {
position: absolute;
content: "\002713";
color: #AB47BC;
font-weight: bold;
left : 0.5em;
}
ul.cp_list li:last-of-type {
border-bottom: none;
}
2713";
color: #AB47BC;
font-weight: bold;
left : 0.5em;
}
ul.cp_list li:last-of-type {
border-bottom: none;
}
<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;
content: "LIST";
padding: 1px 7px;
letter-spacing: 0.05em;
font-weight: bold;
font-size: .8em;
background: #29B6F6;
color: #fff;
bottom: 100%;
left: -2px;
border-radius: 4px 4px 0px 0px;
}
ul.cp_list li {
line-height: 1.5;
padding: 0.5em 0 0.5em 1.4em;
border-bottom: 1px dashed #81D4FA;
}
ul.cp_list li::before {
position: absolute;
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;
content: "LIST";
padding: 1px 7px;
letter-spacing: 0.05em;
font-weight: bold;
font-size: .8em;
background: #29B6F6;
color: #fff;
bottom: 100%;
left: -2px;
border-radius: 4px 4px 0px 0px;
}
ul.cp_list li {
line-height: 1.5;
padding: 0.5em 0 0.5em 1.4em;
border-bottom: 1px dashed #81D4FA;
}
ul.cp_list li::before {
position: absolute;
content: "\002713";
color: #FF5722;
font-weight: bold;
left : 0.5em;
}
ul.cp_list li:last-of-type {
border-bottom: none;
}
2713";
color: #FF5722;
font-weight: bold;
left : 0.5em;
}
ul.cp_list li:last-of-type {
border-bottom: none;
}
<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;
content:attr(title);
padding: 1px 7px;
letter-spacing: 0.05em;
font-weight: bold;
font-size: .8em;
background: #00796B;
color: #fff;
bottom: 100%;
left: -2px;
border-radius: 4px 4px 0px 0px;
}
ul.cp_list li {
line-height: 1.5;
padding: 0.5em 0 0.5em 1.4em;
border-bottom: 1px dashed #4DB6AC;
}
ul.cp_list li::before {
position: absolute;
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;
content:attr(title);
padding: 1px 7px;
letter-spacing: 0.05em;
font-weight: bold;
font-size: .8em;
background: #00796B;
color: #fff;
bottom: 100%;
left: -2px;
border-radius: 4px 4px 0px 0px;
}
ul.cp_list li {
line-height: 1.5;
padding: 0.5em 0 0.5em 1.4em;
border-bottom: 1px dashed #4DB6AC;
}
ul.cp_list li::before {
position: absolute;
content: "\002713";
color: #00796B;
font-weight: bold;
left : 0.5em;
}
ul.cp_list li:last-of-type {
border-bottom: none;
}
2713";
color: #00796B;
font-weight: bold;
left : 0.5em;
}
ul.cp_list li:last-of-type {
border-bottom: none;
}
<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: 0.5em;
margin-bottom: 4px;
background: #FFECB3;
border-left : 2.5em solid #FF7043;
}
ul.cp_list li::before {
position: absolute;
content: "ul.cp_list {
padding: 0 0.5em;
list-style-type: none;
}
ul.cp_list li {
position:relative;
padding: 0.5em;
margin-bottom: 4px;
background: #FFECB3;
border-left : 2.5em solid #FF7043;
}
ul.cp_list li::before {
position: absolute;
content: "\002713";
display: block;
padding: 0.5em;
color: #fff;
top: 50%;
left: -2.25em;
transform: translateY(-50%);
}
ul.cp_list li:last-of-type {
border-bottom: none;
}
2713";
display: block;
padding: 0.5em;
color: #fff;
top: 50%;
left: -2.25em;
transform: translateY(-50%);
}
ul.cp_list li:last-of-type {
border-bottom: none;
}
<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;
height:0;
width:0;
border-style: solid;
border-width: 6px 0 6px 9px;
border-color: transparent transparent transparent #3F51B5;
}
<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;
content:'';
display:block;
background: #FFC107;
top: 0.43em;
left: 0.5em;
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);
}
<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);
}
<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: '';
display: inline-block;
}
ul.cp_list li::after {
top: 8.4px;
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: 11px;
left: 0;
width: 9px;
height: 3px;
background-color: #BA68C8;
border-radius: 25%;
}
<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: '';
display: inline-block;
}
ul.cp_list li::after {
top: .35em;
left: 0em;
width: 14px;
height: 14px;
background-color: #EC407A;
border-radius: 100%;
}
ul.cp_list li::before {
z-index: 2;
top: 0.65em;
left: 0.3em;
width: 5px;
height: 5px;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: rotate(-45deg);
}
<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: inline-block;
}
ul.cp_list li::after {
top: 0.3em;
left: 0em;
width: 15px;
height: 15px;
background-color: #da3c41;
border-radius: 25%;
}
ul.cp_list li::before {
position: absolute;
top: 50%;
left: 0.8em;
height: 0;
width: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 8px solid #da3c41;
transform: translateY(-50%);
}
CSS3などで新たに追加された要素・装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。そんな時に「あ〜、あれストックしときゃよかったなぁ」って困った自分用のストックブログです。カスタマイズなどがしやすいよう、昨今のweb制作に取り入れられる一般的なコードを中心に掲載しています。
@copypet_jp More Info