リストを作る_01

簡単でシンプルなリストを作る

HTML　↓

<ul class="tableview">
<li class="tableview__item"><a href="" class="btn">リスト１</a></li>
<li class="tableview__item"><a href="" class="btn">リスト２</a></li>
<li class="tableview__item"><a href="" class="btn">リスト３</a></li>
<li class="tableview__item"><a href="" class="btn">リスト４</a></li>
</ul>

CSS　↓

/* リスト */
.tableview ul{
  margin: 0;
  padding: 0;
}

.tableview li a{
  text-decoration: none;
}

.tableview {
  margin: 5px;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid #999;
}

.tableview__item {
  padding: 1em;
  background: #ddd;
}

.tableview__item + .tableview__item {
  border-top: 1px solid #eee;
}

サンプルを見る　⇒sample_01.html