CSSで作るリストデザイン30選！オシャレな箇条書きを実現

2017/3/14 CSSデザイン

出典 : Designed by Freepik

HTMLのul、ol、liタグとCSSを使ったリスト(箇条書き)デザインを紹介します。 どのリストデザインも画像などは使わず、HTMLとCSSだけで表現することが可能です。

またコピペするだけでブログやホームページに実装できますので、気に入ったのがあればお試しください。

olを使ったオシャレなリストデザイン

まずはhtmlのolタグを使った、番号付きのリスト(箇条書き)デザインから紹介します。 番号が必要なリストに対して使用して下さい。

またほとんどのリストデザインには、下記のHTMLコードを使っています。 違うHTMLコードを使用する場合は、CSSコードと合わせて掲載します。

<ol class="sample1">
  <li>HTML</li>
  <li>CSS</li>
  <li>Javacrip</li>
  <li>Photoshop</li>
</ol>

番号に四角の背景を付けたリスト

番号に四角の背景を付けたリストのサンプル

リスト全体を薄いピンクの背景で塗りつぶし、各リスト項目の番号のみを濃いピンクで塗りつぶしたリストデザインです。

CSSコードを表示

ol.sample1{
  counter-reset:list;
  list-style-type:none;
  font: 14px/1.6 'arial narrow', sans-serif;
  background: #fef6f3;
  padding: 1.5em;
}

ol.sample1 li{
  position:relative;
  padding: 5px 5px 5px 10px;
  margin: 7px 0 7px 40px;
  font-weight: bold;
  font-size:14px;
}

