コーディング豆知識【リスト編】

モノクロ

春 Haru
夏 Natsu
秋 Aki
冬 Fuyu

HTML

<ul class="list1">
	<li>春 Haru</li>
	<li>夏 Natsu</li>
	<li>秋 Aki</li>
	<li>冬 Fuyu</li>
</ul>

css

.list1{
	background: #fcfcfc;
	padding: 0.5em 0.5em 0.5em 2em;
	border: solid 3px gray;
}
.list1 li{
	line-height: 1.5;
	padding: 0.5em 0;
}

爽やか

春 Haru
夏 Natsu
秋 Aki
冬 Fuyu

HTML

<ul class="list2">
	<li>春 Haru</li>
	<li>夏 Natsu</li>
	<li>秋 Aki</li>
	<li>冬 Fuyu</li>
</ul>

css

.list2{
	color: #668ad8;
	border: dashed 2px #668ad8;
	background: #f1f8ff;
	padding: 0.5em 0.5em 0.5em 2em;
}
.list2 li{
	line-height: 1.5;
	padding: 0.5em 0;
}

二重線

春 Haru
夏 Natsu
秋 Aki
冬 Fuyu

HTML

<ul class="list3">
	<li>春 Haru</li>
	<li>夏 Natsu</li>
	<li>秋 Aki</li>
	<li>冬 Fuyu</li>
</ul>

css

.list3{
	color: #00b1bb;
	border: double 5px #00b1bb;
	background: #f1f8ff;
	padding: 0.5em 0.5em 0.5em 2em;
}
.list3 li{
	line-height: 1.5;
	padding: 0.5em 0;
}

上下のみボーダー

春 Haru
夏 Natsu
秋 Aki
冬 Fuyu

HTML

<ul class="list4">
	<li>春 Haru</li>
	<li>夏 Natsu</li>
	<li>秋 Aki</li>
	<li>冬 Fuyu</li>
</ul>

css

.list3{
	color: #00b1bb;
	border: double 5px #00b1bb;
	background: #f1f8ff;
	padding: 0.5em 0.5em 0.5em 2em;
}
.list3 li{
	line-height: 1.5;
	padding: 0.5em 0;
}

クール

春 Haru
夏 Natsu
秋 Aki
冬 Fuyu

HTML

<ul class="list5">
	<li>春 Haru</li>
	<li>夏 Natsu</li>
	<li>秋 Aki</li>
	<li>冬 Fuyu</li>
</ul>

css

.list3{
	color: #00b1bb;
	border: double 5px #00b1bb;
	background: #f1f8ff;
	padding: 0.5em 0.5em 0.5em 2em;
}
.list3 li{
	line-height: 1.5;
	padding: 0.5em 0;
}

シャドウボックス

春 Haru
夏 Natsu
秋 Aki
冬 Fuyu

HTML

<ul class="list6">
	<li>春 Haru</li>
	<li>夏 Natsu</li>
	<li>秋 Aki</li>
	<li>冬 Fuyu</li>
</ul>

css

.list3{
	color: #00b1bb;
	border: double 5px #00b1bb;
	background: #f1f8ff;
	padding: 0.5em 0.5em 0.5em 2em;
}
.list3 li{
	line-height: 1.5;
	padding: 0.5em 0;
}

付箋風

春 Haru
夏 Natsu
秋 Aki
冬 Fuyu

HTML

<ul class="list7">
	<li>春 Haru</li>
	<li>夏 Natsu</li>
	<li>秋 Aki</li>
	<li>冬 Fuyu</li>
</ul>

css

.list7{
	padding: 0;
	position: relative;
}
.list7 li{
	color: #9151dd;
	border-left: solid 6px #bf9de7;
	background: #d6c7e7;
	margin-bottom: 3px;
	line-height: 1.5;
	padding: 0.5em;
	list-style-type: none!important;
}

タグ風

春 Haru
夏 Natsu
秋 Aki
冬 Fuyu

HTML

<ul class="list8">
	<li>春 Haru</li>
	<li>夏 Natsu</li>
	<li>秋 Aki</li>
	<li>冬 Fuyu</li>
</ul>

css

