リストの表現いろいろ（ピンク）

HTML

   <div class="listB" class="clearfix">
    <ul>
     <li>震度5弱 群馬県	渋川市</li>
     <li>震度4 群馬県 前橋市桐生市伊勢崎市吉岡町</li>
     <li>震度3 群馬県 高崎市太田市館林市安中市みどり市</li>
     <li>震度3 茨城県 総市取手市坂東市五霞町</li>
     <li>震度3 千葉県 野田市白井市</li>
     <li>震度2 藤岡市富岡市群馬上野村</li>
    </ul>
   </div>
     

CSS

.listP ul{
	overflow: hidden;
	margin: 10 10px 10px -40px;
	padding: 5px 0;
	border-bottom: 1px solid #fff;
	background: hotpink !important;
	list-style: none;
}
.listP li{
	margin: 0;
	padding: 0.5em 1em;
	border: 1px solid #bbb;
	border-top-color: transparent;
	background: #FFFFFF;
	box-shadow: 0 1px 6px rgba(0, 0, 0, .4);
	text-shadow: 0 1px 1px #fff;
}
     

HTML

   <ul class="postitP">
    <li>震度5弱 群馬県	渋川市</li>
    <li>震度4 群馬県 前橋市桐生市伊勢崎市吉岡町</li>
    <li>震度3 群馬県 高崎市太田市館林市安中市みどり市</li>
    <li>震度3 茨城県 総市取手市坂東市五霞町</li>
    <li>震度3 千葉県 野田市白井市</li>
    <li>震度2 藤岡市富岡市群馬上野村</li>
   </ul>
     

CSS

ul.postitP {
  padding: 0;
}
ul.postitP li, ol.postitP li {
  color: #404040;
  border-left: solid 6px mediumvioletred;/*左側の線*/
  border-bottom: solid 2px #dadada;/*下に灰色線*/
  background: ivory;
  margin-bottom: 5px;/*下のバーとの余白*/
  line-height: 1.5;
  padding: 0.5em;
  list-style-type: none!important;/*ポチ消す*/
  font-weight: normal;
}
     

HTML

   <div class="boxlistP">
    <ol>
     <li> 性能の高さは抜群</li>
     <li> デザイン性では、他のハウスメーカーに劣る</li>
     <li> 間取りの制約は多くて、思うようにならないことも</li>
     <li> 標準仕様が充実しているが、オリジナル商品ばかり</li>
     <li> 大容量の太陽光パネルが載せられる</li>
     <li> 価格は決して安くない</li>
    </ol>
   </div>
     

CSS

.boxlistP ol{
  counter-reset:number; /*数字をリセット*/
  list-style-type: none!important; /*数字を一旦消す*/
  padding: 0.3em 0.8em;
  border: solid 2px mediumvioletred;
}
.boxlistP ol li{
  border-bottom: dashed 1px mediumvioletred;
  position: relative;
  padding: 0.5em 0.5em 0.5em 30px;
  line-height: 1.5em;
}
.boxlistP ol li:before{
  /* 以下数字をつける */
  position: absolute;
  counter-increment: number;
  content: counter(number);
  /*数字のデザイン変える*/
  display:inline-block;
  background: mediumvioletred;
  color: white;
  font-family: 'Avenir','Arial Black','Arial',sans-serif;
  font-weight:bold;
  font-size: 15px;
  border-radius: 50%;
  left: 0;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align:center;
  /*以下 上下中央寄せのため*/
  top: 50%;
  -moz-transform: translateY(-50%);
  	-webkit-transform: translateY(-50%);
  	-o-transform: translateY(-50%);
  	-ms-transform: translateY(-50%);
  	transform: translateY(-50%);
}
.boxlistP ol li:last-of-type{
  border-bottom: none; /*最後のliの線だけ消す*/
}
     

HTML

   <div class="fsetBoxP">
    <p><span class="fsetBoxP-title">POINT</span></p>
    <ol class="cNumP">
     <li> 性能の高さは抜群</li>
     <li> デザイン性では、他のハウスメーカーに劣る</li>
     <li> 間取りの制約は多くて、思うようにならないことも</li>
     <li> 標準仕様が充実しているが、オリジナル商品ばかり</li>
     <li> 大容量の太陽光パネルが載せられる</li>
     <li> 価格は決して安くない</li>
    </ol>
   </div>
   <div>
     

CSS

/* fsetBoxとcNumの組み合わせで表示する */
/* fsetBox*/
.fsetBoxB, .fsetBoxP, .fsetBoxG, .fsetBoxY {
    position: relative;
    margin: 1em 0;
    padding: 0.5em 0.5em;
    border-radius: 8px;

}
.fsetBoxB{
    border: solid 3px mediumblue;
    background:ghostwhite;
}
.fsetBoxP{
    border: solid 3px mediumvioletred;
    background:#fdfdf7;
}
.fsetBoxG{
    border: solid 3px darkgreen;
    background:#fffaf4;
}
.fsetBoxY{
    border: solid 3px #f89174;
    background: #FFF;
    color: #f89174;
}