ol.sample1 li:before{
  counter-increment: list;
  content: counter(list);
  position: absolute;
  left: -35px;
  width: 30px;
  height: 30px;
  background: #F6A38B;
  text-align: center;
  color: #fff;
  line-height:30px;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

番号の背景をひし形にしたタイプ

番号の背景をひし形にしたタイプのサンプル

リストの番号の背景をひし形にしたタイプのリストデザインです。 四角の幅を少し狭くし、整えています。 ちなみに余計なコードが入っているので、必要であれば修正して下さい。

CSSコードを表示

ol.sample1{
  counter-reset:list;
  list-style-type:none;
  font: 14px/1.6 'arial narrow', sans-serif;
  background: #fef6f3;
  padding: 1.5em;
}

ol.sample1 li{
  position:relative;
  padding: 5px 5px 5px 10px;
  margin: 7px 0 7px 40px;
  font-weight: bold;
  font-size:14px;
}

ol.sample1 li:before{
  counter-increment: list;
  content: counter(list);
  position: absolute;
  top: 0;
  left: -35px;
  width: 30px;
  height: 30px;
  text-align: center;
  color: #fff;
  line-height:30px;
   z-index:1;
}
ol.sample1 li:after{
  content:"";
  position: absolute;
  top: 3px;
  left: -32px;
  width: 25px;
  height: 25px;
  background: #F6A38B;
  color: #fff;
  line-height:30px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

番号の背景を丸にしたデザイン

番号の背景を丸にしたデザインのサンプル

番号の背景を丸にしたリストデザインです。かなりシンプルなデザインとなっています

CSSコードを表示

ol.sample1{
  counter-reset:list;
  list-style-type:none;
  font: 14px/1.6 'arial narrow', sans-serif;
  background: #fef6f3;
  padding: 1.5em;
}

ol.sample1 li{
  position:relative;
  padding: 5px 5px 5px 10px;
  margin: 7px 0 7px 40px;
  font-weight: bold;
  font-size:14px;
}

ol.sample1 li:before{
  counter-increment: list;
  content: counter(list);
  position: absolute;
  left: -35px;
  width: 30px;
  height: 30px;
  text-align: center;
  color: #fff;
  line-height:30px;
  background: #F6A38B;
  border-radius: 50%;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

四角に下線を付けたリスト

四角に下線を付けたリストのサンプル

リスト項目に下線を付け、番号の背景を四角で塗りつぶしたタイプです

CSSコードを表示

ol.sample1{
  counter-reset:list;
  list-style-type:none;
  font: 14px/1.6 'arial narrow', sans-serif;
  padding: 1.5em;
}
 
ol.sample1 li{
  position:relative;
  padding: 4px 5px 4px 10px;
  margin: 7px 0 10px 40px;
  font-weight: bold;
  font-size:14px;
  border-bottom:solid 1px #F6A38B;
}
 
ol.sample1 li:before{
  counter-increment: list;
  content: counter(list);
  position: absolute;
  left: -30px;
  width: 30px;
  height: 32px;
  background: #F6A38B;
  text-align: center;
  color: #fff;
  line-height:30px;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

背景を付けたタイプ

番号とリスト項目に背景を付けたタイプのサンプル

リストの項目に背景を付け、左のボーダー(border)を太くしてリスト番号にも背景が付いているように見せているタイプのデザインです。

CSSコードを表示

ol.sample1{
  counter-reset:list;
  list-style-type:none;
  font: 14px/1.6 'arial narrow', sans-serif;
  padding: 1.5em;
}
ol.sample1 li{
  position:relative;
  padding: 5px 5px 5px 10px;
  margin: 7px 0 10px 0px;
  font-weight: bold;
  font-size:14px;
  background: #fef6f3;
  border-left:30px solid #F6A38B;
}
ol.sample1 li:before{
  counter-increment: list;
  content: counter(list);
  position: absolute;
  left: -30px;
  width: 30px;
  height: 32px;
  text-align: center;
  color: #fff;
  line-height:30px;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

番号を吹き出し風にしたデザイン

番号を吹き出し風にしたデザインのサンプル

番号に背景を付け、さらにafterプロパティで三角形を作り重ねて吹き出しのような感じにしています。 また数字のデザインを変えたい場合は、beforeプロパティにフォントファミリーを設定する事で変更できます。

CSSコードを表示

ol.sample1{
  counter-reset:list;
  list-style-type:none;
  font: 14px/1.6 'arial narrow', sans-serif;
  padding: 1.5em;
}
ol.sample1 li{
  position:relative;
  padding: 5px 5px 5px 10px;
  margin: 7px 0 10px 30px;
  font-weight: bold;
  font-size:14px;
  background: #fef6f3;
}
ol.sample1 li:before{
  counter-increment: list;
  content: counter(list);
  position: absolute;
  left: -40px;
  width: 30px;
  height: 32px;
  text-align: center;
  color: #fff;
  line-height:30px;
  background: #F6A38B;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
ol.sample1 li:after{
  content:"";
  display: block;
  position: absolute;
  left: -10px;
  height: 0;
  width: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 7px solid #F6A38B;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

円状の吹き出し風

円状の吹き出し風のサンプル

円状の吹き出し風のデザインです。 単純にborder-radiusプロパティを追加し、番号の部分を丸くしているだけとなります。 またafterプロパティで重ねている三角形の形を変えると、もうちょっとユニークなリストデザインとなります。

CSSコードを表示

ol.sample1{
  counter-reset:list;
  list-style-type:none;
  font: 14px/1.6 'arial narrow', sans-serif;
  padding: 1.5em;
}
ol.sample1 li{
  position:relative;
  padding: 5px 5px 5px 10px;
  margin: 7px 0 10px 30px;
  font-weight: bold;
  font-size:14px;
  background: #fef6f3;
}
ol.sample1 li:before{
  counter-increment: list;
  content: counter(list);
  position: absolute;
  left: -40px;
  width: 30px;
  height: 32px;
  text-align: center;
  color: #fff;
  line-height:30px;
  background: #F6A38B;
  border-radius: 50%;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
ol.sample1 li:after{
  content:"";
  display: block;
  position: absolute;
  left: -12px;
  height: 0;
  width: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 8px solid #F6A38B;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

liに下線を付けたデザイン

liに下線を付けたデザインのサンプル

liタグに下線を下線を付ける事で、箇条書きリスト全体を見やすくしているタイプのデザインです。 またolタグ(要素)に枠線(border)を付けるとよりよくなると思います。

CSSコードを表示

ol.sample1{
  counter-reset:list;
  list-style-type:none;
  font: 14px/1.6 'arial narrow', sans-serif;
  padding: 1.5em;
}
ol.sample1 li{
  position:relative;
  padding: 7px 5px 7px 40px;
  margin: 7px 0 10px 30px;
  font-weight: bold;
  font-size:14px;
  border-bottom:dashed 1px #F6A38B;
}
ol.sample1 li:before{
  counter-increment: list;
  content: counter(list);
  position: absolute;
  left: 0px;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  color: #fff;
  background: #F6A38B;
  border-radius: 50%;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

手書き風の箇条書き

手書き風の箇条書きサンプル

古い紙の上に手書きで箇条書きしたようなリストデザインです。 使いどころはあまりないような気がしますが、ユニークだったので作ってみました。 右下のテキストは自由に変更することが可能です。 またgoogle fontsを使うともっと綺麗になります。

CSSコードを表示

ol.sample1{
  counter-reset:list;
  list-style-type:none;
  position:relative;
  font: 14px/1.6 'Mv Boli', 'arial narrow', sans-serif;
  padding: 1.2em;
  background:#F2EFE7;
  -webkit-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
  -moz-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
  width:340px;
}
ol.sample1:after{
  content:"list-sample";  /* 右下の文字 */
  position: absolute;
  bottom: 8px;
  right: 1.2em;
  font-size:12px;
  color:#bbb;
}
ol.sample1 li{
  position:relative;
  padding: 7px 5px 7px 50px;
  margin: 7px 0 10px 0px;
  font-weight: bold;
  font-size:14px;
  border-bottom:dashed 1px #ccc;
  color:#333;
}
ol.sample1 li:first-child{
  margin-top:0;
}
ol.sample1 li:last-child{
  margin-bottom:20px;
}
ol.sample1 li:before{
  counter-increment: list;
  content: counter(list) ",";
  position: absolute;
  left: 15px;
  font-size:1.2em;
   top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

ホバーで矢印が出てくるタイプ

ホバーで矢印が出てくるタイプのサンプル

olの中にさらにolタグを含め、番号がリセットされるタイプのリストデザインです。 リスト項目にマウスを重ねる(ホバーする)と背景の色が変わり、矢印が左から出現します。 またliタグの中に複数のol、またはulを入れる事が可能です。 

<ol class="sample1">
  <li><a href="">HOME</a></li>
  <li><a href="">Information</a></li>
  <li><a href="">Category</a>
    <ol>
      <li><a href="">html</a></li>
      <li><a href="">css</a></li>
      <li><a href="">javacrip</a></li>
    </ol>
  </li>
  <li><a href="">Site map</a></li>
  <li><a href="">Mail</a></li>			
</ol>

CSSコードを表示

ol.sample1,
ol.sample1 ol{
  counter-reset: list;
  list-style: none;
  padding: 0;
  width:350px;
  font: 14px/1.6 'arial narrow', sans-serif;
}
ol.sample1 ol{
  margin: 0 0 0 35px;
  width:315px;
}

.sample1 a{
  position: relative;
  display: block;
  text-decoration: none;
  padding: 3px 3px 3px 8px;
  margin: 8px 0 8px 30px;
  background: #f1f8ff;
  color: #333;
  font-weight: bold;
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -ms-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  transition: all .3s ease-out;	
}

.sample1 a:hover{
  background: #ffd9d3;
}	

.sample1 a:before{
  content: counter(list);
  counter-increment: list;
  position: absolute;	
  left: -35px;
  top: 50%;
  height: 28px;
  width: 28px;
  margin-top: -1em;
  background: #5c9ee7;
  line-height: 28px;
  text-align: center;
  font-weight: bold;
  color: #fff;
}

.sample1 a:after{	
  content: '';
  position: absolute;
  left: -28px;
  top: 50%;
  margin-top: -6px;
  border: 6px solid transparent;
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -ms-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  transition: all .3s ease-out;				
}

.sample1 a:hover:after{
  left: -6px;
  border-left-color: #5c9ee7;				
}

マウスホバーで回転するリストデザイン

マウスホバーで回転するリストデザインのサンプル

各リストにマウスホバーすると、番号の部分が右に移動しながら回転します。 いわゆるネジのようにグルグル回りながら、一定の位置まで移動します。 またこのリストデザインでも複数のul、olタグを含める事ができます。 

<ol class="sample1">
  <li><a href="">HOME</a></li>
  <li><a href="">Information</a></li>
  <li><a href="">Category</a>
    <ol>
      <li><a href="">html</a></li>
      <li><a href="">css</a></li>
      <li><a href="">javacrip</a></li>
    </ol>
  </li>
  <li><a href="">Site map</a></li>
  <li><a href="">Mail</a></li>			
</ol>

CSSコードを表示

ol.sample1,
ol.sample1 ol{
  counter-reset: list;
  list-style: none;
  padding: 0;
  width:350px;
  font: 14px/1.6 'arial narrow', sans-serif;
}
ol.sample1 ol{
  margin: 0 0 0 35px;
  width:315px;
}

.sample1 a{
  position: relative;
  display: block;
  padding: 4px 4px 4px 31px;
  margin: 7px 0;
  background: #fef6f3;
  color: #333;
  font-weight: bold;
  text-decoration: none;
  border-radius: 5px;
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -ms-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  transition: all .3s ease-out;	
}

.sample1 a:hover{
  background: #b3d5ed;
}

.sample1 a:hover:before{
  left: -10px;
  -moz-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  transform: rotate(360deg);	
}

.sample1 a:before{
  content: counter(list);
  counter-increment: list;
  position: absolute;	
  top: 50%;
  left: -15px;
  height: 26px;
  width: 26px;
  margin-top: -15px;
  background: #F6A38B;
  color: #fff;
  line-height: 26px;
  border: 3px solid #fff;
  text-align: center;
  font-weight: bold;
  border-radius: 26px;
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -ms-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  transition: all .3s ease-out;
}

ulを使ったシンプルなリストデザイン

ulタグを使ったシンプルなリストデザインです。 番号が必要ない(意味を持たない)箇条書きリストを作成したい場合に使用して下さい。

HTMLコードは下記のモノを使用しています。

<ul class="sample1">
  <li>HTML</li>
  <li>CSS</li>
  <li>Javacrip</li>
  <li>Photoshop</li>
</ul>

枠線を付けたシンプルデザイン

枠線を付けたシンプルデザインのサンプル

ulの箇条書きに枠線を付けただけのシンプルなリストデザインです。 シンプルイズベストという事で、紹介してみました。

CSSコードを表示

ul.sample1{
  padding: 0.5em 0.5em 0.5em 2em;
  font: 14px/1.6 'arial narrow', sans-serif;
  border: solid 2px #333;
  color: #333;
  width:350px;
}
ul.sample1 li{
  font-weight: bold;
}

可愛いリストデザイン

可愛いリストデザインのサンプル

丸みのある点線を付けた、オシャレで可愛いリストデザインです。 シンプル、そして可愛い箇条書きリストにしたい時にピッタリ！

CSSコードを表示

ul.sample1{
  padding: 0.5em 0.5em 0.5em 2em;
  font: 14px/1.6 'arial narrow', sans-serif;
  border: dashed 2px #adcce8;
  border-radius:8px;
  color: #adcce8;
  width:350px;
  background: #ecf3fa;
}
ul.sample1 li{
  font-weight: bold;
  color: #448ccb;
}

内側に点線を付けたタイプ

内側に点線を付けたタイプのサンプル

箇条書きリストの内側に点線を付け、さらに可愛くオシャレにしたタイプのリストデザイン。 box-shadowプロパティで点線の外側の背景を表現しています。
可愛いブログやホームぺージなどに最適！

CSSコードを表示

ul.sample1{
  padding: 0.5em 0.5em 0.5em 2em;
  font: 14px/1.6 'arial narrow', sans-serif;
  border: dashed 2px #adcce8;
  border-radius:8px;
  color: #adcce8;
  width:330px;
  background: #ecf3fa;
   -webkit-box-shadow: 0px 0px 0px 10px #ecf3fa;
  -moz-box-box-shadow: 0px 0px 0px 10px #ecf3fa;
  box-shadow: 0px 0px 0px 10px #ecf3fa;
}
ul.sample1 li{
  font-weight: bold;
  color: #448ccb;
}

影を付けたリストデザイン

影を付けたリストデザインのサンプル

リスト全体に背景をつけ、さらに影を付けただけのシンプルなリストデザインです。

CSSコードを表示

ul.sample1{
  padding: 0.5em 0.5em 0.5em 2em;
  font: 14px/1.6 'arial narrow', sans-serif;
  border-radius:8px;
  color: #adcce8;
  width:350px;
  background: #ecf3fa;
  -webkit-box-shadow:0 0 4px rgba(0, 0, 0, 0.2) ;
  -moz-box-shadow:0 0 4px rgba(0, 0, 0, 0.2) ;
  box-shadow:0 0 4px rgba(0, 0, 0, 0.2) ;
}
ul.sample1 li{
  font-weight: bold;
  color: #448ccb;
}

古い紙風のデザイン

古い紙風のデザインのサンプル

古ぼけた紙風というか、ノート風のデザインです。 さらにbefore・afterなどの疑似要素を使用して装飾すると、もう少し個性がでるような気がします。

CSSコードを表示

ul.sample1{
  position: relative;
  padding: 0.8em;
  font: 14px/1.6 'arial narrow', sans-serif;
  width:350px;
  background:#F2EFE7;
  list-style: none;
  -webkit-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
  -moz-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
}

ul.sample1 li{
  position:relative;
  font-weight: bold;
  color: #333;
  border-bottom:dashed 1px #ccc;
  padding:4px 0 4px 2em;
}
ul.sample1 li:last-child{
  margin-bottom:15px;
}
ul.sample1 li:before{
  content: "・";
  position: absolute;
  left: 10px;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

キャプションが付いているリストデザイン

キャプションが付いているリストデザインのサンプル

キャプションというか、好きな文字がワンポイントして付ける事ができるリストデザインです。 contentプロパティの部分へ好きなテキストを記述して下さい。

CSSコードを表示

ul.sample1{
  position: relative;
  padding: 15px 15px 15px 30px;
  font: 14px/1.6 'arial narrow', sans-serif;
  border: solid 2px #adcce8;
  border-radius:8px;
  color: #448ccb;
  width:340px;
  background: #fff;
}
ul.sample1:before{
  content: "POINT";  /* 好きな文字を記述 */
  position: absolute;
  display: block;
  top: -15px;
  left: 20px;
  background: #fff;
  font-size: 16px;
  font-weight: bold;
  padding: 0 10px;
}
ul.sample1 li{
  font-weight: bold;
}

カラフルなリストデザイン

カラフルなリストデザインのサンプル

リスト項目ごとに色が変わるリストデザインです。 項目を増やしても1つおきに色が変わります。 お好みで背景や枠線(border)を付けて装飾してみて下さい。

CSSコードを表示

ul.sample1{
  padding: 0.5em 0.5em 0.5em 2em;
  font: 14px/1.6 'arial narrow', sans-serif;
  width:350px;
  list-style: none;
}
ul.sample1 li{
  position: relative;
  font-weight: bold;
  padding: 0.5em 0.5em 0.5em 30px;
}
ul.sample1 li:nth-child(4n+1){
  border-bottom:dashed 1px #FFA79F;
}
ul.sample1 li:nth-child(4n+2){
  border-bottom:dashed 1px #FFE09D;
}
ul.sample1 li:nth-child(4n+3){
  border-bottom:dashed 1px #9FCDFF;
}
ul.sample1 li:nth-child(4n+4){
  border-bottom:dashed 1px #AFEBB6;
}
ul.sample1 li:before{
  content: "";
  position: absolute;
  left: 0px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: red;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
ul.sample1 li:nth-child(4n+1):before{
  background: #FFA79F;
}
ul.sample1 li:nth-child(4n+2):before{
  background: #FFE09D;
}
ul.sample1 li:nth-child(4n+3):before{
  background: #9FCDFF;
}
ul.sample1 li:nth-child(4n+4):before{
  background: #AFEBB6;
}

タグ風のデザイン

タグ風のデザインのサンプル

四角のタグ風のリストデザインです。 シンプルでちょっとオシャレな箇条書きリストにしたい時にどうぞ！

CSSコードを表示

ul.sample1{
  padding: 0;
  font: 14px/1.6 'arial narrow', sans-serif;
  width:350px;
  list-style: none;
}
ul.sample1 li{
  position: relative;
  padding: 7px 5px 7px 35px;
  margin-bottom:5px;
  background: #5c9ee7;
  color: #fff;
}
ul.sample1 li:before{
  content: "";
  position: absolute;
  left: 10px;
  display: block;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background: #fff;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

リストマーカーを被せたデザイン

リストマーカーを被せたデザインのサンプル

疑似要素を使ったリストマーカーに、テキストを被せたリストデザインです。 かなりシンプルになっています。

CSSコードを表示

ul.sample1{
  padding: 0.5em 0.5em 0.5em 2em;
  font: 14px/1.6 'arial narrow', sans-serif;
  width:350px;
  list-style: none;
}
ul.sample1 li{
  position: relative;
  font-weight: bold;
  padding: 0.5em 0.5em 0.5em 0px;
  font-size: 15px;
  text-shadow: 1px 1px 0 #fff;
  color: #333;
}
ul.sample1 li:before{
  content: "";
  position: absolute;
  left: -14px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: red;
  z-index: -1;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
ul.sample1 li:nth-child(4n+1):before{
  background: #FFA79F;
}
ul.sample1 li:nth-child(4n+2):before{
  background: #FFE09D;
}
ul.sample1 li:nth-child(4n+3):before{
  background: #9FCDFF;
}
ul.sample1 li:nth-child(4n+4):before{
  background: #AFEBB6;
}

ホバーで番号が大きくなるデザイン

ホバーで番号が大きくなるデザイン

リスト項目にマウスを重ねると番号の部分が大きくなる箇条書きデザインです。 リスト番号はCSSで表示しています。

CSSコードを表示

ul.sample1{
  counter-reset:li;
  padding: 0.5em 0.5em 0.5em 2em;
  font: 14px/1.6 'arial narrow', sans-serif;
  width:350px;
  list-style: none;
}
.sample1 li{
  position: relative;
  padding: 13px 4px 10px 20px;
  margin-top: 0.8em;
  border-bottom: 1px dashed #ccc;
  font-size: 20px;
  color: #333;
}

.sample1 li:before{
  counter-increment: li;
  content: counter(li);
  position: absolute;    
  z-index: -1;
  left: -5px;
  top: -3px;
  background: #f5f5f5;
  height: 1.5em;
  width: 1.5em;
  border: .1em solid rgba(0,0,0,.05);
  text-align: center;
  font: italic bold 1em/1.3em Georgia, Serif;
  color: #ccc;
  border-radius: 1.5em;
  transition: all .2s ease-out;
}

.sample1 li:hover:before{
  background-color: #ffd797;
  border-color: rgba(0,0,0,.08);
  border-width: .2em;
  color: #444;
  transform: scale(1.5);
}

付箋風のリストデザイン

付箋風のリストデザインのサンプル

よくあるような付箋風のリストデザインです。 薄い影を付けてみました。

CSSコードを表示

ul.sample1{
  padding: 0;
  font: 14px/1.6 'arial narrow', sans-serif;
  width:350px;
  list-style: none;
}
ul.sample1 li{
  position: relative;
  padding: 7px 5px 7px 10px;
  margin-bottom:5px;
  border-left: solid 5px #5c9ee7;
  background: #f1f8ff;
  color: #5c9ee7;
  font-weight: bold;
  -webkit-box-shadow:1px 1px 2px rgba(0, 0, 0, 0.1) ;
  -moz-box-shadow:1px 1px 2px rgba(0, 0, 0, 0.1) ;
  box-shadow:1px 1px 2px rgba(0, 0, 0, 0.1) ;
}

シンプルでオシャレなリストタイプ

シンプルでオシャレなタイプのサンプル

薄い円を重ねただけのシンプルだけど、オシャレに見えるデザインです。 薄い青をベースにしていますが、色を変えると感じも変わるのでお試しください。

CSSコードを表示

ul.sample1{
  padding: 0;
  font: 14px/1.6 'arial narrow', sans-serif;
  width:370px;
  list-style: none;
}
ul.sample1 li{
  position: relative;
  padding: 0.5em 1em 0.5em 2.3em;
  margin-bottom:5px;
  color: rgb(129,194,250);
  font-size: 15px;
  font-weight: bold;
  border-bottom: 1px solid rgba(129,194,250, 0.5);
}
ul.sample1 li:after,
ul.sample1 li:before{
  content: "";
  position: absolute;
  border-radius: 50%;
}
ul.sample1 li:before{
  left: 0.2em;
  width: 17px;
  height: 17px;
  background: rgba(129,194,250,0.5);
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
ul.sample1 li:after{
  top: 1.1em;
  left: 0.7em;
  width: 14px;
  height: 14px;
  background: rgba(129,194,250,0.3);
}

ずれたひし形風

ずれたひし形風のサンプル

ひし形をずらして、枠と背景がずれたような感じにしてみました。

CSSコードを表示

ul.sample1{
  padding: 0;
  font: 14px/1.6 'arial narrow', sans-serif;
  width:370px;
  list-style: none;
}
ul.sample1 li{
  position: relative;
  padding: 0.5em 1em 0.5em 2.3em;
  margin-bottom:5px;
  color: rgb(129,194,250);
  font-size: 15px;
  font-weight: bold;
  border-bottom: 1px solid rgba(129,194,250, 0.5);
}
ul.sample1 li:after,
ul.sample1 li:before{
  content: "";
  position: absolute;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
ul.sample1 li:before{
  top: 0.7em;
  left: 0.2em;
  width: 12px;
  height: 12px;
  border:2px solid rgba(129,194,250,0.5);
}
ul.sample1 li:after{
  top: 0.9em;
  left: 0.7em;
  width: 14px;
  height: 14px;
  background: rgba(129,194,250,0.3);
  -webkit-transform: rotate(60deg);
  -moz-transform: rotate(60deg);
  -o-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  transform: rotate(60deg);
}

アイコンフォントを使った箇条書き

アイコンフォントを使った箇条書きリストデザインの紹介です。 アイコンフォントは簡単にサイトに導入できる上に、高度でオシャレなデザインを実現することができます。

ここではFont Awesomeのアイコンフォントを使用したサンプルを紹介していきます。 Font Awesomeの導入の方法は下記をご覧ください。 またHTMLはulで使った時と同じものを使います。

スマホやタブレットなどのアイコンフォント【Font Awesome】
スマホやタブレットなどのアイコンフォント【Font Awesome】
スマホやタブレットなどのデバイスアイコン、snsなどのソーシャルアイコン、webアプリケーション、ビデオプレーヤー、...
www.yuu-diaryblog.com
2017-01-23 21:03

矢印のアイコンを使ったデザイン

矢印のアイコンを使ったデザイン

矢印のアイコンフォントを使用し、リスト全体を枠線で囲んだ一般的なデザインです。 ブログなどのカテゴリ欄などにありそうな感じです。

CSSコードを表示

ul.sample1{
  padding: 0 0.7em;
  font: 14px/1.6 'arial narrow', sans-serif;
  width:370px;
  list-style: none;
  border: solid 2px #5c9ee7;
  border-radius: 5px;
}
ul.sample1 li{
  position: relative;
  padding: 0.5em 1em 0.5em 2.3em;
  margin-bottom:5px;
  font-size: 15px;
  font-weight: bold;
  border-bottom: 1px dashed #5c9ee7;
}
ul.sample1 li:last-child{
  border:none;
}
ul.sample1 li:before{
  font-family: FontAwesome;
  content: "\f138";
  position: absolute;
  left: 0.3em;
  color: #5c9ee7;
  font-size: 1.2em;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

ブログのサイドバー風

ブログのサイドバー風のサンプル

ブログなどのサイドバーにありそうなリストデザインです。 ホバーで矢印のアイコンが動くように設定すると、なお綺麗になります。 今回はその指定をしていないので、お好みに合わせて設定してみて下さい。

CSSコードを表示

ul.sample1{
  padding: 0 0.7em;
  font: 14px/1.6 'arial narrow', sans-serif;
  width:370px;
  list-style: none;
  border: solid 2px #5c9ee7;
  border-radius: 5px;
}
ul.sample1 li{
  position: relative;
  padding: 0.5em 1em 0.5em 0.5em;
  margin-bottom:5px;
  font-size: 15px;
  font-weight: bold;
  border-bottom: 1px dashed #5c9ee7;
}
ul.sample1 li:last-child{
  border:none;
}
ul.sample1 li:before{
  font-family: FontAwesome;
  content: "\f054";
  position: absolute;
  right: 0.3em;
  color: #5c9ee7;
  font-size: 1.2em;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

スマホにありそうな感じ

スマホにありそうな感じのサンプル

スマホページのカテゴリやメニューにありそうな感じの箇条書きデザインです。 グラデーション背景の色変更の方法はfromで開始色を、toで終了色を指定して下さい。

CSSコードを表示

ul.sample1{
  padding: 0 0.7em;
  font: 14px/1.6 'arial narrow', sans-serif;
  width:370px;
  list-style: none;
}
ul.sample1 li{
  position: relative;
  padding: 0.5em 1em 0.5em 0.7em;
  font-size: 15px;
  font-weight: bold;
  color: #fff;
  background: #f1f8fe;
  background: -webkit-gradient(linear, left top, left bottom, from(#d8ecfd), to(#5ab0f9));
  background: -moz-linear-gradient(top, #d8ecfd, #5ab0f9);
  background: -o-linear-gradient(top, #d8ecfd, #5ab0f9);
  background: -ms-linear-gradient(top, #d8ecfd, #5ab0f9);
  background: linear-gradient(top, #d8ecfd, #5ab0f9);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#d8ecfd', endColorstr='#5ab0f9');
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#d8ecfd', endColorstr='#5ab0f9')";
  background: linear-gradient(top, #d8ecfd, #5ab0f9);
  -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
  -moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
  box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
  zoom: 1;
}
ul.sample1 li:last-child{
  border:none;
  margin: 0;
}
ul.sample1 li:before{
  font-family: FontAwesome;
  content: "\f054";
  position: absolute;
  right: 0.3em;
  color: #fff;
  font-size: 1.2em;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

丸くしてみた

丸くしてみたのサンプル

liの背景を丸めて、アイコンフォントを左側に表示したリストデザインです。 可愛さ重視の見た目になってます。

CSSコードを表示

ul.sample1{
  padding: 0 0.7em;
  font: 14px/1.6 'arial narrow', sans-serif;
  width:370px;
  list-style: none;
}
ul.sample1 li{
  position: relative;
  padding: 0.5em 1em 0.5em 2.7em;
  font-size: 15px;
  font-weight: bold;
  border-radius:30px;
  color: #fff;
  background: #f1f8fe;
  background: -webkit-gradient(linear, left top, left bottom, from(#d8ecfd), to(#5ab0f9));
  background: -moz-linear-gradient(top, #d8ecfd, #5ab0f9);
  background: -o-linear-gradient(top, #d8ecfd, #5ab0f9);
  background: -ms-linear-gradient(top, #d8ecfd, #5ab0f9);
  background: linear-gradient(top, #d8ecfd, #5ab0f9);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#d8ecfd', endColorstr='#5ab0f9');
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#d8ecfd', endColorstr='#5ab0f9')";
  background: linear-gradient(top, #d8ecfd, #5ab0f9);
  -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
  -moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
  box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
  zoom: 1;
}
ul.sample1 li:last-child{
  border:none;
  margin: 0;
}
ul.sample1 li:before{
  font-family: FontAwesome;
  content: "\f040";
  position: absolute;
  left: 0.8em;
  color: #fff;
  font-size: 1.2em;
  font-weight: normal;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

フラットデザイン風

フラットデザイン風のサンプル

フラットデザイン風の箇条書きリストです。 シンプルで使い勝手が良さそうなデザインとなってます。

CSSコードを表示

ul.sample1{
  padding: 0 0.7em;
  font: 14px/1.6 'arial narrow', sans-serif;
  width:370px;
  list-style: none;
}
ul.sample1 li{
  position: relative;
  padding: 0.5em 1em 0.5em 2em;
  margin-bottom: 3px;
  font-size: 15px;
  font-weight: bold;
  color: #fff;
  background: #5ab0f9;
}
ul.sample1 li:last-child{
  border:none;
  margin: 0;
}
ul.sample1 li:before{
  font-family: FontAwesome;
  content: "\f04b";
  position: absolute;
  left: 0.8em;
  color: #fff;
  font-size: 0.8em;
  font-weight: normal;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

丸めたタグ風

丸めたタグ風のサンプル

左端を丸くし、矢印のアイコンを付けたタグ風のリストデザインです。 これも意外とありそうな感じになってます。

CSSコードを表示

ul.sample1{
  padding: 0 0.7em;
  font: 14px/1.6 'arial narrow', sans-serif;
  width:370px;
  list-style: none;
}
ul.sample1 li{
  position: relative;
  padding: 0.5em 1em 0.5em 2em;
  margin-bottom: 3px;
  font-size: 15px;
  font-weight: bold;
  color: #fff;
  background: #5ab0f9;
  border-radius: 30px 0px 0 30px;
}
ul.sample1 li:last-child{
  border:none;
  margin: 0;
}
ul.sample1 li:before{
  font-family: FontAwesome;
  content: "\f0a9";
  position: absolute;
  left: 0.5em;
  color: #fff;
  font-size: 1.2em;
  font-weight: normal;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

調整方法など

ul・olリストの外側の余白は、適当に指定してあるので各自で調整して下さい。 調整方法は下記ページに記載してあります。

パディング（padding）の使い方まとめ【CSS】
パディング（padding）の使い方まとめ【CSS】
ブログのカスタムやweb制作で、めっちゃ良く使うcssのパディング（padding）の使い方と書き方の紹介です！ ...
www.yuu-diaryblog.com
2016-09-06 20:49
cssマージン（margin）の使い方を覚えよう！
cssマージン（margin）の使い方を覚えよう！
cssのマージン（margin）とは、ボーダー（bordr）の外側の余白を設定するためのものです。 マージン（...
www.yuu-diaryblog.com
2016-09-05 21:18

また三角や丸などのリストマーカーは疑似要素を使って指定してあります。 位置の調整などは、top、left、right、bottomプロパティなどの数値をいじるとできますが、そちらの解説ページを見ると分かると思うので、参考にしてみて下さい。

疑似要素「before」「after」の使い方とできること
疑似要素「before」「after」の使い方とできること
こんにちわー、ゆうです(^^)/ 今回は疑似要素の「before」と「after」の紹介です！ 疑似要素って...
www.yuu-diaryblog.com
2016-11-07 18:31

ゆう。

トップページへ戻る