CSSで作るリストデザイン

HTMLのリスト要素である「ul」「ol」は連番や丸、四角などの形を作成できますが、デザイン面がいまいちです。

しかし画像を一から作るのは手間がかかり、大変です。そこでCSSを使用して画像の代用できないかと思い10種類のリストデザインを作成してみました。

  1. 三角形のリスト
  2. 矢印のリスト
  3. ○×のリスト
  4. チェックリスト
  5. ノート風リスト
  6. ひし形リスト
  7. タグリスト
  8. フキダシ風リスト
  9. ボックス風リスト
  10. 数字のリスト

三角形のリスト

  • List Design1
  • List Design2
  • List Design3
HTML
<ul class="defaultlist list1">
   <li>List Design1</li>
   <li>List Design2</li>
   <li>List Design3</li>
</ul>
CSS
.defaultlist
,.defaultlist li{
	padding:0px;
	margin:0px;
}

.defaultlist li{
	list-style-type:none !important;
	list-style-image:none !important;
	margin: 5px 0px 5px 0px !important;
}

.list1 li{
	position:relative;
	padding-left:20px;
}

.list1 li:before{
	content:''; 
	display:block; 
	position:absolute; 
	box-shadow: 0 0 2px 2px rgba(255,255,255,0.2) inset;
	top:3px; 
	left:2px; 
	height:0; 
	width:0; 
	border-top: 6px solid transparent;
	border-right: 7px solid transparent;
	border-bottom: 6px solid transparent;
	border-left: 9px solid #aaa;
}

矢印のリスト

  • List Design1
  • List Design2
  • List Design3
HTML
<ul class="defaultlist list2">
   <li>List Design1</li>
   <li>List Design2</li>
   <li>List Design3</li>
</ul>
CSS
.defaultlist
,.defaultlist li{
	padding:0px;
	margin:0px;
}

.defaultlist li{
	list-style-type:none !important;
	list-style-image:none !important;
	margin: 5px 0px 5px 0px !important;
}

.list2 li{
	position:relative;
	padding-left:20px;
}

.list2 li:before{
	content:''; 
	height:0; 
	width:0; 
	display:block; 
	border:5px transparent solid; 
	border-right-width:0; 
	border-left-color:#aaa; 
	position:absolute; 
	top:5px; 
	left:8px;
}
 
.list2 li:after{
	content:''; 
	height:2px; 
	width:10px; 
	display:block; 
	background:#aaa; 
	position:absolute; 
	top:9px; 
	left:0px;
}

○×のリスト

  • List Design1
  • List Design2
  • List Design3
HTML
<ul class="defaultlist list3">
   <li class="list3-maru">List Design1</li>
   <li class="list3-batu">List Design2</li>
   <li class="list3-maru">List Design3</li>
</ul>
CSS
.defaultlist
,.defaultlist li{
	padding:0px;
	margin:0px;
}

.defaultlist li{
	list-style-type:none !important;
	list-style-image:none !important;
	margin: 5px 0px 5px 0px !important;
}

.list3 li{
	position:relative;
	padding-left:20px;
}

.list3-maru:after{
	content:''; 
	display:block; 
	position:absolute; 
	top:3px; 
	left:3px; 
	border-radius:30px;
	height:7px; 
	width:7px; 
	border:3px solid #aaa;
}

.list3-batu:before, .list3-batu:after{
	content:''; 
	display:block; 
	position:absolute; 
	top:8px; 
	left:3px;
	height:4px; 
	width:14px; 
	background:#aaa; 
	transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);
	-o-transform:rotate(-45deg);
}
.list3-batu:after{
	transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	-o-transform:rotate(45deg);
}

チェックリスト

  • List Design1
  • List Design2
  • List Design3
HTML
<ul class="defaultlist list4">
   <li>List Design1</li>
   <li>List Design2</li>
   <li>List Design3</li>
</ul>
CSS
.defaultlist
,.defaultlist li{
	padding:0px;
	margin:0px;
}

.defaultlist li{
	list-style-type:none !important;
	list-style-image:none !important;
	margin: 5px 0px 5px 0px !important;
}

.list4 li{
	position:relative;
	padding-left:20px;
}

.list4 li:after, .list4 li:before{
	content:''; 
	display:block; 
	position:absolute; 
	top:4px; 
	left:8px; 
	height:11px; 
	width:4px; 
	background:#aaa; 
	border-radius:10px;
	transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	-o-transform:rotate(45deg);
}
.list4 li:before{
	top:8px; 
	left:3px;
	height:8px; 
	transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);
	-o-transform:rotate(-45deg);
}

ノート風リスト

  • List Design1
  • List Design2
  • List Design3
HTML
<ul class="defaultlist list5">
   <li>List Design1</li>
   <li>List Design2</li>
   <li>List Design3</li>
</ul>
CSS
.defaultlist
,.defaultlist li{
	padding:0px;
	margin:0px;
}

.defaultlist li{
	list-style-type:none !important;
	list-style-image:none !important;
	margin: 5px 0px 5px 0px !important;
}

.list5 li{
	position:relative;
	padding-left:20px;
}
.list5 li:before{
	content:''; 
	height:0px; 
	width: 90%;
	display:block; 
	position:absolute; 
	top:18px; 
	left:0px; 
	border-bottom: 1px dashed #aaa;
}
.list5 li:after{
	content:'';
	display:block; 
	position:absolute; 
	background:#aaa;
	width:5px;
	height:5px; 
	top:7px; 
	left:5px; 
	border-radius: 5px;
}

ひし形リスト

  • List Design1
  • List Design2
  • List Design3
