コード <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>sample</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="style1.css"> </head> <body> <header> <h1></h1> <p></p> <p></p> </header> <div class="main"> <a href=""><img src="img/sample.png" class="shop logo"></a> <a href=""><img src="img/100x279.png" class="shop logo2"></a> <a href=""><img src="img/103x279.png" class="shop logo3"></a> <a href=""><img src="img/103x279.png" class="shop logo4"></a> <a href=""><img src="img/100x279.png" class="shop logo5"></a> <a href=""><img src="img/sample.png" class="shop logo6"></a> <img src="img/waku.png" class="waku"> </div> </body> <footer> <h1></h1> </footer> </html>
.main{ height: 1350px; position: relative; } .waku{ display: block; height: 1250px; width: auto; margin-left: auto; margin-right: auto; } .shop{ display: block; position: absolute; height: 279px; width: 103px; } .logo{ top: 65px; left: 227px; } .logo2{ top: 344px; left: 227px; } .logo3{ top: 65px; left: 331px; } .logo4{ top: 623px; left: 225px; } .logo5{ top:65px; left: 435px; } .logo6{ top:344px; left: 331px; }
前提・実現したいこと
位置指定したimg要素同士を画面サイズ(幅)によるズレを無くしたいです。
大変、素人な質問で申し訳ないですが宜しくお願いいたします。
HTMLで親要素の<div class="main">に対して
img要素の 『shop logo』 と 『waku』 をcssのposition:relativeとabsoluteで重ねて
『shop logo』 をcssで 『waku』 の左上に位置を指定しました。
しかし添付した図のように少し画面幅を変えると
『shop logo』がズレてしまいます。
レスポンシブ対応ではなく、
幅を少し変えても
1枚目のサンプル画像のように『waku』に合わせて
『waku』のイメージ内に『shop logo』を画面幅を少し変えてもついていく(合わせる)にはどうしたら良いのでしょうか?
そもそも今回のようなことが出来ないのでしょうか?
完成の理想『waku』の画像内に、
同じ縦幅の『shop logo』画像で枠内を埋めたいです。
コードはいろいろ試す前の最初の状態にしてあります。
またcssの『.shop』は
これからHTMLに『class="shop logo"』と一緒の画像を複数、追加するのでまとめて指定するためのcssです。
発生している問題・エラーメッセージ
エラーメッセージ
### 該当のソースコード ### 試したこと cssのmargin等で画面に対して、%指定な色々試しましたが解決出来なかったので 何とぞご教授宜しくお願いいたします。 ### 補足情報(FW/ツールのバージョンなど) ここにより詳細な情報を記載してください。
回答1件
あなたの回答
tips
プレビュー