演習(2)解答例
《style.css》
@charset "UTF-8"; /* reset */ html, body, div, h1, h2, h3, p, ul, li { margin: 0; padding: 0; line-height: 1.0; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } ul { list-style: none; } a { text-decoration: none; } img { border: none; vertical-align: bottom; } /* font-size */ html { font-size: 62.5%; } /* =10px */ body { font-size: 16px; font-size: 1.6rem; } /* =16px */ h1 { font-size: 24px; font-size: 2.4rem; } h2 { font-size: 20px; font-size: 2.0rem; } h3 { font-size: 16px; font-size: 1.6rem; } p { font-size: 14px; font-size: 1.4rem; } ul { font-size: 14px; font-size: 1.4rem; } /* body */ body { background: #FFF; color: #333; line-height: 1.5; background: url(img/bg.gif) repeat-y center top; } /* layout */ #container { width: 600px; margin: 0 auto; } #header { margin-bottom: 30px; text-align: center; } #content { margin-bottom: 20px; padding: 0 20px; } /* #header */ #header h1 { margin-bottom: 20px; } #header h2 { margin-bottom: 10px; } #header p { text-align: left; margin-left: 48px; margin-left: 4.8rem; line-height: 1.5; } /* #content */ #content h3 { margin-bottom: 10px; } #content p { line-height: 1.5; text-indent: 14px; text-indent: 1.4rem; margin-bottom: 25px; margin-left: 30px; margin-left: 3.0rem; } #content ul { margin-bottom: 25px; padding-left: 16px; padding-left: 1.6rem; } #content li { margin-bottom: 6px; margin-left: 14px; margin-left: 1.4rem; text-indent: -1.4rem; line-height: 1.5; } #content h2 { text-align: center; margin-bottom: 10px; } #content p.center { margin-left: 0; text-align: center; }