Q&A
前提・実現したいこと
表題の通り、画像をmax-width 700pxの時に画像を広げたいが、できない。
ご教授お願い致します
試したこと
まず、grid-templateのpxを変更させました。
grid-template: 57px 216px 165px/ 427px 188px 655px ;
を
上記のように変更しました。style.cssでも適用されています。→しかし、google toolでは、適用されますが
vscodeでは、反映されないため、質問しました。
該当のソースコード
HTML
1<!DOCTYPE html> 2<html> 3<head> 4 <title></title> 5 <link href="../css/destyle.css" rel="stylesheet" type="text/css"> 6 <link href="../css/style.css" rel="stylesheet" type="text/css"> 7</head> 8<body> 9 <section class="room-contents"> 10 <div class="contents-inner"> 11 <ul class="room-list"> 12 <!-- 1 --> 13 <li class="room-item"> 14 <div class="room-item-img room-item-left aos-init aos-animate" data-aos="fade-up" data-aos-delay="100"><img alt="お部屋1" src="../asserts/img/oheya01.jpg"></div> 15 <div class="room-item-txt room-item-right aos-init aos-animate" data-aos="fade-up" data-aos-delay="500"> 16 <div class="jp-text"> 17 <h2 class="ttl">温泉付き客室</h2><!-- /.ttl --> 18 <div class="desc-txt"> 19 <p class="desc1">温海の源泉かけ流し露天風呂付き客室になります。<br class="space"> 20 あなただけの上質な安らぎのひとときを。</p> 21 <p class="desc2">＊部屋数に限りがございます。<br class="space"> 22 <span>＊洗い場はないため、<br class="space"> 23 お体を先に大浴場でお流しになって頂く必要があります。</span></p><!-- /.desc2 --> 24 </div><!-- /.desc-txt --> 25 </div><!-- /.jp-text --> 26 </div><!-- /.room-item-right --> 27 </li><!-- /.room-item --> 28 </ul> 29 </div> 30 </section> 31</body> 32</html>
CSS
1 2.room-list { 3 -webkit-box-pack: justify; 4 -webkit-justify-content: space-between; 5 -ms-flex-pack: justify; 6 justify-content: space-between; 7 margin-top: 80px; 8} 9 10@media screen and (min-width: 600px) and (max-width: 1179px) { 11 .room-list { 12 margin: 0px 20px; 13 } 14} 15 16@media screen and (max-width: 700px) { 17 .room-list { 18 display: -webkit-box; 19 display: -webkit-flex; 20 display: -ms-flexbox; 21 display: flex; 22 -webkit-box-orient: vertical; 23 -webkit-box-direction: normal; 24 -webkit-flex-direction: column; 25 -ms-flex-direction: column; 26 flex-direction: column; 27 -webkit-box-align: center; 28 -webkit-align-items: center; 29 -ms-flex-align: center; 30 align-items: center; 31 } 32} 33 34.room-item { 35 width: 100%; 36 display: -ms-grid; 37 display: grid; 38 -ms-grid-rows: 57px 216px 165px; 39 -ms-grid-columns: 367px 158px 655px; 40 grid-template: 57px 216px 165px/ 367px 158px 655px; 41} 42 43@media screen and (min-width: 600px) and (max-width: 1179px) { 44 .room-item { 45 display: -webkit-box; 46 display: -webkit-flex; 47 display: -ms-flexbox; 48 display: flex; 49 -webkit-box-orient: vertical; 50 -webkit-box-direction: normal; 51 -webkit-flex-direction: column; 52 -ms-flex-direction: column; 53 flex-direction: column; 54 } 55} 56 57@media screen and (max-width: 700px) { 58 .room-item { 59 display: -ms-grid; 60 display: grid; 61 -ms-grid-rows: 57px 216px 165px; 62 -ms-grid-columns: 427px 188px 655px; 63 grid-template: 57px 216px 165px/ 427px 188px 655px; 64 position: static; 65 margin-top: 30px; 66 } 67} 68 69.room-item:nth-of-type(2) { 70 margin: 84px auto; 71 display: -ms-grid; 72 display: grid; 73 -ms-grid-rows: 57px 243px 138px; 74 -ms-grid-columns: 654px 159px 430px; 75 grid-template: 57px 243px 138px/ 654px 159px 430px; 76} 77 78@media screen and (min-width: 600px) and (max-width: 1179px) { 79 .room-item:nth-of-type(2) { 80 display: -webkit-box; 81 display: -webkit-flex; 82 display: -ms-flexbox; 83 display: flex; 84 -webkit-box-orient: vertical; 85 -webkit-box-direction: normal; 86 -webkit-flex-direction: column; 87 -ms-flex-direction: column; 88 flex-direction: column; 89 } 90} 91 92@media screen and (max-width: 700px) { 93 .room-item:nth-of-type(2) { 94 display: -ms-grid; 95 display: grid; 96 -ms-grid-rows: 57px 243px 165px; 97 -ms-grid-columns: 367px 158px 655px; 98 grid-template: 57px 243px 165px/ 367px 158px 655px; 99 position: static; 100 margin-bottom: 30px; 101 } 102} 103 104.room-item:nth-of-type(3) { 105 margin-bottom: 150px; 106} 107 108.room-item-right { 109 -ms-grid-column: 2; 110 -ms-grid-column-span: 3; 111 grid-column: 2 / 5; 112 -ms-grid-row: 2; 113 -ms-grid-row-span: 2; 114 grid-row: 2 / 4; 115 padding-left: 150px; 116 /* 左余白 */ 117} 118 119@media screen and (min-width: 600px) and (max-width: 1179px) { 120 .room-item-right { 121 padding-left: 0px; 122 margin: 0 auto; 123 text-align: center; 124 width: 100%; 125 } 126} 127 128@media screen and (max-width: 700px) { 129 .room-item-right { 130 -ms-grid-column: 1; 131 -ms-grid-column-span: 1; 132 grid-column: 1 / 2; 133 -ms-grid-row: 2; 134 -ms-grid-row-span: 2; 135 grid-row: 2 / 4; 136 text-align: inherit; 137 padding-left: 50px; 138 } 139} 140 141.room-item-right-sec { 142 -ms-grid-column: 2; 143 -ms-grid-column-span: 3; 144 grid-column: 2 / 5; 145 -ms-grid-row: 1; 146 -ms-grid-row-span: 2; 147 grid-row: 1 / 3; 148 z-index: 9; 149} 150 151@media screen and (max-width: 700px) { 152 .room-item-right-sec { 153 z-index: -4; 154 top: 50%; 155 left: 50%; 156 -webkit-transform: translate(-50%, -50%); 157 transform: translate(-50%, -50%); 158 -ms-grid-column: 1; 159 -ms-grid-column-span: 2; 160 grid-column: 1 / 3; 161 padding-left: 0px; 162 } 163} 164 165.room-item-left { 166 -ms-grid-column: 1; 167 -ms-grid-column-span: 2; 168 grid-column: 1 / 3; 169 -ms-grid-row: 1; 170 -ms-grid-row-span: 2; 171 grid-row: 1/3; 172 z-index: 9; 173} 174 175.room-item-left-sec { 176 -ms-grid-column: 1; 177 -ms-grid-column-span: 2; 178 grid-column: 1 / 3; 179 -ms-grid-row: 2; 180 -ms-grid-row-span: 2; 181 grid-row: 2 / 4; 182 z-index: -1; 183} 184 185@media screen and (min-width: 600px) and (max-width: 1179px) { 186 .room-item-left-sec { 187 padding-left: 0px; 188 margin: 0 auto; 189 text-align: center; 190 width: 100%; 191 } 192} 193 194@media screen and (max-width: 700px) { 195 .room-item-left-sec { 196 padding-left: 0px; 197 text-align: inherit; 198 } 199} 200 201@media screen and (max-width: 700px) { 202 .room-item-left { 203 z-index: -4; 204 top: 50%; 205 left: 50%; 206 -webkit-transform: translate(-50%, -50%); 207 transform: translate(-50%, -50%); 208 } 209} 210 211.room-item-img { 212 width: 90%; 213 /* 画像サイズ指定 */ 214} 215 216@media screen and (min-width: 600px) and (max-width: 1179px) { 217 .room-item-img { 218 width: 100%; 219 } 220} 221 222@media screen and (max-width: 700px) { 223 .room-item-img { 224 display: block; 225 width: 95vw; 226 margin: 0 auto; 227 } 228} 229 230@media screen and (max-width: 700px) { 231 .room-item-img > img { 232 opacity: .7; 233 display: block; 234 widows: 100vw; 235 } 236} 237 238.room-item-txt { 239 background-image: url(../../../asserts/img/bg.png); 240 background-position: center; 241 background-size: cover; 242 z-index: 5; 243 -webkit-box-flex: 1; 244 -webkit-flex: 1; 245 -ms-flex: 1; 246 flex: 1; 247} 248 249@media screen and (max-width: 700px) { 250 .room-item-txt { 251 background-image: none; 252 } 253} 254 255.room-item-txt .jp-text { 256 padding-left: 52px; 257 /* grid-area: right; 258 grid-column: 3/4; 259 grid-row: 2/3; */ 260} 261 262@media screen and (max-width: 700px) { 263 .room-item-txt .jp-text { 264 font-weight: bold; 265 } 266} 267 268.room-item-txt .jp-text .ttl { 269 font-size: 2.4rem; 270 padding-top: 60px; 271} 272 273@media screen and (max-width: 700px) { 274 .room-item-txt .jp-text .ttl { 275 font-size: 2.0rem; 276 } 277} 278 279@media screen and (max-width: 500px) { 280 .room-item-txt .jp-text .desc-txt { 281 padding: 0px 10px; 282 } 283} 284 285.room-item-txt .jp-text .desc-txt .desc1, .room-item-txt .jp-text .desc-txt .desc2 { 286 line-height: 1.5; 287 padding-top: 52px; 288 padding-bottom: 52px; 289} 290 291@media screen and (max-width: 700px) { 292 .room-item-txt .jp-text .desc-txt .desc1, .room-item-txt .jp-text .desc-txt .desc2 { 293 padding: 22px; 294 line-height: 1.0; 295 font-size: 1.4rem; 296 font-weight: lighter; 297 } 298} 299 300@media screen and (max-width: 700px) { 301 .room-item-txt .jp-text .desc-txt .desc1 .space, .room-item-txt .jp-text .desc-txt .desc2 .space { 302 display: none; 303 } 304} 305
補足情報（FW/ツールのバージョンなど）
あなたの回答
tips
プレビュー
