-Box-L2_1-
-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> <p class="iro orange">橙</p> <p class="imi orange">陽気、暖かい、健康</p> <p class="iro white">白</p> <p class="imi white">平和、清純である、清潔、博愛</p> <p class="iro black">黒</p> <p class="imi black">暗い、厳しい、厳格、絶望</p> <p class="iro gray">灰</p> <p class="imi gray">中立的、悲しい、憂鬱、不安</p> </div> </body>
-CSS-
* { margin: 0; padding: 0; } body { background: url(../images/bg20-20.jpg); font-size: 20px; } div { width: 420px; margin: 30px 0 0 20px; padding: 20px; background: lightgrey; color: white; } p.iro { width: 100px; line-height: 50px; border-bottom: solid 1px white; 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; } p.orange { background: orange; } p.white { background: white; border-bottom-color: black; color: black; } p.black { background: black; } p.gray { background: gray; }