Contents
猫カフェにGoogleマップを表示する
マップ630px 235px
iframe直 index-22-4.html使ってサンプルに置き換えする
猫カフェのページ用に調整
「#accsess-container」の子要素<div>が、<iframe>を埋め込んだことで増えたので、CSSの方も少し変更が必要になります。
<section id="access-container">
<div>
<h3>交通アクセス</h3>
<dl>
<dt>所在地</dt>
<dd>東京都新宿区西新宿1-7-3</dd>
<dt>電話番号</dt>
<dd><a href="tel:03-3344-2222">03-3344-2222</a></dd>
</dl>
<ul>
<li>新宿西口駅前、徒歩3分</li>
<li>東京駅からJR中央線で14分</li>
<li>上野駅からJR山手線で24分</li>
<li>JR・小田急線・京王線・地下鉄から地下街、駅前から歩道橋が直結</li>
</ul>
<p>お車でお越しの方は、お近くのコインパーキングをご利用ください。</p>
</div>
<div id="map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d558.2357641231084!2d139.69668802559602!3d35.6915011000415!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188cd6981dce11%3A0x4c93aeebef13825d!2z5p2x5Lqs44Oi44O844OJ5a2m5ZyS!5e0!3m2!1sja!2sjp!4v1648313883247!5m2!1sja!2sjp" width="400" height="200" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</section>「index.css」のスマートフォン側のセレクタ「#access-container div」は、「#access-container div:first-of-type」または「#access-container div:first-child」の擬似クラスを使って、デザインする場所を最初の<div>に指定しておきます。
#access-container div:first-of-type{
width: 100%;
padding: 0 5% 40px 5%;
}
文章と地図がくっつきすぎるため、下パディングの値を変更していますが、後で調整しても構いません。
先ほどのTipsを追加しておきます。
#map {
position: relative;
width: 100%;
padding-top: 75%;
}
#map iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}PC側のセレクタ「#access-container div」の方も変更しておきます。
#access-container div:first-of-type{
width: 400px; /* flex: 0 1 400px; */
padding: 0;
}display:flexで横に並んだ、左側の<div>の幅を400pxに変更しています。
flexプロパティで幅を設定しても構いません（flexの方が推奨）
PC画面での地図の大きさと余白を調整します。
#map{
padding-top: 40%;
margin-left: 20px;
}padding-topで設定する地図の高さは、お好みで変更してください。
スクロールするとヘッダーの前面に表示される問題を、z-indexプロパティで解決します。
#mapでpositionプロパティを使ったため、ヘッダーの前面に表示されるようになっています。
ロゴに設定したz-indexをヘッダーへ移しておきましょう。
/* ヘッダー */
header{
background-color: rgb(210,180,175);
box-shadow: 0px 1px 5px rgba(0,0,0,0.45);
position: absolute;
z-index: 1000;
}
header>p{
width: 40vw;
margin: auto;
position: relative;
top: 7.6vw;
/* z-index:1000; */
}