質問をすることでしか得られない、回答やアドバイスがある。

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

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

Q&A

解決済

2回答

885閲覧

ウェブサイトをスマホやタブレットで見るとPCで見た時より画像と画像の間の隙間が大きくなる

退会済みユーザー

退会済みユーザー

総合スコア0

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

0グッド

0クリップ

投稿2021/11/11 08:50

前提・実現したいこと

スマホでもタブレットでもPCでも綺麗に見れるレスポンシブサイトを作っています。

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

スマホやタブレットで見るとPCで見た時より、トップ画像とセレクト画像の間の隙間が大きくなってしまいます。
PCでみたときと同じ隙間にするにはどうしたらいいでしょうか?

試したこと

スマホ用で試してみて、

#test1-sec { width:100%; margin: 0 auto; margin-top:120px; border-top: solid 10px #2d4283; }

ここのmargin-top:120px;をmax-width: 767px;に変えてみましたがPCと同じにはなりませんでした。
また、120pxを6vhなどにしてみましたが結果は同じでした。

ワードプレスのtwentynineteen5.8.2を使って作っています。

HTML

<html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo( 'charset' ); ?>" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="profile" href="https://gmpg.org/xfn/11" /> <?php wp_head(); ?> </head> <body> <header> <h1>TEST</h1> <nav> <!--ロゴー--> <div class="logo"></div> <!--メニュー--> <div class="main-m-list-menu" id="drawer"> <input id="input" type="checkbox" class="unshown"> <label id="open" for="input"><span></span></label> <label class="unshown" id="close" for="input"></label> <div class="gfh-menu"> <ul> <li class="menu-li1"><a href="index.html">HOME</a></li> <li class="menu-li1"><a href="#test1">TEST1</a></li> <li class="menu-li1"><a href="#test2">TEST2</a></li> <li class="menu-li2"><a href="#test3">TEST3</a></li> </ul> </div> </div> </nav> </header> <!--トップ画像ー--> <section id="top-sec"> <div class="topimg"> </div> </section> <!--test1--> <section id="test1-sec"> <h2>TEST1</h2> <!--セレクト画像--> <div class="sec-test1-img"></div> </section>

CSS

