デイトラweb制作上級編パターン3 DAY31~44④
nakano
卒業制作課題パターン3 4日目
PC版
スマホ版
Google マップの埋め込み
→ 地図自体の縦幅337px、横幅668px + 白い枠線10px
HTML
<div class="access__map-wrapper">
<div class="access__map">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6480.074416602982!2d139.5758352261497!3d35.70070197075896!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6018ee39b555205f%3A0xabb26a0a2fbda595!2z44CSMTgwLTAwMDMg5p2x5Lqs6YO95q2m6JS16YeO5biC5ZCJ56Wl5a-65Y2X55S677yR5LiB55uu!5e0!3m2!1sja!2sjp!4v1669373911839!5m2!1sja!2sjp"
width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"
referrerpolicy="no-referrer-when-downgrade">
</iframe>
</div>
</div>SCSS
.access__map-wrapper {
background: #fff;
padding: 10px;
margin-bottom: 40px;
}
.access__map {
// 337 ÷ 668で比を維持
padding-top: 54.94012%;
position: relative;
iframe {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
object-fit: cover;
width: 100%;
height: 100%;
}
}まとめ
今回も卒業制作課題に取り組みました。
地図の埋め込みをするとき毎回調べていたような気がするので、この辺りは早く体に慣れてもらいたいです。。。
やっとトップページが終わったので次からは下層ページに取り組みます！
