### 実現したいこと Manaさんの『ＨＴＭＬ＆ＣＳＳとＷＥｂデザイン入門講座』第一版P.２５９チャプター７の「地図の見栄えを整えよう」のステップをやっています。CSSに＜iflame＞タグで幅を100%に指定し、表示エリアからはみ出さないように見栄えを整えたいです。 ### 発生している問題・分からないこと画面の表示が見本のようにはならず、地図が小さくなってしまいます。 [イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2026-03-19/d6d3acd5-3efe-479c-be96-34fb7da79798.png)解決方法がわかりません。。どうしたら、見本のように見栄えを整えられるでしょうか。 ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2026-03-19/2949233f-4595-46f5-b323-fae7595a1b1f.png) ### エラーメッセージ ```error エラーメッセージは表示されていないです。 ``` ### 該当のソースコード ```CSS /* iframe */ iframe { width: 100%; } ``` ```ＨＴＭＬ News Menu contact Contact お名前メールアドレスメッセージカフェ東駅前店住所：東京都〇〇区〇〇〇〇〇〇〇〇〇 000-22-1 〇〇〇〇〇電話： 03-1111-1111 営業時間： 10:00～ 20:00 休日：水曜 © 2019 Manabox ``` ### 試したこと・調べたこと - [x] teratailやGoogle等で検索した - [x] ソースコードを自分なりに変更した - [x] 知人に聞いた - [ ] その他 ##### 上記の詳細・結果解決策がみつかりませんでした。 ### 補足特になし

とりあえずiframeに設定されているwidth="800"を削除してみてください > タグで幅を100%に指定し、表示エリアからはみ出さないように見栄えを整えたいです。幅が100%になったら普通他の要素を押しのけるのではみでるのでは？ # 参考こういうことでしょうか？ ```html .wrapper{ display:flex; width:80%; margin:auto; } .locatiion-map{ width:100%; }.locatiion-map iframe{ height:400px; width:100%; border:0; } カフェ東駅前店住所：東京都〇〇区〇〇〇〇〇〇〇〇〇 000-22-1 〇〇〇〇〇電話： 03-1111-1111 営業時間： 10:00～ 20:00 休日：水曜 ```

実現したいこと

Manaさんの『ＨＴＭＬ＆ＣＳＳとＷＥｂデザイン入門講座』第一版P.２５９チャプター７の「地図の見栄えを整えよう」のステップをやっています。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等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

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

補足

特になし

行動規範の内容に同意します

回答1件

とりあえず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>