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

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

解決済

1回答

260閲覧

img要素をcssで重ねたときの位置指定の方法を宜しくお願いいたします。

rvuUBbCHlsCjt2a

総合スコア7

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クリップ

投稿2020/01/18 13:37

編集2020/01/19 04:03
コード <!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/ツールのバージョンなど) ここにより詳細な情報を記載してください。

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

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

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

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

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

kei344

2020/01/18 14:23

コードはスクリーンショットでなくコードブロックにテキストでお書きください。コードブロックは ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
rvuUBbCHlsCjt2a

2020/01/18 15:23

ご指摘ありがとうございます!!! 私自身が無知だった為、質問のルールをご教授していただきありがとうございます!! 修正いたします!!
kei344

2020/01/18 16:50

提示された要素以外の要素をどう配置するか、それがコードから読み取れません。完成図があるなら先に提示されたほうがよいと思います。
hatena19

2020/01/18 17:05

可能なら、画像は絶対パスにしてもらえると分かり安い。あるいは実際のURLを提示するか。 だめなら、下記で同じサイズのダミー画像を作成してそれを指定する。 https://placehold.jp/
rvuUBbCHlsCjt2a

2020/01/19 04:05

「kei344」さん、 大変失礼しました! 今画像を追加して修正させていただきました!!ありがとうございます!
rvuUBbCHlsCjt2a

2020/01/19 04:07

「hatena19」さん ご指摘ありがとうございます!! そして大変便利なツールまで教えていただきすごく助かりました! 早速画像作成して利用して修正させていただきました!
guest

回答1

0

ベストアンサー

『shop-logo』がズレてしまいます。

呈示のHTMLコードなら、下記で.shop-logoの左上から位置を固定できるはずです。
画面幅で位置が変わるなら、メディアクエリかスクリプトで設定を変更している箇所があるはずです。

css

1.shop-logo{ 2 display: block; 3 position: absolute; 4 height: 279px; 5 top: 20px; 6 left: 20px; 7}

top: left: の数値は適宜変更してください。

追記

『waku』画像のサイズが固定でいいなら、下記のようなCSSで。

css

1.main{ 2/* height: 1350px; */ 3 width: 800px; /*『waku』画像の幅*/ 4 position: relative; 5 margin-left: auto; 6 margin-right: auto; 7} 8 9.waku{ 10 display: block; 11 height: 1250px; 12 width: 100%; 13} 14.shop{ 15 display: block; 16 position: absolute; 17 height: 279px; 18 width: 103px; 19} 20.logo{ 21 top: 10px; 22 left: 10px; 23} 24.logo2{ 25 top: 290px; 26 left: 10px; 27} 28.logo3{ 29 top: 10px; 30 left: 114px; 31} 32.logo4{ 33 top: 570px; 34 left: 10px; 35} 36.logo5{ 37 top:10px; 38 left: 218px; 39} 40.logo6{ 41 top:290px; 42 left: 114px; 43}

動作確認用サンプル

『waku』内すべて埋め尽くすならCSS Flexbox か CSS Grid を使うのがいいかも。

投稿2020/01/18 17:22

編集2020/01/19 06:45
hatena19

総合スコア33620

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

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

rvuUBbCHlsCjt2a

2020/01/19 04:13

ご回答ありがとうございます! 本当にありがとうございました!!
rvuUBbCHlsCjt2a

2020/01/19 10:48

本当ーーーーにありがとうございます!!!! 神です!! 『hetena19』さんに 良いことがありますように!!! ありがとうございました!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問