/* CSSコード */
ul {
padding: 0;
}
ul li {
position: relative;
list-style-type: none;
padding: 0.5em 0.5em 0.5em 2em;
margin-bottom: 5px;
line-height: 1.5;
background: #aaa;
vertical-align: middle;
color: #fff;
border-radius: 20px 0 0 20px;
}
ul li::before {
position: absolute;
left: 0.7em;
top: 0.75em;
content: '';
width: 1em;
height: 1em;
background: #fff;
border-radius: 50%;
}
▼ブラウザ表示▼
ブラウザ表示
テーブルデザインのサンプルコードも紹介！
price1
|
price2
|
price3
|
|
1,000円
|
500円
|
無料
|
|
商品1
|
商品2
|
商品3
|
|
サービス1
|
サービス2
|
サービス3
|
|
|
|
/* CSSコード */
table.price {
width: 500px;
margin: 0 auto;
border-collapse: separate;
border-spacing: 1px 0;
font-size: 15px;
}
table.price th,table.price td {
padding: 10px;
}
table.price th {
box-shadow: 0 1px 1px rgba(255,255,255,0.8) inset;
border-radius: 5px 5px 10px 10px;
background: #88b7d5;
vertical-align: middle;
text-align: center;
width: 125px;
height: 50px;
position: relative;
color: #fff;
text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
font-size: 24px;
}
table.price th.p1 {
background: rgb(162,206,26);
}
table.price th.p2 {
background: rgb(237,73,147);
}
table.price th.p3 {
background: rgb(29,140,233);
}
table.price td {
box-shadow: 0 1px 1px rgba(255,255,255,0.3) inset;
text-align: center;
padding-top: 15px;
border: none;
height: 70px;
}
table.price tr:nth-child(odd) td.p1 {
background: #f7f9e8;
}
table.price tr:nth-child(even) td.p1 {
background: #e2efbc;
}
table.price tr:nth-child(odd) td.p2 {
background: #ffecf5;
}
table.price tr:nth-child(even) td.p2 {
background: #ffdfed;
}
table.price tr:nth-child(odd) td.p3 {
background: #fff;
}
table.price tr:nth-child(even) td.p3 {
background: #eee;
}
table.price tr:last-child td {
border-radius: 0 0 5px 5px;
box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
}
table.price tr:last-child td button {
font-size:12px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
border:1px solid #ffaa22;
padding:9px 18px;
text-decoration:none;
background-color:#ffec64;
color:#333;
display:inline-block;
}
table.price tr:last-child td button:hover {
background-color:#ffab23;
}
table.price tr:last-child td button {
position:relative;
top:1px;
}