position:absolute;でのレスポンシブ対応について

Question

実現したいこと

オープニングアニメーションの作成
・ロゴとテキストの画像を2枚配置
・レスポンシブ対応で画像が重ならないようにしたい。
・アニメーションの挙動について
→はじめはロゴのみ中心からふわっと出る　その後画像の位置（左）へ移動
テキストはロゴが左に移動する時に左から右に向かってふわっと出現するようにする

前提

学習中のwebサイト制作でオープニングアニメーションを作成しています。
初めての質問のため、不備があったらすみません。

発生している問題・エラーメッセージ

画像の幅をwidthの設定だけだと画像が被ることはないが、
sp時に画像のサイズが小さくなり過ぎてしまうため、min-widthを設定。
min-widthを設定したことにより画像が重なってしまう。
absoluteの位置指定を％で行ったが、1100pxほどで画像同士が重なってしまう。
なるべく記述をすっきりさせたいのですが、メディアクエリで調節するしかないのでしょうか？
現状の重なっている画像を添付します

該当のソースコード

<div class="logo">
  <img class="logo1" src="images/logo.png" alt="">
  <img class="text" src="images/text.png" alt="">
</div>

.logo {
  width: 100%;
  height: 100%;
  position: relative;
}
/*ロゴ1がふわっと浮き出る*/
.logo1 {
  width: 3%;
  min-width: 30px;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  animation: fadeUp 1.5s forwards,moveLeft 1.5s forwards 2s;
  opacity: 0;
  object-fit: contain;
}

@keyframes fadeUp {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes moveLeft {
  0% {
  }
  100% {
    left: 40%;
  }
}

.text {
  width: 15%;
  min-width: 200px;
  height: auto;
  position: absolute;
  top: 51%;
  left: 45%;
  transform: translate(-50%,-50%);
  opacity: 0; /* 最初は非表示に設定 */
  animation: fadeInAndMove 2s forwards 2s; /* アニメーションの適用 */
  object-fit: contain;
}
@keyframes fadeInAndMove {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    left: 50%;
  }
}
}

調査したこと

画像の配置、サイズ調整について調査
absolute時の配置の単位を色々変えてみましたが、重なってしまうのは調整できませんでした。

Comments

[yambejp]

position:absoluteはマストなのでしょうか？

[Lhankor_Mhy]

https://qiita.com/lhankor_mhy/items/bdcede71b1aad3b7ee94#absolute-%E3%81%AF%E4%BD%BF%E3%81%86%E3%81%AA

[mee1020]

cssの内容を修正しました。
animationプロパティで位置調整が必要なため、今回はabsoluteを使用しました。

[Lhankor_Mhy]

個人的には translate で アニメーションさせればいいように思いますが、こだわりがあるということで了解いたしました。

[Lhankor_Mhy]

元のコードには、

html,
body {
height: 100%;
}

のようなものが含まれていませんか？

[mee1020]

absoluteしなくてもtranslateのみでアニメーション可能なんですね！一度調べてみます。
body {
width: 100vw;
height: 100vh;
}
と設定しております。

Answer 1

中のロゴをラップしてしまえば良いだけのような気がしますが・・・

<style>
.logo {
  width: 100%;
  height: 100%;
display:flex;
}
.wrap {
display:flex;
position: absolute;
top:50%;
left:50%;
translate:-50% -50%;
border:1px solid;
align-items: center;
}

.logo1,.text {
border:1px solid;
}
.logo1{
height:30px;
}
.text {
height:40px;
}</style>
<div class="logo">
<div class="wrap">
<img class="logo1" src="images/logo.png" alt="logo1">
<img class="text" src="images/text.png" alt="text">
</div>
</div>

とりあえずアニメーションもいれておきます
具体的にどういう挙動を希望しているかわからないので適当ですが
absoluteが不要なのはご理解いただけると思います

<style>
.logo {
  width: 100%;
  height: 100%;
display:flex;
}
.wrap {
display:flex;
position: absolute;
top:50%;
left:50%;
translate:-50% -50%;
border:1px solid;
align-items: center;
}

.logo1,.text {
border:1px solid;
}
.logo1{
opacity:0;
height:30px;
animation: fadeUp 1.5s forwards,moveLeft 1.5s forwards 2s;
transform:translateX(40px);
}
@keyframes fadeUp {
  from { opacity: 0;}
  to   { opacity: 1;}
}

@keyframes moveLeft {
  100% {transform:translateX(0px); }
}
.text {
opacity: 0;
height:40px;
animation: fadeInAndMove 2s forwards 2s;
transform:translateX(50px); 
}
@keyframes fadeInAndMove {
  100% { opacity: 1;transform:translateX(0px);  }
}
</style>
<div class="logo">
<div class="wrap">
<img class="logo1" src="images/logo.png" alt="logo1">
<img class="text" src="images/text.png" alt="text">
</div>
</div>

Comments

[mee1020]

回答ありがとうございます。
ラップしてみましたが、アニメーションがうまくいかなくなってしまうため、
もう少し調べてみます！

[yambejp]

具体的な動作の説明がないのでなんとも言えないですね
なんか適当に図示してもらえませんか？

[mee1020]

2個目にいただいたCSSでアニメーションと配置の調整で、希望通りの挙動になりました！
丁寧にありがとうございました。

Answer 2

まず、前提として、
30px / 3% = 1000px
200px / 15% = 1333.33px
なので、ビューポートを小さくしていった時には text の方からズレが始まります。

さて、min-width が影響しない状態ですと、
logo の右端：40% + 3% / 2 = 41.5%
text の左端：50% - 15% / 2 = 42.5%
ですので、常に1%の隙間があることになります。ですので重なることはありません。

次に、text に min-width が影響した状態は
logo の右端：40% + 3% / 2 = 41.5%
text の左端：50% - 200px / 2
です。
重なる場合というのは、logo の右端 > text の左端 ですから、重ならない条件は text の left を x とすると
x - 200px / 2 >= 41.5%
x >= 41.5% + 100px
です。

その次に、両者に min-width が影響した状態は
logo の右端：40% + 30px / 2
text の左端：(41.5% + 100px) - 200px / 2
です。
同様に重ならない条件は logo の left を y とすると
(41.5% + 100px) - 200px / 2 >= y + 30px / 2
y <= 41.5% - 15px
です。

以上の条件で拘束すれば重なることはないはずです。ご参考にしていただければ幸いです。

min() - CSS: カスケーディングスタイルシート | MDN
max() - CSS: カスケーディングスタイルシート | MDN

Comments

[Lhankor_Mhy]

個人的には、少しレイアウトを変更するだけでこんな面倒な計算をやり直さなきゃいけないのはご勘弁願いたいので、このようなケースで絶対配置を採用することはないと思います。

[mee1020]

回答と、大変な計算までしていただいてありがとうございます。
私には内容が難しく、すぐ理解できそうにないので、widthのmin,max関数を
よくよく調べてみます。

[Lhankor_Mhy]

width は関係ないと思います。ご不明の点があればコメントでお知らせください。

[mee1020]

％とpxの考え方について難しくて、、、もう少し単位の勉強詳しくしてみます。
丁寧に対応していただいてありがとうございました！

[Lhankor_Mhy]

絶対配置はややこしいですから仕方がないです。使わなくていいなら使わないのが一番です。