Q&A
それで何でしょうか？質問点が分かりません。
模写コーディングを行っています。
一通り完成したのですが、画面を縮小拡大させると見本と違うレイアウトになってしまいます。
ちなみに、レスポンシブデザインの設定はまだ行っていません。
見本は下記の画像のように左右の幅が広がるだけ↓
自分のコーディングを行ったものは崩れてしまいます↓
html
1<body> 2 <header class="header"> 3 <div class="wrapper"> 4 <img src="images/logo.png" alt="" class="logo"> 5 <div class="header-right"> 6 <p class="theme">“地域に根付いた歯科医院” デンタル クリニック</p> 7 <img src="images/tel.png" alt=""><div class="tel">03-0000-0000</div> 8 <p class="time">予約受付時間 10:00−19:30 <span class="red">日祝 休診</span></p> 9 </div> 10 <div class="header-bottom"> 11 <nav> 12 <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> 13 </nav> 14 </div> 15 </div> 16 </header> 17 <div> 18 <div class="wrapper"> 19 <div class="left"> 20 <div class="list"> 21 <p>一般歯科</p> 22 <ul> 23 <li><a href="#">虫歯治療</a></li> 24 <li><a href="#">歯周病治療</a></li> 25 <li><a href="#">入れ歯</a></li> 26 <li><a href="#">予防歯科</a></li> 27 </ul> 28 </div> 29 <div class="list"> 30 <p>審美歯科</p> 31 <ul> 32 <li><a href="#">ホワイトニング</a></li> 33 <li><a href="#">オールセラミック</a></li> 34 <li><a href="#">セラミックインレー</a></li> 35 <li><a href="#">PMTC</a></li> 36 </ul> 37 </div> 38 </div> 39 <div class="right"> 40 <img src="images/main.jpg" alt=""> 41 <div class="news"> 42 <p>新着情報</p> 43 <table> 44 <tr> 45 <td class="day">2012年08月01日</td> 46 <td>【診療時間変更のお知らせ】長期休診の前日8月11日は、通常より1時間長く診療をすることにしました。ご予約をお待ちしております。</td> 47 </tr> 48 <tr> 49 <td class="day">2012年07月24日</td> 50 <td>【8月の休診のお知らせ】8月12日～16日の間は休診とさせていただきます。何卒よろしくお願いいたします。</td> 51 </tr> 52 <tr> 53 <td class="day">2012年07月02日</td> 54 <td>【こどもデンタル教室のご案内】毎月第2土曜日に行っているこどもデンタル教室では、参加してくださるお子様を募集しております。</td> 55 </tr> 56 <tr> 57 <td class="day">2012年06月20日</td> 58 <td>【7月休診日のお知らせ】7月は土日祝日以外の休診日はありません。ご来院お待ちしております。</td> 59 </tr> 60 <tr> 61 <td class="day">2012年06月01日</td> 62 <td>ホームページをリニューアルしました。</td> 63 </tr> 64 </table> 65 </div> 66 </div> 67 </div> 68 </div> 69 <footer class="footer"> 70 <div class="wrapper"> 71 <ul> 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 <li><a href="#">アクセス</a></li> 77 </ul> 78 <div class="address">デンタル クリニック 東京都新宿区市谷左内町21-13 TEL:03-0000-0000</div> 79 </div> 80 <p>Copyright 2012 Dental Clinic CO.,LTD All Rights Reserved.</p> 81 </footer>
CSS
1@charset "UTF-8"; 2 3body { 4 background-color: #f6f6f6; 5 margin: 0; 6} 7.wrapper { 8 padding: 10px 200px; 9} 10/* ヘッダー */ 11.header { 12 border-top: 6px solid #82c4c3; 13} 14.logo { 15 padding: 30px 10px; 16} 17.header-right { 18 float: right; 19 color: rgb(80, 79, 79); 20} 21.theme { 22 font-size: 10px; 23} 24.tel { 25 display: inline-block; 26 font-size: 23px; 27 padding-left: 10px; 28} 29.time { 30 font-size: 10px; 31 border: solid 1px #d8c9c9; 32 padding: 5px 20px; 33} 34.red { 35 color: rgb(153, 53, 53); 36} 37/* ヘッダー ナビ */ 38.header-bottom nav{ 39 clear: both; 40 font-size: 15px; 41 background:linear-gradient(#abe1e0,#82c4c3); 42 border: 2px #82c4c3 solid; 43 border-radius: 10px; 44} 45.header-bottom li { 46 display: inline-block; 47 width: 20%; 48 list-style-type: none; 49 text-align: center; 50 height: 70px; 51} 52.header-bottom a { 53 text-decoration: none; 54 color: white; 55 display: block; 56 padding: 12px; 57} 58.nav1{ 59 border-top-left-radius: 10px; 60 border-bottom-left-radius: 10px; 61} 62.nav5 { 63 border-top-right-radius: 10px; 64 border-bottom-right-radius: 10px; 65} 66.header-bottom a:hover { 67 background:linear-gradient(#82c4c3,#abe1e0); 68} 69/* 左側（リスト） */ 70.left { 71 float: left; 72} 73.list { 74 width: 285px; 75 border: 1px #82c4c3 solid; 76 border-top-left-radius: 10px; 77 border-top-right-radius: 10px; 78 background-color: white; 79 margin-bottom: 20px; 80} 81.list p { 82 margin: 0; 83 padding: 10px 20px; 84 background:linear-gradient(#abe1e0,#82c4c3); 85 border-top-left-radius: 10px; 86 border-top-right-radius: 10px; 87 color: white; 88} 89.list ul { 90 padding: 0; 91} 92.list li { 93 background-image: url(images/square.png); 94 background-repeat: no-repeat; 95 background-position: left center; 96 list-style-type: none; 97 font-size: 15px; 98 padding: 3px 20px 5px; 99 border-bottom: 1px solid #82c4c3; 100 margin: 4px 0 3px; 101 margin: 15px; 102} 103.list a { 104 text-decoration: none; 105 color: rgb(80, 79, 79); 106} 107.list a:hover { 108 color: #82c4c3; 109} 110/* 右側 */ 111.right { 112 float: right; 113 width: 70%; 114} 115.right img { 116 margin-left: 40px; 117 118} 119.news { 120 width: 610px; 121 background-color: white; 122 padding: 25px 15px 50px; 123 margin-left: 40px; 124} 125.news p { 126 border-bottom: 3px solid #82c4c3; 127 padding-bottom: 4px; 128} 129table { 130 font-size: 13px; 131} 132td { 133 border-bottom: 1px dashed #d8c9c9; 134 padding: 10px; 135} 136.day { 137 width: 130px; 138 vertical-align: top; 139} 140/* フッター */ 141.footer .wrapper { 142 143} 144.footer { 145 clear: both; 146} 147.footer ul { 148 background-color: #82c4c3; 149 border-radius: 5px; 150 151} 152.footer li { 153 font-size: 15px; 154 display: inline-block; 155 list-style-type: none; 156 padding: 4px 30px 4px 0 ; 157 158} 159.footer li::before { 160 content: url(images/round.png); 161 position: relative; 162 top: 3px; 163 right: 3px; 164} 165.footer a { 166 text-decoration: none; 167 color: white; 168} 169.footer a:hover { 170 text-decoration: underline; 171} 172.address { 173 text-align: right; 174 font-size: 14px; 175 border-bottom: 3px solid #82c4c3; 176 padding: 10px; 177} 178.footer p { 179 text-align: center; 180 font-size: 12px; 181 padding-bottom: 10px; 182} 183
回答1件
0
ベストアンサー
コードを見ると横並びを float を使っていますが、レスポンシブ対応させようとすると難しいので、Flexbox による横並びにしましょう。
float だとPCサイズは２カラム、スマホサイズでは1カラムにしようとすると困難ですが、Flexbox だと簡単です。
もう迷わない！CSS Flexboxの使い方を徹底解説 | Web Design Trends
見本のレイアウトは、ヘッダー、メイン、フッター がすべて同じ幅になってますので、
全体を一つのブロックで囲んでそれに幅を設定するようにしましょう。
html
1<body> 2 <div class="container"> 3 <header> 4 </header> 5 <main> 6 </main> 7 <footer> 8 </footer> 9 </div> 10</body>
css
1.container { 2 max-width: 1000px; /*最大幅を決める*/ 3 margin: 0 auto; /*左右中央寄せ*/ 4 padding: 10px; /*お好みで*/ 5}
いちおう提示のコードをもとに、上記の方針で書き換えたサンプルを置いておきますので、参考にしてください。
投稿2020/09/01 05:08
総合スコア33790
containerで全体を囲み解決しました。ですが縮小する時は改善されますが拡大すると崩れてしまいます。レスポンシブデザインの設定を行ってないからこういった現象になるのでしょうか。webを作る上でレイアウト崩れしないように特に注意することがあればアドバイス頂きたいです。
各要素を固定値(px)で指定しているのが原因だと思います。
%指定、auto指定をうまく使ってください。
Codepenサンプルを見てください。拡大、縮小しても崩れないと思います。
そのコードを確認して参考にしてください。
ありがとうございます！
あなたの回答
tips
プレビュー
