Q&A
書かれている状況が再現するコード（HTML/CSS）を提示されたほうが回答を得やすいと思います。
レスポンシブデザインにおける画像と文字の重ね合わせがわからないところがあるため、ここで質問させていただきます。
質問
ズームした際、画像①のようにテキストがずれてしまいます。
インターネットで調べた結果、相対位置と絶対位置を用いた「position:relative;。position:absolute;」を用いて、画像②のように一時的にすることはできますが、ズームの際、やはりどうしてもずれてしまいます。
レスポンシブデザインを作る際、画像と文字の重ね合わせは、どのようにすればいいのでしょうか？
大変恐縮ですが、お分かりになる方、ご回答いただけると幸いです。
よろしくお願いします。
念のため、ここに私のwebsiteのURLを添付させていただきます。
websiteのURL
<header> <ul> <li><a href="#"><img src="box img/header/header-left.gif" class="header-left" alt=""></a></li> <li><a href="#"><img src="box img/header/header-right.gif" class="header-right" alt="" align="right"></a></li> <li><a href="#"><img src="box img/header/logo.gif" class="logo" alt=""></a></li> <li><a href="#"><img src="box img/header/header-1.gif" class="header-1" alt=""></a></li> <li><a href="#"><img src="box img/header/header-2.gif" class="header-2" alt=""></a></li> <li><a href="#"><img src="box img/header/header-3.gif" class="header-3" alt=""></a></li> <li><a href="#"><img src="box img/header/header-4.gif" class="header-4" alt=""></a></li> <li><a href="#"><img src="box img/header/header-5.gif" class="header-5" alt=""></a></li> <ul/> <div style= "position:relative;"> <div style="position:absolute; left:170px; bottom:25px;"> ここに文章を入れます。 </div></div> </header> コード
画像①
画像②
ご親切にコメントありがとうございます。さきほど、追加させていただきました。
「ズームの際」というのはどういう機能を使用したものでしょうか。単純にウィンドウサイズを変化させたときという事でしょうか。
コメントありがとうございます。はいそうです。
ブラウザには「ズーム」という機能を持つものも有るので、修正されたほうが良いと思います。
大変申し訳ございません。コメントの返答を間違えました。今回、私がお聞きしたいのは、虫眼鏡の機能を使ったときに、ずれてしまうということです。
「虫眼鏡の機能」とはどのブラウザの何と言う機能でしょうか。IE/Firefox/Chromeに「虫眼鏡」アイコンが使われているのは検索だと思うのですが･･･。
混乱させてもうしわけございません。ctrl+マウスロールで拡大表示するものです。よろしくお願いします。
回答1件
0
ベストアンサー
質問文に <ul/> という記載がありますが、</ul> です。HTMLの構文を間違うと予期せぬ挙動になることが有るので、丁寧にチェックされたほうが良いです。
「重ねる」というだけであれば下記のような方法もあります。
HTML
1<div style="text-align: center; margin-top: -2.5em;"> 2 ここに文章を入れます。 3</div>
input要素のような画像ですが、「フォーム」として使うなら下記のようにするのが良いとは思います。
HTML
1<input id="text1" name="text1" type="text" placeholder="ここに文章を入れます。">
投稿2017/03/21 15:29
総合スコア69407
あなたの回答
tips
プレビュー
