HTML CSS google-mapの埋め込み時について

Question

前提・実現したいこと

初投稿です。
宜しくお願いします。
初心者で現在模写サイトを作成しています。

google map埋め込み時のCSSでの質問です。

答え合わせのときにCSSで

border: 0;
overflow: hidden;
background-color: transparent;

の三つのコードが記述されています。
こちらのコードがなぜ記述されているのか理解できません

なぜこの様な記述する意味があるのでしょうか？

ご教授いただけたら嬉しいです。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

<div id="company">
<div class="map">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.2914382280856!2d139.72342666557796!3d35.669825288204194!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188c820ac932eb%3A0xc68079dd10afd971!2z44CSMTA3LTAwNjIg5p2x5Lqs6YO95riv5Yy65Y2X6Z2S5bGx77yR5LiB55uu!5e0!3m2!1sja!2sjp!4v1611987713735!5m2!1sja!2sjp"></iframe>
</div>
</div>

　　#company .map iframe {
    width: 100%;
    height: 300px;
    border: 0;
    overflow: hidden;
    background-color: transparent;
  }

試したこと

検証ツールで確認して付けたり消したりしていましたが、私が見た限り変化が見られません。

またレスポンシブでの確認も取れませんでした。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

答え合わせ

現実のWeb制作に「正解」はありません。意図した範囲のブラウザで意図したような表示をできるなら、妥当な記載の方法は無限にあります。

Comments

[maisumakun]

他のCSSがどのように適用されているか、なども必要性を考慮する上では検討しなければなりません。

[minipla]

回答ありがとうございます。色々と模索してみます。

Answer 2

模写に正解を求めるのは良いけれど、
そのサイトを作った人が100％正しいコーディングをしたかどうかはわからないですよ。
というか、常に正しいのは無理です。実務上無理なんです。

border: 0;
これはデザイナーさんのデザイン自体に枠がなかったり、
お客さんから「ねぇこの枠消せないの？」というクレームで消す感じです。
無い方がすっきりしていて見やすいとか、
デフォルトのborderはマップを目立たせるために立体感を出してますし。
フラットな感じにしたいとか。見た目上の理由が大きいです。

overflow: hidden;
これは「地図を変更して欲しい」と言われたときに、
コードを何も考えずにコピペで貼るやつがいるので、
サイズ800x600で埋め込みとかされてもデザインが崩れないように、
スクロールが出ないようにしたかったのだと思われます。
縦が伸びるとスマホで地図が全画面になって詰みますから。

補足：twitterを埋め込むと枠からはみ出してタイムラインだけが伸びたりします。
つい最近ありました。埋め込み系は提供する側のコードが変わると崩れやすいのでご注意ください。

background-color: transparent;
これははっきりとはわからないのだけど、
「googleMapに背景色を付ける」みたいな情報をたくさん見かけたのと、

Can google maps have a transparent bg? I've been messing with the paramaters but can't find a solution. I'm using the JS API.

グーグルマップの背景って透明にできる？
探してるけどパラメータが見つからないんだ。
JSのAPI使ってるよ。
※意訳

上記のような英語の情報を見かけたので、
GoogleMapをAPIで読み込ませる際に背景が透明にできなくて
CSS側で工夫した結果なのかなぁ、と推察いたします。
※英語はちょっと古い情報でした

API扱いきれなくて埋め込みに戻すことや、
お金払いたくないから埋め込みにしてというのもあります。
Google MAP APIを使ったこともありますが、
背景は気にならなかったのでAPIの仕様が変わっているのかもしれません。
その後何も考えずにCSSも移植した…とか。
※リニューアルしてコード使いまわしとか、時短のためにテンプレ作ってて、
そのサイトでは使わないのに残ってるという意味の無いコードは結構見かけますよ

実務上無理というのは、他の人が触るし、無茶振りはあるし、言語やAPI等の仕様は変わるし…
サイト制作時にコーディングした人が『お客さんからの要望で』形にしたものであり、
連絡も無しに勝手に中身のコンテンツを変えられて崩れた場合、
怒られるのはコーディングしてる人なんで不本意でも、
「予防のために」足さないといけないものもあったりするんです。

無駄だけど無駄じゃないんです。
えぇ、無駄じゃないんですよ…

とまぁこんな感じですが参考になりますでしょうか。

Comments

