-List-L2-
-HTML-
<body> <ul> <li>新着情報<br><span>coral</span></li> <li>お知らせ<br><span>tomato</span></li> <li>製品情報<br><span>orange</span></li> <li>店舗案内<br><span>chocolate</span></li> <li>会社案内<br><span>brown</span></li> </ul> </body>
-CSS-
* { margin: 0; padding: 0; } body { font-size: 20px; } ul { width: 140px; margin: 20px 0 0 20px; padding: 10px; background: thistle; list-style: none; } li { padding: 15px 0; background: darkkhaki; text-align: center; } li span { font-size: 14px; color: brown; } li:not(:last-of-type) { margin-bottom: 10px; } li:nth-of-type(odd) { background: moccasin; } li:nth-of-type(even) { background: lightblue; }