.list8{
	padding: 0;
}
.list8 li{
	position: relative;
	list-style-type: none!important;
	padding: 0.5em 0.5em 0.5em 0.5em;
	margin-bottom: 5px;
	line-height: 1.5;
	background: #dbebf8;
	vertical-align: middle;
	color: #505050;
	border-radius: 15px 0px 0px 15px;
}
.list8 li:before{
	display:inline-block;
	vertical-align: middle;
	content:'';
	width:1em;
	height: 1em;
	background: #fff;
	border-radius: 50%;
	margin-right: 8px;
}

シェブロンマーク

春 Haru
夏 Natsu
秋 Aki
冬 Fuyu

HTML

<ul class="list9">
	<li>春 Haru</li>
	<li>夏 Natsu</li>
	<li>秋 Aki</li>
	<li>冬 Fuyu</li>
</ul>

css

.list9{
	border: solid 2px #14b3fd;
	border-radius: 5px;
	padding: 0.5em 1em 0.5em 2.3em;
	position: relative;
}
.list9 li{
	position: relative;
	line-height: 1.5;
	padding: 0.5em 0;
	list-style-type: none!important;
}
.list9 li::before{
	content: '';
	position: absolute;
	top: .7em;
	left: -1.4em;
	width: 1em;
	height: 1em;
	border-radius: 50%;
	background-color: #14b3fd;
}
.list9 li::after{
	content: "\03e";
	position: absolute;
	top: .7em;
	left: -1.2em;
	color: #fff;
	font-weight: bold;
	transform: scale(0.5, 1);
	line-height: 1;
	font-family: fantasy;
}

チェックリスト

春 Haru
夏 Natsu
秋 Aki
冬 Fuyu

HTML

<ul class="list10">
	<li>春 Haru</li>
	<li>夏 Natsu</li>
	<li>秋 Aki</li>
	<li>冬 Fuyu</li>
</ul>

css

.list10{
	border: solid 2px #ffb03f;
	padding: 0.5em 1em 0.5em 2.3em;
	position: relative;
}
.list10 li{
	position: relative;
	line-height: 1.5;
	padding: 0.5em 0;
	list-style-type: none!important;
}
.list10 li:before{
	content: '';
	display: block;
	position: absolute;
	top: .7em;
	left: -1.5em;
	width: 10px;
	height: 5px;
	border-left: 3px solid #ffb03f;
	border-bottom: 3px solid #ffb03f;
	transform: rotate(-45deg);
}

三角形

春 Haru
夏 Natsu
秋 Aki
冬 Fuyu

HTML

<ul class="list11">
	<li>春 Haru</li>
	<li>夏 Natsu</li>
	<li>秋 Aki</li>
	<li>冬 Fuyu</li>
</ul>

css

.list11{
	box-shadow :0px 0px 3px silver;
	border: solid 1px whitesmoke;
	padding: 0.5em 1em 0.5em 2.3em;
	position: relative;
	background: #fafafa;
}
.list11 li{
	line-height: 1.5;
	padding: 0.5em 0;
	list-style-type: none!important;
}
.list11 li:before{
	content: '\025b6';
	position: absolute;
	left: 1.5em;
	color: gray;
	font-size: 10px;
	line-height: 1.7;
}

シェブロンマーク

春 Haru
夏 Natsu
秋 Aki
冬 Fuyu

HTML

<ul class="list12">
	<li>春 Haru</li>
	<li>夏 Natsu</li>
	<li>秋 Aki</li>
	<li>冬 Fuyu</li>
</ul>

css

.list12{
	border: solid 2px #ffb03f;
	padding: 0.5em 1em 0.5em 1em;
	position: relative;
	margin-top: 2.5em;
}
.list12::after{
	background: #ffb03f;
	color: #fff;
	font-weight: bold;
	position: absolute;
	left: -2px;
	bottom: 100%;
	padding: 1px 7px;
	content: "POINT";
	letter-spacing: 0.05em;
}
.list12 li{
	position: relative;
	line-height: 1.5;
	padding: 0.5em 0 0.5em 1.7em;
	list-style-type: none!important;
	border-bottom: dashed 1px silver;
}
.list12 li:last-of-type{
	border-bottom: 0;
}
.list12 li::before{
	content: '';
	position: absolute;
	top: .7em;
	left: 0;
	width: 1em;
	height: 1em;
	border-radius: 50%;
	background-color: #ffb03f;
}
.list12 li::after{
	content: "\03e";
	position: absolute;
	top: .7em;
	left: .25em;
	color: #fff;
	font-weight: bold;
	transform: scale(0.5, 1);
	line-height: 1;
	font-family: fantasy;
}