[minipla]

amiya-seさん細かいご指摘やその背景までの回答ありがとうございます。
borderとbackgroundの２つは理解できました。
とても参考になりました。

overflow: hidden;の件は物理的な意味で違いが分かっておりません。
こちらはレスポンシブの時（スマホ状態）にスクロールが出てしまっってそれを
打ち消しているという意味で宜しいのでしょうか？
検証ツールで縮めて確認はしているのですが、何処に何の違いが出ているのか目視で確認できずに
困惑しております。すみません。

[退会済みユーザー]

GoogleMAPをサイトに埋め込む際にはiframeタグが使われていると思うのですが、
これのサイズをコントロールしたい感じです。

iframeは「サイト上にもう一つサイトの画面を表示する」という働きをします。
パソコンやスマホでサイトを見ると大体右側にスクロールバーが出ますよね？
それと同じことがGoogleMAPやTwitterを埋め込んでも起こるんです。

実際にGoogleMAPを開いてメニューから地図を埋め込むを選んでいただいて、
地図のサイズを大もしくは中で埋め込みリンクを生成していただくと分かるかもです。

埋め込み用のhtmlを大生成すると、
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d25799.10583548939!2d139.476992!3d36.0718302!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sja!2sjp!4v1614351729273!5m2!1sja!2sjp" width="800" height="600" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

heightが600pxになります。中は450pxです。

子要素が親要素より大きいと枠からはみ出してしまってレイアウトが崩れたり、
スマホだと画面いっぱいに広がって下へスクロールできなくなったりします。

スクロールしているとなぜか横に大きく動いてしまうサイトや、
画面いっぱいに広がった要素が邪魔でスクロールできないサイトを見かけたことはありませんか？

ここのコメント欄でも長い文章を打つと右側にスクロールバーが出ますが、
始めは無いのに文章が長くなると出ますよね？

これはコメント欄よりも中にある文章の方が高さが高くなってしまったからなんです。
枠が固定で全部表示できない領域を表示するためにスクロールバーが出るんです。
で、このスクロールバーがデザインをダサく？してしまい、
「消せないのこれ」とお客様からクレームいただいたり、
デザイナーさんから苦情を言われたりします。「ちゃんと再現しろよ」って。

overflow: hidden;は定めた高さを超えてはみ出たコンテンツは隠してねという意味です。
だから大きな地図を間違って埋め込んでもレイアウトが高さ300pxのままで固定されます。
はみ出た部分は隠すからです。
見た目が変わらないようにするための記述です。
なので見た目が変わらないことが大切です。

Answer 3

こんにちは。

当方で確認したところ、見た目の違いがあるようです。（border: 0）

サンプル

miniplaさんの環境で違いが出なかったのは、おそらく、たまたま、リセットCSSなどですでに打ち消されていた、などの理由ではないでしょうか。

参考：
各ブラウザごとのデフォルトのスタイルシート、user agent stylesheetのまとめ -Chrome, Safari, Firefox, Edge | コリス

---

他のプロパティについてですが。
overflow: hiddenもいろいろな面で影響が出ますので、周辺のコードがないと何とも言えないところがあります。
background-color: transparentは初期値そのままなのでいらないかな、とも思います。もしかするとデフォルトCSSで上書きしているブラウザが存在している可能性もあるかもしれませんが……

Comments

[minipla]

回答ありがとうございます。
border:0;の件はわかりました。リセットCSSで打ち消していました。

overflow: hiddenの所はまだ確認が取れていません。
具体的にどの様な所で見分けが付いているのでしょうか？

念のために参考に作っている模写サイトは下記のページです。
https://code-step.com/demo/html/store2/company.html

[Lhankor_Mhy]

overflow: hidden については、私のサンプルでは差異がないと思います。
回答を書いたときには周辺のコードによっては影響があるかと思っていたのですが、影響が出そうな事柄についていろいろ考えてみましたが、なくても問題がないように思えてきました。

[Lhankor_Mhy]

さらに調べてみたところ、overflow の適用対象は、「ブロックコンテナー, フレックスコンテナー, グリッドコンテナー」とのこと。
https://developer.mozilla.org/ja/docs/Web/CSS/overflow#specifications

インラインフレームは、置換要素のためブロックコンテナではないと思いますので、そもそも overflow を指定する対象ではない、ということかもしれません。