HTML
<ul class="defaultlist list6">
   <li>List Design1</li>
   <li>List Design2</li>
   <li>List Design3</li>
</ul>
CSS
.defaultlist
,.defaultlist li{
	padding:0px;
	margin:0px;
}

.defaultlist li{
	list-style-type:none !important;
	list-style-image:none !important;
	margin: 5px 0px 5px 0px !important;
}

.list6 li{
	position:relative;
	padding-left:20px;
}

.list6 li:after{
	content:'';
	display:block; 
	position:absolute; 
	background:#aaa;
	width:9px;
	height:9px; 
	top:5px; 
	left:5px; 
	transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);
	-o-transform:rotate(-45deg);
}

タグリスト

  • List Design1
  • List Design2
  • List Design3
HTML
<ul class="defaultlist list7">
   <li>List Design1</li>
   <li>List Design2</li>
   <li>List Design3</li>
</ul>
CSS
.defaultlist
,.defaultlist li{
	padding:0px;
	margin:0px;
}

.defaultlist li{
	list-style-type:none !important;
	list-style-image:none !important;
	margin: 5px 0px 5px 0px !important;
}

.list7 li{
	position:relative;
	display: block;
	padding: 5px 0px 5px 30px;
	background: #ccc;
	color: #444;
	border-radius:15px 0px 0px 15px;
}

.list7 li:after{
	content:'';
	display:block; 
	position:absolute;
	width:14px;
	height: 14px;
	top:7px;
	left:5px;
	background: #fff;
	border-radius: 10px;
}

フキダシ風リスト

  1. List Design1
  2. List Design2
  3. List Design3
HTML
<ol class="defaultlist list8">
   <li class="list8-count">List Design1</li>
   <li class="list8-count">List Design2</li>
   <li class="list8-count">List Design3</li>
</ol>
CSS
.defaultlist
,.defaultlist li{
	padding:0px;
	margin:0px;
}

.defaultlist li{
	list-style-type:none !important;
	list-style-image:none !important;
	margin: 5px 0px 5px 0px !important;
}

.list8{
	counter-reset:li;
	margin-left:20px !important;
}

.list8 li{
	position:relative;
	display: block;
	padding:8px 0px 8px 40px; 
}

li.list8-count:after{
	counter-increment: li;
	content: counter(li);
	position: absolute;	
	left: -16px;
	top: 2px;
	background: #ccc;
	height: 30px;
	width: 30px;
	line-height: 32px;
	border: 2px solid #aaa;
	text-align: center;
	font-weight: bold;
	border-radius: 30px;
}

li.list8-count:before{
	content:''; 
	display:block; 
	position:absolute; 
	box-shadow: 0 0 2px 2px rgba(255,255,255,0.2) inset;
	top:11px; 
	left:15px; 
	height:0; 
	width:0; 
	border-top: 8px solid transparent;
	border-right: 7px solid transparent;
	border-bottom: 8px solid transparent;
	border-left: 13px solid #aaa;
}

ボックス風リスト

  1. List Design1
  2. List Design2
  3. List Design3
HTML
<ol class="defaultlist list9">
   <li class="list9-count">List Design1</li>
   <li class="list9-count">List Design2</li>
   <li class="list9-count">List Design3</li>
</ol>
CSS
.defaultlist
,.defaultlist li{
	padding:0px;
	margin:0px;
}

.defaultlist li{
	list-style-type:none !important;
	list-style-image:none !important;
	margin: 5px 0px 5px 0px !important;
}

.list9{
	counter-reset:li;   
}
.list9 li{
	position:relative;
	display: block;
	padding:5px 0px 5px 50px; 
	background: #ccc;
	border: 2px solid #aaa;
	border-radius: 2px;
	margin-left:-15px !important;
}
li.list9-count:after{
	counter-increment: li;
	content: counter(li);
	position: absolute;	
	left: 0px;
	top: 0px;
	background: #aaa;
	height: 30px;
	width: 30px;
	line-height: 30px;
	border: 2px solid #aaa;
	text-align: center;
	font-weight: bold;
	border-radius: 2px;
}

li.list9-count:before{
	content:''; 
	display:block; 
	position:absolute; 
	box-shadow: 0 0 2px 2px rgba(255,255,255,0.2) inset;
	top:8px; 
	left:33px; 
	height:0; 
	width:0; 
	border-top: 8px solid transparent;
	border-right: 7px solid transparent;
	border-bottom: 8px solid transparent;
	border-left: 13px solid #aaa;
}

数字のリスト

  1. List Design1
  2. List Design2
  3. List Design3
HTML
<ol class="defaultlist list10">
   <li class="list10-count">List Design1</li>
   <li class="list10-count">List Design2</li>
   <li class="list10-count">List Design3</li>
</ol>
CSS
.defaultlist
,.defaultlist li{
	padding:0px;
	margin:0px;
}

.defaultlist li{
	list-style-type:none !important;
	list-style-image:none !important;
	margin: 5px 0px 5px 0px !important;
}

.list10{
	counter-reset:li;   
}

.list10 li{
	position:relative;
	display: block;
	padding:10px 0px 10px 30px; 
	margin-left:0px !important;
}

li.list10-count:after{
	counter-increment: li;
	content: counter(li) ".";
	position: absolute;	
	display: block;
	text-align: center;
	font-style: italic;
	left: 0px;
	top: -1px;
	font-size: 30px;
	color:#bbb;
	font-family:'Goudy Bookletter 1911',Georgia,serif; 
}
divider

Trackback URL

http://webnonotes.com/css/css-list/trackback/

No Comments Yet

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>