facebook twitter hatena line google mixi email

Html/スマホ/リストビュー

提供: 初心者エンジニアの簡易メモ
移動: 案内検索
  • css3
.listview a {
 margin:0;
 display: block;
 position: relative;
 border-bottom: 1px solid #ccc;
 padding: 11px 25px 11px 11px;
 color: #0000ee;
 font-weight: bold;
 text-decoration: none;
 font-size:20px;
}
.listview a:after {
 display: block;
 position: absolute;
 top: 50%;
 right: 10px;
 width: 7px;
 height: 7px;
 margin-top: -4px;
 border-top: solid 2px #7f7f7f;
 border-right: solid 2px #7f7f7f;
 -webkit-transform: rotate(45deg);
 transform: rotate(45deg);
 content: "";
}
.listview a.first {
   border-top: 1px solid #ccc;
}
.listview a .exp {
   color:#000;
   font-size:14px;
}
/* visited */
.listview a:visited {
   color:#551A8B;
}
  • html
<div class="listview">
    <a href="/">たいとる<span class="exp">コンテンツサマリー</span></a>
    <a href="/">たいとる<span class="exp">コンテンツサマリー</span></a>
    <a href="/">たいとる<span class="exp">コンテンツサマリー</span></a>
</div>