Skip to main content
本文から 127 文字削除; タイトルを編集
ソース リンク
cubick
  • 2.1万
  • 5
  • 27
  • 64

HTML埋め込んだGoogle Mapの上部に余白が生まれるのをなくしたいです。

HTML/CSS超初心者です。
かなり初歩的な質問だと思いますが回答いただけますと幸いです。

ポートフォリオ用の架空のWebサイトを作成しています。
添付した画像を参照していただきたいのですが、
住所と埋め込んだGoogle Mapを横並びにしたいのですが、
 アクセス欄をdivで囲み、display:inlineを display:inline指定すると、
 添付した画像のように、地図が横には配置されますが上部に余白ができてしまいます。

画像内の矢印で示したように、
 Google Mapを「アクセス」に引いてある下線のすぐ下に持っていきたいのですが、
 どうしたらよいでしょうか?

試したこと

【試したこと】
・テキストテキスト領域とGoogle Mapをそれぞれdiv領域で分けてcssでdisplay:flexを設定
→単純に横には並ぶがその後のmargin/paddingによる位置の調整ができない

※こういった質問も初めてのため、不手際ございましたら大変申し訳ございません。
何卒よろしくお願い申し上げます。

HTML埋め込んだGoogle Mapの上部に余白が生まれるのをなくしたいです。

HTML/CSS超初心者です。
かなり初歩的な質問だと思いますが回答いただけますと幸いです。

ポートフォリオ用の架空のWebサイトを作成しています。
添付した画像を参照していただきたいのですが、
住所と埋め込んだGoogle Mapを横並びにしたいのですが、
 アクセス欄をdivで囲み、display:inlineを指定すると、
 地図が横には配置されますが上部に余白ができてしまいます。

画像内の矢印で示したように、
 Google Mapを「アクセス」に引いてある下線のすぐ下に持っていきたいのですが、
 どうしたらよいでしょうか?

【試したこと】
・テキスト領域とGoogle Mapをそれぞれdiv領域で分けてcssでdisplay:flexを設定
→単純に横には並ぶがその後のmargin/paddingによる位置の調整ができない

※こういった質問も初めてのため、不手際ございましたら大変申し訳ございません。
何卒よろしくお願い申し上げます。

HTML埋め込んだGoogle Mapの上部に余白が生まれるのをなくしたい

ポートフォリオ用の架空のWebサイトを作成しています。
住所と埋め込んだGoogle Mapを横並びにしたいのですが、アクセス欄をdivで囲み display:inline指定すると、添付した画像のように、地図が横には配置されますが上部に余白ができてしまいます。

画像内の矢印で示したように、Google Mapを「アクセス」に引いてある下線のすぐ下に持っていきたいのですが、どうしたらよいでしょうか?

試したこと

テキスト領域とGoogle Mapをそれぞれdiv領域で分けてcssでdisplay:flexを設定
→単純に横には並ぶがその後のmargin/paddingによる位置の調整ができない

本文に 2 文字追加
ソース リンク

※こういった質問も初めてのため、不手際ございましたら大変申し訳ございません。
何卒よろしくお願い申し上げます。画像の説明をここに入力

画像の説明をここに入力

※こういった質問も初めてのため、不手際ございましたら大変申し訳ございません。
何卒よろしくお願い申し上げます。画像の説明をここに入力

※こういった質問も初めてのため、不手際ございましたら大変申し訳ございません。
何卒よろしくお願い申し上げます。

画像の説明をここに入力

ソース リンク

HTMLで埋め込んだGoogle Mapの上部に余白が生まれるのをなくしたいです。

HTML/CSS超初心者です。
かなり初歩的な質問だと思いますが回答いただけますと幸いです。

ポートフォリオ用の架空のWebサイトを作成しています。
添付した画像を参照していただきたいのですが、
住所と埋め込んだGoogle Mapを横並びにしたいのですが、
アクセス欄をdivで囲み、display:inlineを指定すると、
地図が横には配置されますが、上部に余白ができてしまいます。

画像内の矢印で示したように、
Google Mapを「アクセス」に引いてある下線のすぐ下に持っていきたいのですが、
どうしたらよいでしょうか?

【試したこと】
・テキスト領域とGoogle Mapをそれぞれdiv領域で分けてcssでdisplay:flexを設定
→単純に横には並ぶがその後のmargin/paddingによる位置の調整ができない

※こういった質問も初めてのため、不手際ございましたら大変申し訳ございません。
何卒よろしくお願い申し上げます。画像の説明をここに入力

<section id="access">
                <div id="whole_access">
                    <div id="access_text">
                        <div class="access_walk">
                            <h2>ACCESS アクセス</h2>
                            〒100-0005<br>
                            東京都千代田区丸の内1丁目<br>
                            さくらビル 1F<br>
                        012-345-6789
                        </div>
                        <div class="access_train">
                            <h3>電車でお越しの方</h3>
                            <p>JR「東京駅」中央口から<br>
                            徒歩5分</p>
                            <a href="shops.html"><img src="images/btn_search.png" alt="店舗検索はこちら"></a>
                        </div>
                    </div>
                    <div class="access_map">
                        <iframe
                        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.833233678314!2d139.764510611904!3d35.68110807247296!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bfbd89f700b%3A0x277c49ba34ed38!2z5p2x5Lqs6aeF!5e0!3m2!1sja!2sjp!4v1730344013228!5m2!1sja!2sjp"
                        width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"
                        referrerpolicy="no-referrer-when-downgrade">
                        </iframe>
                    </div>
                </div>
            </section>
/*各メイン領域見出し下の線を引く*/
section h2 {
    border-bottom: #413330 solid;
}

.access_walk h2 {
    width: 721px;
}

/*アクセス欄の住所の下に点線*/

.access_walk {
    border-bottom: #413330 dotted 1px;
}

/*埋め込み地図の大きさを調整*/

iframe {
    width: 300px;
    height: 300px;
    vertical-align: top;
}

#access {
    margin-top: 100px;
    display: block;
}

.access_train img {
    width: 250px;
}

#access div {
    width: 300px;
}

#whole_access {
    display: inline;
}