外側にスペースが出てくる

画像の位置をバラバラに指定したサイトを作成中なのですが３つ問題が出てきています。

①.sample1という画像の左側にスペースができてしまうのとbackgroundが反映されなくて困っています。

②画面のwidthが１０００px以上になったら下記の参考サイトのように
画像がその分比率を変えずに大きくなって欲しいのですが.sample1にどのように記述すればなりますか？
参考サイト　https://galerievie.jp/

②一つ一つの画像を指定した位置に設置するのに適しているやり方として
gridlayoutも途中まで作成したのですがブラウザによっては対応していないなどで
記載コードのようにleftやtopからの配置を指定方法にしたのですがこのやり方でも特に問題はないでしょうか？
先輩方のアドバイス伺いたいです。
（一応レスポンシブでスマホサイズになった場合は違うレイアウトも考えているので
ブレイクポイントまで画面が今回は途切れても気にしない方向です。）

初歩的で申し訳ないのですがどなたか原因お分かりな方いらっしゃいましたら
コメントいただけると幸いです。
よろしくお願いします。

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="UTF-8">
5    <meta name="discription" content="ショップ">
6    <meta name="viewport" content="width=device-width, initial-scale=1">
7    <title>title</title>
8    <!-- css -->
9    <link rel="icon" type="image/png" href="">
10    <link　href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" rel="stylesheet">
11<!-- <link href="stylesheet.css" rel="stylesheet"> -->
12    <link href="stylesheet2.css" rel="stylesheet">
13    <link href="reset.css" rel="resetcss">
14    <!-- js -->
15    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
16    <script src="hamburger.js"></script>
17    <script src="effect-fade.js"></script>
18  </head>
19 <body>
20 <header>
21      <div class="hamburger">
22        <span></span>
23        <span></span>
24        <span></span>
25      </div>
26      <nav class="globalMenuSp">
27        <ul>
28          <li><a href="#">NEWS</a></li>
29          <li><a href="#">PRODUCT</a></li>
30          <li><a href="#">SERVICE</a></li>
31          <li><a href="#">COMPANY</a></li>
32          <li><a href="#">PRIVACY POLICY</a></li>
33          <li><a href="#">CONTACT</a></li>
34          <li><a href="#">Q&A</a></li>
35        </ul>
36      </nav>
37    </header>
38    <main>
39      <div class="top">
40          <img src="images/sample1.svg" class="sample1" alt="1">
41          <img src="images/sample2.svg" class="sample2" alt="2">
42      </div>
43    </main>
44</body>
45</html>

