質問するログイン新規登録

Q&A

1回答

395閲覧

地図の見栄えの整え方を教えてください。

hyokkn

総合スコア0

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2026/03/19 01:55

編集2026/03/19 03:07

0

0

実現したいこと

Manaさんの『HTML&CSSとWEbデザイン入門講座』第一版P.259チャプター7の「地図の見栄えを整えよう」のステップをやっています。CSSに<iflame>タグで幅を100%に指定し、表示エリアからはみ出さないように見栄えを整えたいです。

発生している問題・分からないこと

画面の表示が見本のようにはならず、地図が小さくなってしまいます。
イメージ説明解決方法がわかりません。。
どうしたら、見本のように見栄えを整えられるでしょうか。
イメージ説明

エラーメッセージ

error

1エラーメッセージは表示されていないです。

該当のソースコード

CSS

1/* iframe */ 2iframe { 3 width: 100%; 4}
<body> <div id="contact" class="big-bg"> <header class="page-header wrapper"> <h1><a href="index.html"><img class="logo" src="images/logo.svg" alt="WCBカフェホーム"></a></h1> <nav> <ul class="main-nav"> <li><a href="news.html">News</a></li> <li><a href="menu.html">Menu</a></li> <li><a href="contact.html">contact</a></li> </ul> </nav> </header> <div class="wrapper"> <h2 class="page-title">Contact</h2> <form action="#"> <div> <label for="name">お名前</label> <input type="text" id="name" name="your-name"> </div> <div> <label for="email">メールアドレス</label> <input type="email" id="email" name="your-email"> </div> <div> <label for="message">メッセージ</label> <textarea id="message" name="your-message"></textarea> </div> <input type="submit" class="button" value="送信"> </form> </div><!-- /wrapper --> </div><!-- /#contact --> <section id="location"> <div class="wrapper"> <div class="location-info"> <h3 class="sub-title">カフェ東駅前店</h3> <p> 住所:東京都〇〇区<br> 〇〇〇〇〇〇〇〇〇 000-22-1<br> 〇〇〇〇〇<br> 電話: 03-1111-1111<br> 営業時間: 10:00~ 20:00<br> 休日:水曜 </p> </div><!-- locatiion --> <div class="locatiion-map"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.6678652095134!2d139.75022457457158!3d35.68517932975915!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188c0d02d8064d%3A0xd11a5f0b379e6db7!2z55qH5bGF!5e0!3m2!1sja!2sjp!4v1773379531211!5m2!1sja!2sjp" width="800" height="400" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> </div><!-- locatiion --> </div><!-- /wrapper --> </section><!-- /#location --> <footer> <div class="wrapper"> <p><small>&copy; 2019 Manabox</small></p> </div> </footer> </body>

試したこと・調べたこと

  • teratailやGoogle等で検索した
  • ソースコードを自分なりに変更した
  • 知人に聞いた
  • その他
上記の詳細・結果

解決策がみつかりませんでした。

補足

特になし

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

guest

回答1

0

とりあえずiframeに設定されているwidth="800"を削除してみてください

タグで幅を100%に指定し、表示エリアからはみ出さないように見栄えを整えたいです。

幅が100%になったら普通他の要素を押しのけるのではみでるのでは?

参考

こういうことでしょうか?

html

1<style> 2.wrapper{ 3display:flex; 4width:80%; 5margin:auto; 6} 7.locatiion-map{ 8width:100%; 9}.locatiion-map iframe{ 10height:400px; 11width:100%; 12border:0; 13} 14</style> 15<div class="wrapper"> 16<div class="location-info"> 17<h3 class="sub-title">カフェ東駅前店</h3> 18<p> 19住所:東京都〇〇区<br> 20〇〇〇〇〇〇〇〇〇 000-22-1<br> 21〇〇〇〇〇<br> 22電話: 03-1111-1111<br> 23営業時間: 10:00~ 20:00<br> 24休日:水曜 25</p> 26</div> 27 <div class="locatiion-map"> 28 <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.6678652095134!2d139.75022457457158!3d35.68517932975915!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188c0d02d8064d%3A0xd11a5f0b379e6db7!2z55qH5bGF!5e0!3m2!1sja!2sjp!4v1773379531211!5m2!1sja!2sjp" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> 29 </div> 30</div>

投稿2026/03/19 02:37

編集2026/03/19 03:23
yambejp

総合スコア118405

hyokkn

2026/03/19 02:53

ご回答ありがとうございます! さっそく、HTMLのwidth="800"の削除を試してみました。しかし、見栄えがまったく変わりませんでした。。
yambejp

2026/03/19 02:55

>見栄えがまったく変わりません 地図自体の幅が狭くなっていませんか?
hyokkn

2026/03/19 03:08

完成版の画像も添付しました。本来このように表示されるはずが、最初に添付したような狭い幅のままでして。。
yambejp

2026/03/19 03:24

完成版を目安に参考をあげておきます
hyokkn

2026/03/19 05:15

ご丁寧にご回答ありがとうございました! 大変申し訳ありません。。スペルミス(誤字)でした。。 丁寧にご対応くださったので、ベストアンサーに選ばせていただきました。 本当にありがとうございました!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.29%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問