-Box-L2-
-HTML-
<body> <div> <p class="iro red">赤</p> <p class="imi red">情熱、積極的、興奮、危機</p> <p class="iro blue">青</p> <p class="imi blue">涼しい、寒い、清純、知的、さわやか</p> <p class="iro green">緑</p> <p class="imi green">安全、新鮮、癒される、成長する、安心</p> <p class="iro yellow">黄</p> <p class="imi yellow">活力がある、輝かしい、明朗、光</p> <p class="iro purple">紫</p> <p class="imi purple">嫉妬、高貴な、不安、狂気</p> </div> </body>
-CSS-
* { margin: 0; padding: 0; } body { background: url(images/bg20.png); font-size: 20px; } div { width: 420px; margin: 10px 0 0 20px; padding: 20px; background: lavenderblush; color: white; } p.iro { width: 100px; margin-bottom: 10px; line-height: 50px; text-align: center; } p.imi { width: 410px; padding-left: 10px; line-height: 70px; } p.imi:not(:last-of-type) { margin-bottom: 10px; } /* 個別set */ p.red { background: red; } p.blue { background: blue; } p.green { background: green; } p.yellow { background: yellow; border-bottom-color: black; color: black; } p.purple { background: purple; }