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

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

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

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

Q&A

0回答

635閲覧

画像をHTMLで重ねようと思ったのですが、 ブラウザ画面の縮小を行うと重ねた画像位置がずれてしまいます。

tetemi

総合スコア0

HTML

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

0グッド

0クリップ

投稿2021/02/08 01:56

編集2021/02/08 05:15
画像をHTMLで重ねようと思ったのですが、 ブラウザ画面の縮小を行うと重ねた画像位置がずれてしまいます。 どんな画面でも同じ位置に画像を重ねるためにはどうすればいいでしょうか。 HTMLの記述もネットの記述をコピペしていることが多いので そもそもの記述が間違っている可能性もあります。 大変わかりにくいと思いますが、何卒宜しくお願いします。

HTML

1<div style="position: relative;"> 2 <p> 3 <img alt="" src="*****.png" style="width: 750px; height: 1000px;" /></p> 4 <div style="position: absolute; top : 680px; left : 1000px;"> 5 <a href="#teiki1"><img alt="" src="*****.png" style="width: 280px; height: 280px;"class="keyframe5 animation" /></a></div> 6</div>

イメージ説明

試したこと

css側で「relative」「absolute」の設定を試しましたが、
画像が重ならずうまく行きませんでした。

補足情報(FW/ツールのバージョンなど)

下記は、ボタンの画像となっており動きを加えるため使用しています。(こちらは思い通りになっています)
a href="#teiki1"
keyframe5 animation

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

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

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

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

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

m.ts10806

2021/02/08 02:03

>【パンパンの初心者です】 意味がわかりません。ひとまず質問に「初心者アイコン」をつけるに留めてください
tetemi

2021/02/08 02:14

すみません。目立つようにしてしまいました。。 修正して、別途質問します。
m.ts10806

2021/02/08 02:18

別途する必要はないです。 この質問を修正してください
tetemi

2021/02/08 03:07

有難う御座います! 編集完了しました!
m.ts10806

2021/02/08 04:27

コードはマークダウンのcode機能にてご提示ください
m.ts10806

2021/02/08 04:28

あと「重ねる」というのは完全に重なり、後ろのものは見えなくなる状態を意図していますか? 完成形を図示されたほうが良いかと思います
tetemi

2021/02/08 04:44

改善いたしました! >あと「重ねる」というのは完全に重なり、後ろのものは見えなくなる状態を意図していますか? 上記に関しては、画像の添付を行いました。 見えなくなるのではなく、横に移動するような状態です。宜しくお願いします。
m.ts10806

2021/02/08 04:47

コードのマークダウンができていません。 投稿前にプレビューでご確認を。
tetemi

2021/02/08 05:15

失礼いたしました。。コードの改善を行いました!宜しくお願いします。
hatena19

2021/02/08 06:10

画像をみると、画面縮小でそれぞれの画像も縮小していますが、別のところでCSSを設定したりしてませんか。 提示のコードだと絶対値で固定サイズ、固定位置表示になってますので、画面サイズを変更してもレイアウトに影響はないはずです。
tetemi

2021/02/08 08:44

なるほど。。もう少しため試してみます!有難うございました!
hatena19

2021/02/08 09:54

ちなみに、CSSをインラインで記述するのではなく、head内にStyleタグで記述するか、CSSファイルに記述するようにして、HTMLとスタイルを分けた方がいいと思います。 CSSはどこに書く?外部CSSファイルの読み込み方&インラインでの書き方 https://saruwakakun.com/html-css/reference/where-css
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問