css
1html {
2  font-size: 62.5%; /* -> 1rem=10px; */
3}
4body {
5  width: 100vw;
6  font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro", "Osaka", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック",
7    "MS PGothic", sans-serif;
8  color: #262626;
9  font-size: 1.4em; /* -> 14px; */
10  font-weight: 100;
11  letter-spacing: 0.1em;
12}
13.top{
14    position: relative;
15    width: 1000px;
16    background: rgb(204, 250, 218);
17}
18.sample1{
19    position: absolute;
20    width: 509px;
21    height: 406px;
22    left: 0px;
23    top: 36px;
24}
25.sample2{
26    position: absolute;
27    width: 335px;
28    height: 321px;
29    left: 584px;
30    top: 223px;
31}
32
33 @media only screen and (min-width: 1001px) {
34  .top {
35    background: purple;
36    width: 100vw;
37  }
38
39}
40
41
42/*　ハンバーガーボタン */
43.hamburger {
44  display: block;
45  position: fixed;
46  z-index: 3;
47  right: 32px;
48  top: 32px;
49  width: 42px;
50  height: 42px;
51  cursor: pointer;
52  text-align: center;
53  background: rgba(174, 174, 174, 0.618);
54}
55.hamburger span {
56  display: block;
57  position: absolute;
58  width: 30px;
59  height: 2px;
60  left: 6px;
61  background: #555;
62  transition: 0.5s all;
63}
64.hamburger span:nth-child(1) {
65  top: 10px;
66}
67.hamburger span:nth-child(2) {
68  top: 20px;
69}
70.hamburger span:nth-child(3) {
71  top: 30px;
72}
73
74/* ナビ開いてる時のボタン */
75
76.hamburger.active span:nth-child(1) {
77  top: 16px;
78  left: 6px;
79  transform: rotate(-45deg);
80}
81.hamburger.active span:nth-child(2) {
82  left: 60%;
83  opacity: 0;
84  -webkit-animation: active-btn17-bar02 0.8s forwards;
85  animation: active-hamburger-bar02 0.8s forwards;
86}
87@-webkit-keyframes active-hamburger-bar02 {
88  100% {
89    height: 0;
90  }
91}
92@keyframes active-hamburger-bar02 {
93  100% {
94    height: 0;
95  }
96}
97.hamburger.active span:nth-child(3) {
98  top: 16px;
99  transform: rotate(45deg);
100}
101
102.hamburger::after {
103  position: absolute;
104  top: 50%;
105  left: 50%;
106  display: block;
107  content: "";
108  width: 80px;
109  height: 80px;
110  margin: -45px 0 0 -43px;
111  border-radius: 50%;
112  border: 2px solid rgba(0, 0, 0, 0);
113  transition: all 0.75s;
114}
115.hamburger.active::after {
116  border: 2px solid #555;
117}
118
119nav.globalMenuSp {
120  position: fixed;
121  z-index: 2;
122  top: 0;
123  left: 0;
124  color: #000;
125  background: #fff;
126  text-align: center;
127  transform: translateX(100%);
128  transition: all 0.6s;
129  width: 100%;
130}
131
132nav.globalMenuSp ul {
133  background: #ccc;
134  margin: 0 auto;
135  padding: 0;
136  width: 100%;
137}
138
139nav.globalMenuSp ul li {
140  list-style-type: none;
141  padding: 0;
142  width: 100%;
143}
144nav.globalMenuSp ul li:last-child {
145  padding-bottom: 0;
146}
147nav.globalMenuSp ul li a:hover {
148  color: #fff;
149}
150
151nav.globalMenuSp ul li a {
152  display: block;
153  color: #000;
154  padding: 1.5em 0;
155  text-decoration: none;
156}
157
158/* このクラスを、jQueryで付与・削除する */
159nav.globalMenuSp.active {
160  transform: translateX(0%);
161}
162

K_3578

2021/04/13 06:48

質問と関係ないですけど、 >class="sumple1" サンプルは sample と書きます。

mikan23

2021/04/13 06:49

ありがとうございます！

K_3578

2021/04/13 06:51

修正するのは良いですけど全部修正しましょ。cssはsumpleのままですよ

K_3578

2021/04/13 07:28

htmlも省略せずにソース載せてください。実際のコードと同様の動きをするかどうか分からないので。

mikan23

2021/04/13 07:54

何度もすみません。訂正させていただきました。

K_3578

2021/04/13 08:02

mikan23

2021/04/13 08:35

ご回答ありがとうございます。 stylesheetに変更したところreset.cssが反映されました。ありがとうございます。

K_3578

2021/04/13 08:38

多分以降の内容は既に回答されている方がいらっしゃるので私はこれで。

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

回答2件

①.sample1という画像の左側にスペースができてしまうのとbackgroundが反映されなくて困っています。

左側のスペースは bodyのデフォルトのmarginです。下記で、打ち消せばいいでしょう。

css
1body {
2  margin: 0;
3}

backgroundが反映されないというのは .top の背景色のことですか。
だとしたら、高さが指定していないので 0 になっているせいです。適切な高さを設定すればいいでしょう。例えば、下記のように。

.top{
position: relative;
width: 1000px;
background: rgb(204, 250, 218);
height: 600px; /* 追加 */
}

