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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

2回答

1735閲覧

レスポンシブに画像の上に要素を配置し、ズレを無くしたい(Next.js, next/image)

uglo1

総合スコア0

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2022/01/31 06:20

問題点

画像の上にピンを立てて、縮小や拡大をしても位置を変わらないように実現をしたいと思っています。しかし現在の状況は、縮小をすると若干ずれていく問題が生じています。下のURLからも動作が確認できると思います。

URL

https://next-image-tau.vercel.app/

リポジトリ

https://github.com/uglo1/next-image

簡単な説明

  • 画像のコンポーネントがMapImage.tsxでnext/imageのlayoutで"responsive"にしています。縦と横を設定するのですが、親の要素に合わせて縦横比を保ったままスケールする感じだと思います。(https://www.forcia.com/blog/001561.html)
  • index.tsxの<div className={styles.side}>の中で、MapImageとピンを配置しています。
  • 親要素のスタイルでposition: relative; 子要素でposition: absoluteでleftとbottomを%で設定をしています。
  • %で設定することで崩れないと思っているのですが、横にずれるので、そこが疑問です。%を小数点まで設定をしてもずれてしまいます。

何かアドバイスをいただけると幸いです。

コード

  • MapImage.tsx

import

1 2export const MapImage = (props: any) => { 3 return ( 4 <> 5 <Image 6 src="/map.png" 7 alt="map" 8 layout={"responsive"} 9 width={600} 10 height={300} 11 /> 12 </> 13 ); 14};
  • pages/index.tsx

import

1import styles from "../styles/Home.module.css"; 2import { MapImage } from "src/components/MapImage"; 3import PinDropIcon from "@material-ui/icons/PinDrop"; 4 5const Dashboard: NextPage = () => { 6 return ( 7 <> 8 <h1>Hello World</h1> 9 <div className={styles.wrapper}> 10 <div className={styles.side}> 11 <MapImage /> 12 <div className={styles.pin1}> 13 <PinDropIcon htmlColor="red" /> 14 </div> 15 <div className={styles.pin2}> 16 <PinDropIcon htmlColor="blue" fontSize="large" /> 17 </div> 18 <div className={styles.pin3}> 19 <PinDropIcon htmlColor="yellow" /> 20 </div> 21 <div className={styles.pin4}> 22 <PinDropIcon htmlColor="green" /> 23 </div> 24 <div className={styles.pin5}> 25 <PinDropIcon htmlColor="orange" /> 26 </div> 27 </div> 28 </div> 29 </> 30 ); 31}; 32 33export default Dashboard;
  • Home.module.css
.container { padding: 0 2rem; } .wrapper { display: flex; } .side { width: 1200px; position: relative; } .pin1 { position: absolute; left: 47.3%; bottom: 60%; } .pin2 { position: absolute; left: 40.7%; bottom: 50%; } .pin3 { position: absolute; left: 53.5%; bottom: 25%; } .pin5 { position: absolute; left: 56%; bottom: 51%; } .pin4 { position: absolute; left: 45%; bottom: 32.5%; } .main { flex: 1; }

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

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

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

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

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

Lhankor_Mhy

2022/01/31 07:03

「縮小や拡大」とは、具体的にはどのような操作ですか?
uglo1

2022/01/31 07:44

https://next-image-tau.vercel.app/ 「縮小や拡大」というより画面サイズが変更になっても、ピンの地点が変わらないようにしたいという意味です。分かりにくくて申し訳ないです。
Lhankor_Mhy

2022/01/31 07:49

問題の再現手順を教えてください。
Lhankor_Mhy

2022/01/31 07:50

ああ、コードを変更したのですね……
Lhankor_Mhy

2022/01/31 07:52

あ、違うか。勘違いです。すみません。 とりえあず、問題の再現手順を教えてください。
uglo1

2022/01/31 08:07

画面を小さくしていくとピンの位置がずれていくのが確認できると思います。
Lhankor_Mhy

2022/01/31 08:24

「画面を小さくしていく」というのは、具体的にはどのような操作ですか? モバイル端末で見るとかでしょうか?
uglo1

2022/01/31 08:33

ブラウザで見るときに画面のサイズを小さくするという意味です。
Lhankor_Mhy

2022/01/31 08:48

ありがとうございます、ブラウザのウィンドウサイズを小さくするということですね。 問題を把握しました。
guest

回答2

0

アイコンを子要素にしてCSSに

css

1position: absolute

を追加してみてはどうでしょうか

投稿2022/05/14 15:57

編集2022/05/14 16:02
Teppy

総合スコア17

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

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

0

理由は大きく二つあります。

ひとつは、アイコンのサイズが変わらないため、画像が小さくなった時にずれが生じるものです。
解決方法は、アイコンのサイズをビューポート依存にすることです。


こちらは誤っていたので削除します。

もうひとつは、レスポンシブ画像のアスペクト比が微妙に違うことが原因かもしれません。

https://next-image-tau.vercel.app/_next/image?url=%2Fmap.png&w=3840&q=75
↑こちらは、1463/697=2.099ですが、
https://next-image-tau.vercel.app/_next/image?url=%2Fmap.png&q=75&w=640
↑こちらは、640/306=2.092です。
そのため、同じbottom: 60%でも地図上の位置が異なっているのかもしれません。

解決方法としては、レスポンシブ画像のアスペクト比を合わせるといいかもしれません。


もうひとつは、svg がinline-blockになっていることです。
解決方法は、blockにすることですが、フォントサイズがビューポート依存になればもしかすると気にならなくなるかもしれません。

投稿2022/01/31 08:55

編集2022/02/01 00:23
Lhankor_Mhy

総合スコア35871

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問