.fsetBoxB-title, .fsetBoxP-title, .fsetBoxG-title, .fsetBoxY-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 120%;
    background: #FFF;
    font-weight: bold;
}
.fsetBoxB-title{
    color: mediumblue;
}
.fsetBoxP-title{
    color: mediumvioletred;
}
.fsetBoxG-title{
    color: darkgreen;
}
.fsetBoxY-title{
    color: #f89174;
}
.fsetBoxB p, .fsetBoxP p, .fsetBoxG p, .fsetBoxY p {
    margin: 5px 0 5px 0; 
    padding: 0;
    color:black;
}
/* マルのナンバーリング */
.cNumB, .cNumP, .cNumG, .cNumY, .cAlpB, .cAlpP, .cAlpG, .cAlpY, .calpB, .calpP, .calpG, .calpY, .cRomB, .cRomP, .cRomG, .cRomY, .cromB, .cromP, .cromG, .cromY{
  counter-reset:number; /*数字をリセット*/
  list-style-type: none!important; /*数字を一旦消す*/
  padding: 0.3em;
  margin:.5em 0 .5em 0;
}
.cNumB{
  /*border: solid 2px #5c9ee7;*/
}
.cNumP{
  /*border: solid 2px mediumvioletred;*/
}
.cNumG{
  /*border: solid 2px #21a3ac;*/
}
.cNumY{
  /*border: solid 2px #f89174;*/
}
.cNumB li, .cNumP li, .cNumG li, .cNumY li, .cAlpB li, .cAlpP li, .cAlpG li, .cAlpY li, .calpB li, .calpP li, .calpG li, .calpY li, .cRomB li, .cRomP li, .cRomG li, .cRomY li, .cromB li, .cromP li, .cromG li, .cromY li{
  position: relative;
  line-height: 1.2em;
  /*margin 0 0.2em 0;*/
  font-size:100%!important;
  color:black;
  padding: 0.5em 0.2em 0.2em 35px;

}
.cNumB li{
  /*border-bottom: dashed 1px #5c9ee7;*/
}
.cNumP li{
  /*border-bottom: dashed 1px mediumvioletred;*/
}
.cNumG li{
  /*border-bottom: dashed 1px #21a3ac;*/
}
.cNumY li{
  /*border-bottom: dashed 1px #f89174;*/
}

ol.cNumB li:before, ol.cNumP li:before, ol.cNumG li:before, ol.cNumY li:before, ol.cAlpB li:before, ol.cAlpP li:before, ol.cAlpG li:before, ol.cAlpY li:before, ol.calpB li:before, ol.calpP li:before, ol.calpG li:before, ol.calpY li:before, ol.cRomB li:before, ol.cRomP li:before, ol.cRomG li:before, ol.cRomY li:before, ol.cromB li:before, ol.cromP li:before, ol.cromG li:before, ol.cromY li:before{
  /*
  c（白丸）
  cjk-ideographic（漢数字）
  decimal（算用数字 。olデフォルト値）
  decimal-leading-zero（先頭に0をつけた算用数字で、01, 02, 03, 等）
  georgian（グルジア数字）
  hebrew（ヘブライ数字）
  hiragana（ひらがな – あいうえお順）
  hiragana-iroha（ひらがな – いろは順）
  inherit listStyleType（プロパティの値は親要素から継承することを指定する）
  katakana（カタカナ – アイウエオ順）
  katakana-iroha（カタカナ – イロハ順）
  lower-alpha（小文字のアルファベットで、a, b, c, d, e 等）
  lower-greek（小文字のギリシャ文字）
  lower-latin（小文字のアルファベットで、a, b, c, d, e 等）
  lower-roman（T小文字のローマ数字で、i, ii, iii, iv, v 等）
  upper-alpha（大文字のアルファベットで、A, B, C, D, E 等）
  upper-latin（大文字のアルファベットで、A, B, C, D, E 等）
  upper-roman（大文字のローマ数字で、I, II, III, IV, V 等）
  */
  /*数字のデザイン変える*/
  position: absolute;
  display:inline-block;
  margin-left:0px;
  margin-right:7px;
  color: white;
  border-radius: 50%;
  left: 0px;
  width: 25px;
  height: 25px;
  line-height: 20px;
  text-align:center;
  font-family: 'Avenir','Arial Black','Arial',sans-serif;
  font-weight:bold;
  font-size: 100%;
  /*以下 上下中央寄せのため*/
  /*top: 50%;*/
  top:20px;
  -moz-transform: translateY(-50%);
  	-webkit-transform: translateY(-50%);
  	-o-transform: translateY(-50%);
  	-ms-transform: translateY(-50%);
  	transform: translateY(-50%);
}