なぜ、高さが 0 になるかというと中のimg要素にposition: absolute;を設定しているからです。
position: absolute;を設定した要素は通常フローから外れるので他の要素からないものとして扱われます。
.topからみると中身がなにもないので、高さ0になります。

以下、投稿したつもりが反映されてなかったので再投稿です。

②画面のwidthが１０００px以上になったら下記の参考サイトのように
画像がその分比率を変えずに大きくなって欲しいのですが.sample1にどのように記述すればなりますか？

画像の幅は相対指定（%）にして、高さは height: auto; にして縦横比が維持されるようにすればいいでしょう。

②一つ一つの画像を指定した位置に設置するのに適しているやり方として
gridlayoutも途中まで作成したのですがブラウザによっては対応していないなどで

position: absolute;はレスポンシプ対応させようとすると面倒なので、避けたほうがいいでしょう。
gridlayoutでもいいですが、今回のように２つぐらいなら、
FlexBoxで横並びにして、後はmargin で位置調整するのがいいかと思います。

下記はFlexBoxでレイアウトしたコード例ですので、これを参考にしてください。

css
1body {
2  width: 100vw;
3  font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro", "Osaka", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック",
4    "MS PGothic", sans-serif;
5  color: #262626;
6  font-size: 1.4em; /* -> 14px; */
7  font-weight: 100;
8  letter-spacing: 0.1em;
9  margin: 0;
10}
11.top{
12    display: flex;
13    align-items: flex-start;
14    width: 1000px;
15    background: rgb(204, 250, 218);
16}
17.sample1{
18    width: 50.9%;;
19    height: auto;
20    left: 0px;
21    margin-top: 36px;
22}
23.sample2{
24    width: 33.5%;
25    height: auto;
26    margin-left: 60px;
27    margin-top: 223px;
28}
29
30 @media only screen and (min-width: 1001px) {
31  .top {
32    background: purple;
33    width: 100vw;
34  }
35}

投稿2021/04/13 08:06

総合スコア34367

2021/04/13 08:39

＞左側のスペースは bodyのデフォルトのmarginです。下記で、打ち消せばいいでしょう。 margin 0にしたところ消えました！また、reset.cssが反映されておらず気付きませんでした。ありがとうございます。＞適切な高さを設定すればいいでしょう。画像が出ていたので勝手に高さはあるものだと思っていました。高さを設定したところ反映されました。 position: absolute;は中身に反映されないのですね。勉強になりました。使い方によっては色々ややこしくなりそうですね。ご丁寧にどうもありがとうございました。わかりやすくとても参考になりました。

mikan23

2021/04/14 06:11 編集

追記ありがとうございます。 width: 50,9%; height: auto; でできました。％の使い方があまり理解できていなかったので助かりました。ありがとうございます。＞FlexBoxでレイアウトありがとうございます。実は2個ではなく、まだたくさん写真が重なったり指定する箇所が何個かあるので今回はFlexBoxは避けていたのですが参考にさせていただきます。ご丁寧にありがとうございました。

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

ベストアンサー

こんにちは。

①.sample1という画像の左側にスペースができてしまうのとbackgroundが反映されなくて困っています。

左側のスペースは確認できませんでした。
backgroundとは.topの背景のことであれば、子要素が絶対配置されているため、内容物がなくなって高さがつぶれています。

②画面のwidthが１０００px以上になったら下記の参考サイトのように
画像がその分比率を変えずに大きくなって欲しいのですが.sample1にどのように記述すればなりますか？
参考サイト　https://galerievie.jp/

直前の親要素は1000pxであったわけですから、このようにしてはどうでしょうか。

