pタグを入れて画面幅を狭めると、画像上の上の文字のポジションが移動してしまいます。

h２のカットだけの場合は、画像に対して期待どうりのボジションを保ったまま
画面縮小ができます。
しかし、pタグを入れると、画像をはみ出てしまいます。
かなり、色々試してみましたがどうにも私ではわかりませんでした。
お力沿いお願いいたします。

html
1        <div id="menu">
2            <img class="menuImg" src="../img/menu.PNG" alt="menu-paper">
3                <h1 class="menu-title animated">Menu</h1>
4                    <div id="cut" class="animated">
5                        <h2>CUT</h2>
6                            <!-- <p><span class="jp">シャンプー&ブローなし</span> <span>¥2200</span> </p>
7                            <p><span class="jp">シャンプー&ブローあり</span> <span> ¥4200</span></p> -->
8
9                    </div>

css
1@charset "utf-8";
2*,
3*::before,
4*::after {
5  box-sizing: border-box;
6}
7/* 全体設定 */
8a{
9    color: #333;
10    text-decoration: none;
11}
12
13p{
14    line-height: 2;
15
16}
17
18div{
19    height: auto;
20}
21body{
22    color: #333;
23    text-align: center;
24    padding:0 3%;
25    background-color: #3d1705;
26}
27#menu{
28    color:#311204;
29    text-align: left;
30    font-size: 2vw;
31    width: 100vw;
32    max-width: 100%;
33    position: relative;
34    font-family: 'Caveat', cursive;
35}
36
37
38#menu img{
39    width: 100vw;
40    max-width: 100%;
41    padding: 9%;
42}
43
44.menu-title{
45    position: absolute;
46    font-size: 16vw;
47    left: 50%;
48    top: 17%;
49    transform: translate(-50%,-50%);
50    font-family: 'Caveat', cursive;
51
52}
53
54#cut{
55    position: absolute;
56    font-size: 2vw;
57    left: 22%;
58    top: 26%;
59    transform: translate(-50%,-50%);
60}
61
62
63
64#menu h2{
65    font-size: 6vw;;
66    margin-bottom: 3vw;
67}
68
69.warning{
70    font-size: 1vw;
71}
72
73.jp{
74    font-family: 'Noto Serif JP', serif;
75}

行動規範の内容に同意します

回答1件

ベストアンサー

こんにちは。

__h２のカットだけの場合は、画像に対して期待どうりのボジションを保ったまま

画面縮小ができます。
しかし、pタグを入れると、画像をはみ出てしまいます。__

原因は、単位にパーセンテージを使っていることです。

css
1#cut{
2/* 略 */
3    transform: translate(-50%,-50%);

このパーセントは何を基準にしているかというと、その要素自身です。

1つ目にパーセント値が使用された場合は、 transform-box で定義された参照ボックスの幅からの相対値

[translate() - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/transform-function/translate(%29)

ですので、内部にpタグを入れて幅が大きくなると移動する量が増えて、レイアウトがずれます。

解決方法ですが、単位をvwに統一するのがいいかと思います。

投稿2021/02/15 03:19

Lhankor_Mhy

総合スコア36960

hemuu

2021/02/15 03:31

ありがとうございます。アドバイスの通り、はみ出さずに実装できました。少し、本題の質問とは別になりますが単位の統一は、どこまでの統一が必要なのでしょうか。例えば、文字の大きさやpaddingにはvwで統一し positionに対するtop:left:の値は％でしてするやり方は、良くないのでしょうか。ファイルないの単位は原則全て統一させる必要があるのでしょうか。よろしければ、ご教示お願いいたします。

Lhankor_Mhy

2021/02/15 04:09

>単位の統一は、どこまでの統一が必要なのでしょうか。試行錯誤が面倒であれば、全部統一されることです。 >positionに対するtop:left:の値は％でしてするやり方は、良くないのでしょうか。まず、%の意味を良くご理解されることです。 %は相対的な単位ですので、何かを基準にしています。その基準が要素によって変わってくるのであればズレが生じる可能性があります。基準が同じであるならば、%を使っても問題ありません。 topの%が何を参照しているのか、hemuuさんがご理解されていて、その上で%を採用しているのであれば統一をする必要はなく、そうでないならばvwを使うのが無難でしょう。

hemuu

2021/02/15 05:11

ご回答ありがとうございます。知識不足で、申し訳ございませんが、下記の解釈で問題ないということでしょうか。上記のコードだと＃menuを基準としている。文字サイズと＃menuと#menu imgの幅をvwで統一（max-widthは削除しました。）文字サイズと基準となる＃menuが両方ともvwにすることによって、画面幅に対して文字と＃memuと＃menu imgが同じバランスを保って大きさが変わるため％をtop,leftに指定しても、バランスが崩れない。ということでしょうか。

Lhankor_Mhy

2021/02/15 05:22

私が誤読しているのかもしれませんが、間違った理解だと感じました。

hemuu

2021/02/15 12:23

おそらく、私が誤認識していると思います。

Lhankor_Mhy

2021/02/15 13:15

私は、この回答を書くために translate() の％が何を基準にしているのかを調べました。そして、変形をかけている要素が基準だということを確認しています。同様に、あなたがtopに%を使うのであれば、topの%が何を基準にしているかを調べるべきでしょう。わからないものを使っても、思うような結果は得られません。 --- 正解を書いておくと、position:absolute の要素についている top の % は、その要素の包含ブロックが基準です。そして、position:absolute の要素の包含ブロックは、positionが初期値以外である直近の祖先要素です。 https://developer.mozilla.org/ja/docs/Web/CSS/top https://developer.mozilla.org/ja/docs/Web/CSS/Containing_block なぜ%を使ってもレイアウトがずれないのか、ご理解いただけましたか？

hemuu

2021/02/15 22:06

ご指摘ありがとうございます。私がこちらを参考に解釈致しましたのは、 h1やタイトルなどの文字の%の基準になる包含ブロック要素は#menuで、#menuにはバディングが設定させれおらず、伸縮してもパディングの大きさが変化しないからレイアウトがズレない。こちらの解釈はいかがでしょうか。

Lhankor_Mhy

2021/02/16 01:17

position: absolute にパディングは関係ないですが、包含ブロックについてはご認識の通りです。

hemuu

2021/03/02 09:13

ご回答ありがとうございます。ベストアンサーの指定遅くなり申し訳ございませんでした。

Lhankor_Mhy

2021/03/02 09:14

ご解決されて何よりです。