Q&A
なるほど固定幅で下手に指定するものでは無いですね
floatの横並びは、私もやりたくなかったのですが、モデルのサイトでは、pcのメイン部分は左からnav、新着情報の順だったのですが、スマホ画面ではnav部分が、新着情報の下に配置されていたので、私の知識ではfloatしか思いつかなかったです
質問が2つあります。
リンク内容
こちらのサイトの模写コーディングコーディングをしています。
1.ヘッダーのナビゲーション部分が、メディアクエリで幅768pxの時にliのボタンをwidth: 50%;にしても反映されないのですが、どうしてでしょうか？
2.メイン部分のナビゲーションと画像と新着情報のところで、floatでナビゲーションを左に画像等を右に配置しています。
レスポンシブ化するためにfloatを解除して縦に並べることは、出来るのですがchromeで幅を変更していくと途中で幅が足りないためレイアウトが崩壊して無理矢理縦に配置されてしまいます。
モデルとなるサイトでは、サイト全体の幅を920pxにして中央に揃えたレイアウトにしていますが、navの部分は260pxで画像部分は640pxなので画面幅が900pxになればレイアウトが崩れると考えたのですが、崩れず画面幅に収まったままでした。どうしてでしょうか？
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta name="viewport" content="width=device-width, initial-scale=1"> 5</head> 6<body> 7 <!-- ヘッダー --> 8 <header> 9 <div class="container"> 10 <div class="head-nav"> 11 <nav> 12 <ul class="flex-li"> 13 <li><a href="#" class="first"> 14 <span class="position"> 15 <span class="titleja">トップページ</span> 16 <span class="titleen">HOME</span> 17 </span> 18 </a></li> 19 <li class=""><a href="#"> 20 <span class="position"> 21 <span class="titleja">医院紹介</span> 22 <span class="titleen">CLINIC</span> 23 </span> 24 </a></li> 25 <li class=""><a href="#"> 26 <span class="position"> 27 <span class="titleja">診療案内</span> 28 <span class="titleen">SERVICE</span> 29 </span> 30 </a></li> 31 <li class=""><a href="#"> 32 <span class="position"> 33 <span class="titleja">院長・スタッフ紹介</span> 34 <span class="titleen">STAFF</span> 35 </span> 36 </a></li> 37 <li><a href="#" class="last"> 38 <span class="position"> 39 <span class="titleja">アクセス</span> 40 <span class="titleen">ACCESS</span> 41 </span> 42 </a></li> 43 </ul> 44 </nav> 45 </div> 46 </div> 47 </header> 48 49 <!-- メイン --> 50 <div class="container"> 51 <div class="news"> 52 <div class="news-img"> 53 <div class="img-block"> 54 <img src="img/in01.jpg" alt=""> 55 </div> 56 <div class="latest-news"> 57 <h1>新着情報</h1> 58 <div class="col-wrap"> 59 <div class="row"> 60 <div class="col-1"> 61 <strong>2012年08月01日 62 </strong> 63 </div> 64 <div class="col-2"> 65 <p> 66 【診療時間変更のお知らせ】長期休診の前日8月11日は、通常より1時間長く診療をすることにしました。ご予約をお待ちしております。</p> 67 </div> 68 </div> 69 <div class="row"> 70 <div class="col-1"> 71 <strong>2012年07月24日</strong> 72 </div> 73 <div class="col-2"> 74 <p>【8月の休診のお知らせ】8月12日～16日の間は休診とさせていただきます。何卒よろしくお願いいたします。</p> 75 </div> 76 </div> 77 <div class="row"> 78 <div class="col-1"> 79 <strong>2012年07月02日</strong> 80 </div> 81 <div class="col-2"> 82 <p>【こどもデンタル教室のご案内】毎月第2土曜日に行っているこどもデンタル教室では、参加してくださるお子様を募集しております。</p> 83 </div> 84 </div> 85 <div class="row"> 86 <div class="col-1"> 87 <strong>2012年06月20日 88 </strong> 89 </div> 90 <div class="col-2"> 91 <p> 92 【7月休診日のお知らせ】7月は土日祝日以外の休診日はありません。ご来院お待ちしております。</p> 93 </div> 94 </div> 95 <div class="row"> 96 <div class="col-1"> 97 <strong>2012年06月01日 98 </strong> 99 </div> 100 <div class="col-2"> 101 <p>ホームページをリニューアルしました。</p> 102 </div> 103 </div> 104 </div> 105 </div> 106 </div> 107 <section class="nav-area"> 108 <div class="nav-first"> 109 <nav> 110 <ul class="border-li one-news"> 111 <li class="gradation-first">一般歯科</li> 112 <li class="mp"><a href="#">虫歯治療</a></li> 113 <li class="mp"><a href="#">歯周病治療</a></li> 114 <li class="mp"><a href="#">入れ歯</a></li> 115 <li class="mp mplast"><a href="#">予防歯科</a></li> 116 </ul> 117 </nav> 118 </div> 119 <div class="nav-second"> 120 <nav> 121 <ul class="border-li two-news"> 122 <li class="gradation-first">審美歯科</li> 123 <li class="mp mps"><a href="#">ホワイトニング</a></li> 124 <li class="mp mps"><a href="#">オールセラミック</a></li> 125 <li class="mp mps"><a href="#">セラミックインレー</a></li> 126 <li class="mp mplast mps"><a href="#">PMTC</a></li> 127 </ul> 128 </nav> 129 </div> 130 </section> 131 </div> 132 </div> 133 </body> 134</html>
css
1*{ 2 line-height: 180%; 3 word-break: break-all; 4 list-style: none; 5} 6 7ul{ 8 padding: 0; 9} 10 11body{ 12 font: 13px/1.231 arial,helvetica,sans-serif; 13 text-align: center; 14 background: #F6F6F6; 15 color: #515151; 16 font-family: Verdana; 17} 18 19a{ 20 text-decoration: none; 21} 22 23p{ 24 margin: 0; 25} 26 27.container{ 28 max-width: 920px; 29 margin: 0 auto; 30} 31 32header{ 33 margin-bottom: 1rem; 34} 35 36.flex-li{ 37 display: flex; 38 background-image: linear-gradient(rgb(156,227,225) 0%,rgb(108,198,196) 100%); 39 margin: 0; 40 border-radius: 6px; 41 border: 1px solid #6cc6c4; 42} 43 44.flex-li li{ 45 width: 20%; 46 position: relative; 47} 48 49.flex-li li a{ 50 display: block; 51 height: 70px; 52 color: #ffffff; 53 text-shadow: 1px 1px 2px #6CC6C4; 54} 55 56.flex-li li a:link, .flex-li li a:visited { 57 border-left: #99E1DF solid 1px; 58 border-right: #71c9c7 solid 1px; 59} 60 61.flex-li li a:hover{ 62 background-image: linear-gradient(rgb(108,198,196) 0%,rgb(156,227,225) 100%); 63 color: #c1fffd; 64} 65 66.position{ 67 width: 100%; 68 position: absolute; 69 top: 50%; 70 left: 50%; 71 -webkit-transform: translate(-50%, -50%); 72 transform: translate(-50%, -50%); 73} 74 75.flex-li li a span{ 76 display: block; 77 font-weight: bold; 78} 79 80.titleja{ 81 font-size: 108%; 82} 83 84.titleen{ 85 font-size: 77%; 86} 87 88.first{ 89 border-radius: 6px 0 0 6px; 90} 91 92.last{ 93 border-radius: 0 6px 6px 0; 94} 95 96.news{ 97 overflow: hidden; 98} 99 100.news-img{ 101 width: 640px; 102 float: right; 103} 104 105.nav-area{ 106 width: 260px; 107 margin-right: 1rem; 108 float: left; 109} 110 111.border-li{ 112 margin: 0; 113 text-align: left; 114 border: 1px solid #6cc6c4; 115 border-radius: 6px 6px 0 0; 116} 117 118.border-li li{ 119 border-bottom: 1px solid #6cc6c4; 120} 121 122.one-news{ 123 margin-bottom: 1rem; 124} 125 126.gradation-first{ 127 padding: 0 15px; 128 background-image: linear-gradient(rgb(156, 227, 225) 0%, rgb(108, 198, 196) 100%); 129 font-size: 123.1%; 130 height: 40px; 131 line-height: 40px; 132 color: #ffffff; 133 font-weight: bold; 134} 135 136.mp a{ 137 display: block; 138 padding: 0.4rem 0; 139 color: #595959; 140 font-weight: bold; 141 font-size: 108%; 142} 143 144.mp a:hover{ 145 color: #6cc6c4; 146} 147 148.mps a:hover{ 149 color: #aec24c; 150} 151 152.mp{ 153 padding-left: 25px; 154 margin: 0 12px; 155 background-image: url(img/bgListIcon01.png); 156 background-repeat: no-repeat; 157 background-position: 2% 50%; 158} 159 160.mplast{ 161 margin-bottom: 1rem; 162} 163 164.latest-news{ 165 background: #ffffff; 166 padding: 20px; 167 margin-top: .5rem; 168 text-align: left; 169} 170 171.latest-news h1{ 172 font-size: 0.8rem; 173 margin: 0 0 15px; 174 line-height: 50px; 175 border-bottom: 3px solid #6cc6c4; 176 color: #515151; 177} 178 179.col-wrap{ 180 padding: 0 10px 10px; 181 margin-bottom: 15px; 182} 183 184.row{ 185 display: flex; 186 padding: 10px 10px 10px 0; 187 border-bottom: 1px solid #000; 188 border-bottom: 1px dotted #ccc; 189} 190 191.col-1 strong{ 192 display: block; 193 width: 143px; 194 line-height: 150%; 195} 196 197.col-2{ 198 width: 427px; 199} 200 201.col-2 p{ 202 line-height: 150%; 203} 204 205@media screen and (max-width: 768px){ 206 207 .img-block{ 208 text-align: left; 209 } 210 211 .flex-li li{ 212 width: 50%; 213 } 214 215 .news{ 216 padding: 0 12px; 217 } 218 219 .news-img{ 220 float: none; 221 } 222 223 .nav-area{ 224 float: none; 225 } 226 227 228 .row{ 229 display: block; 230 padding-right: 0; 231 } 232 233 .col-1{ 234 width: 100%; 235 } 236 237 .col-2{ 238 width: 100%; 239 } 240 241 .nav-area{ 242 width: 100%; 243 } 244}
回答2件
0
なるほど固定幅で下手に指定するものでは無いですね
floatの横並びは、私もやりたくなかったのですが、モデルのサイトでは、pcのメイン部分は左からnav、新着情報の順だったのですが、スマホ画面ではnav部分が、新着情報の下に配置されていたので、私の知識ではfloatしか思いつかなかったです
投稿2020/05/07 14:03
総合スコア8
0
ベストアンサー
1.ヘッダーのナビゲーション部分が、メディアクエリで幅768pxの時にliのボタンをwidth: 50%;にしても反映されないのですが、どうしてでしょうか？
下記のように折り返しを許可すればいいでしょう。
css
1 .flex-li { 2 flex-wrap: wrap; 3 }
2.メイン部分のナビゲーションと画像と新着情報のところで、floatでナビゲーションを左に画像等を右に配置しています。
親要素(.container)の幅を最大幅(max-width)のみ指定しているので最大幅以下では画面幅に合わせて縮小するのに対して、画像と新着情報は固定幅で設定しているので、収まりきらなくなると折り返されてしまいます。
新着情報は固定幅は、固定値ではなく相対値(%)で設定するか、flexboxを使って自動縮小させるといいでしょう。
floatでの横並びはもうやめた方がいいと思います。flexboxを使った方がトラブルなく自由度が高い（フレキシブル）です。
モデルとなるサイトでは、サイト全体の幅を920pxにして中央に揃えたレイアウトにしていますが、navの部分は260pxで画像部分は640pxなので画面幅が900pxになればレイアウトが崩れると考えたのですが、崩れず画面幅に収まったままでした。どうしてでしょうか？
全体の幅を920pxの固定にしているので画面幅に関係なく920pxのままですのでレイアウトは崩れません。
その代わり、画面幅からはみ出して、横スクロールバーが出てきてます。あまりいい実装とは思えません。
画面幅には収まってないですよね。
投稿2020/05/04 11:25
総合スコア34075
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。