css
1@media only screen and (min-width: 1001px) {
2    .sample1 {
3    /*	width: 509px;
4        height: 406px; */
5        width: 50.9vw;
6        height: 40.6vw;    
7    }

②一つ一つの画像を指定した位置に設置するのに適しているやり方として
gridlayoutも途中まで作成したのですがブラウザによっては対応していないなどで
記載コードのようにleftやtopからの配置を指定方法にしたのですがこのやり方でも特に問題はないでしょうか？

ノングリッドデザインをするのであれば使うしかないと思いますが、絶対配置を多用したレイアウトはコンテンツ依存サイズに弱いので、影響範囲を限定するような組み方をお勧めします。
グリッドレイアウトは、ノングリッドデザインにあまり向いていないと思います。

投稿2021/04/13 08:18

Lhankor_Mhy

総合スコア37634

mikan23

2021/04/13 08:44

＞①高さを設定したところ反映されました。ありがとうございます。＞②コードありがとうございます。 vwの使い方がなかなかよくわからなかったのですがこのような使い方もあるのですね！とても感動してしまいました。。＞影響範囲を限定するような組み方をお勧めします。といいうのはどういうことでしょうか？すみません簡単で構わないのでもし可能であればお手隙であればお伺いしたいです。ご丁寧にご回答ありがとうございました。また何かありましたらよろしくお願いします。

Lhankor_Mhy

2021/04/13 09:12

言うだけなら簡単なのですが、あるパーツのデザインについて、他のパーツがどうあっても内部のデザインが影響を受けず、内部でどのような変更をしても外部に影響が出ないようにすることです。いきなり回答と矛盾してしまうのですが、たとえば、vwの単位を使うと画面サイズに依存をしてしまうので、内容物がはみ出したりレイアウトが崩れる恐れがあります。パーツの一番外側の要素のサイズを決めておいて、子要素を親要素の相対的なサイズで定義すれば、外側のレイアウトにかかわらず内部のデザインを一定にすることができます。いやほんと、言うだけなら簡単なのですが、実際にそのようにするのはなかなか大変です。

mikan23

2021/04/13 10:48

>内容物がはみ出したりレイアウトが崩れる恐れがあります。確かにそうですね。いつもwidth1000pxでレイアウトしているのでそれ以上になった時にどうしたら良いかいまだに悩んでます。おっしゃる通りvwは画面サイズに依存してしまうので便利なのですが大きくなったときにちょっと怖いですね。親要素も子要素も一緒に拡大させるという方法はあるのでしょうか？素人同然なので失礼な質問でしたら申し訳ございません。

Lhankor_Mhy

2021/04/13 10:51

すみません、当方も素人なので…… たとえば、回答の例ですと、 .sample1{ width: 50.9%; } の方が望ましいです。ただ、ご提示のコードは height も指定されているので、その部分をパーセンテージにするにはいろいろ見直しが必要になると思います。

mikan23

2021/04/14 05:40

お返事ありがとうございます。そうですよね、最初は拡大する予定で組んでいなかったので後々やるとなると全部修正が必要ですよね。各要素の配置をabsoluteのtopやleft指定ではなくpaddingで設定するとまた状況も変わるでしょうか？特にabsoluteのtopやleft指定のこだわりがあるわけではないです。すみません何度も相談のようになってしまいまして。回答はもし可能であればで大丈夫なのでご助言いただければ幸いです。

Lhankor_Mhy

2021/04/14 05:48

残念ながら垂直方向のパディングは親要素の高さを参照しないんですよね…… > 包含ブロックの width に対するパーセント値 https://developer.mozilla.org/ja/docs/Web/CSS/padding-top ですので、もっとうまくいかないと思います。 --- これに関する一般的な手法は、width を指定して、height を指定しない、というものです。画像などは「内在アスペクト比」を持っていて、幅だけ指定するとアスペクト比から高さを自動計算するのです。つまり、垂直方向の位置についてはある程度のずれが起きることを許容する、というレイアウトが多く、mikan23さんの取り組まれているノングリッドデザインとはいささか相性が悪いです。

mikan23

2021/04/14 07:33

＞垂直方向のパディングは親要素の高さを参照しないそうなんですね…！画像が重なっている部分が結構あるレイアウトなので拡大できるとそれはそれで今回のケースは色々支障が出ることがわかりました。とても勉強になりました。本当にありがとうございます。

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

あなたの回答