Q&A
模写コーディングを行っています。
wrapperで包み、ページの左右にスペースができるようにしているのですがヘッダー部分（一番下）だけ反映されません。
加えて、リストマークが重なってしまう点の改善点も教えてください。
原因が分からないのでアドバイスお願いします。
html
1<body> 2 <header class="header"> 3 <div class="wrapper"> 4 <img src="images/logo.png" alt=""> 5 <div class="header-right"> 6 <img src="images/tel.png" alt=""><div class="tel">03-0000-0000</div> 7 <p class="time">予約受付時間 10:00−19:30 <span class="red">日祝 休診</span></p> 8 </div> 9 <div class="header-bottom"> 10 <nav> 11 <li><a href="#" class="nav1">トップページ<br>HOME</a></li><li><a href="#">医院紹介<br>CLINIC</a></li><li><a href="#">診療案内<br>SERVICE</a></li><li><a href="#">院長・スタッフ紹介<br>STAFF</a></li><li><a href="#" class="nav5">アクセス<br>ACCESS</a></li> 12 </nav> 13 </div> 14 </div> 15 </header> 16 <div> 17 <div class="wrapper"> 18 <div class="left"> 19 <div class="list"> 20 <p>一般歯科</p> 21 <ul> 22 <li><a href="#">虫歯治療</a></li> 23 <li><a href="#">歯周病治療</a></li> 24 <li><a href="#">入れ歯</a></li> 25 <li><a href="#">予防歯科</a></li> 26 </ul> 27 </div> 28 <div class="list"> 29 <p>審美歯科</p> 30 <ul> 31 <li><a href="#">ホワイトニング</a></li> 32 <li><a href="#">オールセラミック</a></li> 33 <li><a href="#">セラミックインレー</a></li> 34 <li><a href="#">PMTC</a></li> 35 </ul> 36 </div> 37 </div> 38 <div class="right"> 39 <img src="images/main.jpg" alt=""> 40 <div class="news"> 41 <p>新着情報</p> 42 <table> 43 <tr> 44 <td class="day">2012年08月01日</td> 45 <td>【診療時間変更のお知らせ】長期休診の前日8月11日は、通常より1時間長く診療をすることにしました。ご予約をお待ちしております。</td> 46 </tr> 47 <tr> 48 <td class="day">2012年07月24日</td> 49 <td>【8月の休診のお知らせ】8月12日～16日の間は休診とさせていただきます。何卒よろしくお願いいたします。</td> 50 </tr> 51 <tr> 52 <td class="day">2012年07月02日</td> 53 <td>【こどもデンタル教室のご案内】毎月第2土曜日に行っているこどもデンタル教室では、参加してくださるお子様を募集しております。</td> 54 </tr> 55 <tr> 56 <td class="day">2012年06月20日</td> 57 <td>【7月休診日のお知らせ】7月は土日祝日以外の休診日はありません。ご来院お待ちしております。</td> 58 </tr> 59 <tr> 60 <td class="day">2012年06月01日</td> 61 <td>ホームページをリニューアルしました。</td> 62 </tr> 63 </table> 64 </div> 65 </div> 66 </div> 67 </div> 68 <footer class="footer"> 69 <div class="wrapper"> 70 <ul> 71 <li><a href="#">トップページ</a></li> 72 <li><a href="#">医院紹介</a></li> 73 <li><a href="#">診療案内</a></li> 74 <li><a href="#">院長・スタッフ紹介</a></li> 75 <li><a href="#">アクセス</a></li> 76 </ul> 77 </div> 78 </footer>
CSS
1body { 2 background-color: #f6f6f6; 3} 4.wrapper { 5 padding: 10px 200px; 6} 7/* ヘッダー */ 8.header-right { 9 float: right; 10 color: rgb(80, 79, 79); 11} 12.tel { 13 display: inline-block; 14 font-size: 23px; 15 padding-left: 10px; 16} 17.time { 18 font-size: 10px; 19 border: solid 1px #d8c9c9; 20 padding: 5px 20px; 21} 22.red { 23 color: rgb(153, 53, 53); 24} 25/* ヘッダー ナビ */ 26.header-bottom nav{ 27 clear: both; 28 font-size: 15px; 29 background:linear-gradient(#abe1e0,#82c4c3); 30 border: 2px #82c4c3 solid; 31 border-radius: 10px; 32} 33.header-bottom li { 34 display: inline-block; 35 width: 20%; 36 list-style-type: none; 37 text-align: center; 38 height: 70px; 39} 40.header-bottom a { 41 text-decoration: none; 42 color: white; 43 display: block; 44 padding: 12px; 45} 46.nav1{ 47 border-top-left-radius: 10px; 48 border-bottom-left-radius: 10px; 49} 50.nav5 { 51 border-top-right-radius: 10px; 52 border-bottom-right-radius: 10px; 53} 54.header-bottom a:hover { 55 background:linear-gradient(#82c4c3,#abe1e0); 56} 57/* 左側（リスト） */ 58.left { 59 float: left; 60} 61.list { 62 width: 250px; 63 border: 1px #82c4c3 solid; 64 border-top-left-radius: 10px; 65 border-top-right-radius: 10px; 66 background-color: white; 67 margin-bottom: 20px; 68} 69.list p { 70 margin: 0; 71 padding: 10px 20px; 72 background:linear-gradient(#abe1e0,#82c4c3); 73 border-top-left-radius: 10px; 74 border-top-right-radius: 10px; 75 color: white; 76} 77.list ul { 78 padding: 0; 79} 80.list li { 81 background-image: url(images/square.png); 82 background-repeat: no-repeat; 83 background-position: left center; 84 list-style-type: none; 85 font-size: 15px; 86 padding: 3px 20px 5px; 87 border-bottom: 1px solid #82c4c3; 88 margin: 4px 0 3px; 89 margin: 15px; 90} 91.list a { 92 text-decoration: none; 93 color: rgb(80, 79, 79); 94} 95.list a:hover { 96 color: #82c4c3; 97} 98/* 右側 */ 99.right { 100 float: right; 101 width: 70%; 102} 103.news { 104 width: 610px; 105 background-color: white; 106 padding: 25px 15px 50px; 107} 108.news p { 109 border-bottom: 3px solid #82c4c3; 110 padding-bottom: 4px; 111} 112table { 113 font-size: 13px; 114} 115td { 116 border-bottom: 1px dashed #d8c9c9; 117 padding: 10px; 118} 119.day { 120 width: 130px; 121 vertical-align: top; 122} 123/* フッター */ 124.footer { 125 clear: both; 126 background-color: #82c4c3; 127 border-radius: 10px; 128} 129.footer li { 130 font-size: 15px; 131 display: inline-block; 132 list-style-type: none; 133 background-image: url(images/round.png); 134 background-repeat: no-repeat; 135 background-position: left center; 136 padding-right: 15px; 137} 138.footer a { 139 text-decoration: none; 140 color: white; 141} 142.footer a:hover { 143 text-decoration: underline; 144} 145
回答1件
0
ベストアンサー
ヘッダー部分（一番下）
というのがfooterのことであれば、下記cssで。
css
1.footer { 2 clear: both; 3 padding: 10px 200px; 4} 5.footer .wrapper { 6 background-color: #82c4c3; 7 border-radius: 10px; 8 /* footerの装飾も他と同様にしたいなら以下を追加 */ 9 background: linear-gradient(#abe1e0,#82c4c3); 10 border: 2px #82c4c3 solid; 11}
リストマークが重なってしまう点
は、下記cssで対応できます。
css
1.footer li { 2 font-size: 15px; 3 display: inline-block; 4 list-style-type: none; 5 padding-right: 15px; 6} 7.footer li::before { 8 content: url(images/round.png); 9}
投稿2020/08/27 01:27
編集2020/08/27 01:36
総合スコア159
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/08/27 03:00
2020/08/27 03:20
2020/09/01 03:38