* { margin:0; } h1,h2 { display:none; } li { list-style:none; } #input { display:none; } /*スマホ*/ @media screen and (min-width:280px) and ( max-width:767px) { header { width:100%; background-color:#2d4283; padding-top:10px; padding-bottom:10px; } nav { justify-content: center; align-items: center; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; margin: 0 auto; } .logo { background-image:url('img/logo.png'); background-repeat: no-repeat; background-size: contain; width:100%; height:70px; } /*ハンバーガーメニュー*/ #drawer { position: relative; padding: 1%; height:33px; margin: 0 0 0 auto;  border-radius: 50%; margin-right:2%; } .unshown { display: none; } #open { display: inline-block; width: 30px; height: 32px; cursor: pointer; transform: scale(1.4); } #open span, #open span::before, #open span::after { position: absolute; height: 3px; width: 25px; border-radius: 3px; background: white; display: block; content: ""; text-align:right; } #open span::before { bottom: -8px; } #open span::after { bottom: -16px; } #close { display: none; position: fixed; z-index: 99; top: 0; left: 0; width: 100%; height: 100%; background: #132b88; opacity: 0; transition: .3s ease-in-out; } .gfh-menu { overflow: auto; position: fixed; top: 0; left: 0; z-index: 9999; width: 90%; max-width: 270px; height: 100%; background: #132b88; transition: .3s ease-in-out; transform: translateX(-105%); } #input:checked ~ #close { display: block; opacity: .5; } #input:checked ~ .gfh-menu { transform: translateX(0%); box-shadow: 6px 0 25px rgba(0, 0, 0, .15); } /*ハンバーガーメニュー*/ #top-sec { width:100%; margin: 0 auto; } .topimg { background-image:url('img/top1.jpg'); background-repeat: no-repeat; background-size: contain; width:100%; height:733px; } #test1-sec { width:100%; margin: 0 auto; margin-top:120px; border-top: solid 10px #2d4283; } .sec-test1-img { background-image:url('img/test1.jpg'); background-repeat: no-repeat; background-size: contain; width:100%; height:300px; } } /*タブレット*/ @media screen and (min-width:768px) and ( max-width:1024px) { header { width:auto; background-color:#2d4283; padding-top:10px; padding-bottom:10px; } nav { justify-content: center; align-items: center; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; margin: 0 auto; } .logo { background-image:url('img/logo.png'); background-repeat: no-repeat; background-size: contain; width:360px; height:74px; margin-right:40px; margin-left:3%; } /*ハンバーガーメニュー*/ #drawer { position: relative; padding: 1%; height:33px; margin: 0 0 0 auto;  border-radius: 50%; margin-right:2%; } .unshown { display: none; } #open { display: inline-block; width: 30px; height: 32px; cursor: pointer; transform: scale(1.4); } #open span, #open span::before, #open span::after { position: absolute; height: 3px; width: 25px; border-radius: 3px; background: white; display: block; content: ""; text-align:right; } #open span::before { bottom: -8px; } #open span::after { bottom: -16px; } #close { display: none; position: fixed; z-index: 99; top: 0; left: 0; width: 100%; height: 100%; background: #132b88; opacity: 0; transition: .3s ease-in-out; } .gfh-menu { overflow: auto; position: fixed; top: 0; left: 0; z-index: 9999; width: 90%; max-width: 270px; height: 100%; background: #132b88; transition: .3s ease-in-out; transform: translateX(-105%); } #input:checked ~ #close { display: block; opacity: .5; } #input:checked ~ .gfh-menu { transform: translateX(0%); box-shadow: 6px 0 25px rgba(0, 0, 0, .15); } /*ハンバーガーメニュー*/ #top-sec { width:100%; margin: 0 auto; } .topimg { background-image:url('img/top1.jpg'); background-repeat: no-repeat; background-size: contain; width:100%; height:733px; } #test1-sec { width:100%; margin: 0 auto; margin-top:120px; border-top: solid 10px #2d4283; } .sec-test1-img { background-image:url('img/test.jpg'); background-repeat: no-repeat; background-size: contain; width:100%; height:300px; } } /*PC*/ @media screen and (min-width:1025px) { header { width:auto; background-color:#2d4283; padding-top:10px; padding-bottom:10px; margin: 0 auto; } nav { justify-content: center; align-items: center; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; margin: 0 auto; } .logo { background-image:url('img/logo.png'); background-repeat: no-repeat; background-size: contain; width:360px; height:74px; margin-right:40px; } .gfh-menu { width:auto; text-align:center; height: 100%; } .gfh-menu ul { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; margin: 0 auto; padding-left: 0; } .gfh-menu li a:hover { background-color:rgba(255,255,255,0.75); } .menu-li1 a { display:block; height: 100%; width:174px; color:white; border-right: solid 1px #fff; } .menu-li2 a { display:block; height: 100%; width:175px; color:white; } #top-sec { width:1100px; margin: 0 auto; } .topimg { background-image:url('img/top1.jpg'); background-repeat: no-repeat; background-size: contain; width:100%; height:733px; } #test1-sec { width:1100px; margin: 0 auto; margin-top:120px; border-top: solid 10px #2d4283; } .sec-test1-img { background-image:url('img/test.jpg'); background-repeat: no-repeat; background-size: contain; width:100%; height:300px; } }

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

背景画像では対処が難しいので、img要素にしてはどうでしょうか。

css

1 .topimg { 2 /*background-image: url('img/top1.jpg'); 3 background-repeat: no-repeat; 4 background-size: contain;*/ 5 width: 100%; 6 /*height: 733px;*/ 7 8 }

html

1<!--<div class="topimg"> 2</div>--> 3<img src="img/top1.jpg" alt="" class="topimg">

もちろん、全てのブレイクポイントでCSSを変更する必要があります。

投稿2021/11/12 02:33

編集2021/11/12 02:34
Lhankor_Mhy

総合スコア35865

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

.topimgbackground-sizecoverにしてみてはいかがでしょうか。

投稿2021/11/11 09:06

KAOsaka

総合スコア531

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2021/11/11 11:39

やってみました。 すると隙間がいっさいなくなってしまった上に画像が画面からはみでてでかくなってしまいました。
KAOsaka

2021/11/11 14:03

隙間がなくなったようで良かったです。
退会済みユーザー

退会済みユーザー

2021/11/12 07:17

高さをpadding-topで指定したらはみでることもなくなりました!ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問