Q&A
実現したいこと
画面の幅を狭くしても、動かないようにしてほしい。
前提
ポートフォリオを作成しているのですが、
パソコンの画面の横の幅を狭めると、
header の所から文字が飛び出てしまいます。
アニメーションを加えるためにdisplay flexを入れたので
headerからはみ出して縦に並んでしまうのです。
縦の幅を狭めても、画面が狭くなるだけで、飛び出るような変化はありませんので、
同じようにできないでしょうか。
皆様のご意見をお待ちしております。
ちなみに Javascript は使用しておりません。
該当のソースコード
HTML <header class="flex"> <div class="delay-time01 box fadeIn"> <span id="tex"> <b>結</b> </span> </div> <div class="delay-time03 box fadeIn"> <span id="tex"> <b>成</b> </span> </div> <div class="delay-time04 box fadeIn"> <span id="tex"> <b>経</b> </span> </div> <div class="delay-time06 box fadeIn"> <span id="tex"> <b>緯</b> </span> </div> </header> CSS header{ height: 150px; width: 100%; .flex{ display:flex; justify-content: space-around; flex-wrap: wrap; } .box{ opacity: 0; position: relative; width: 100px; height: 100px; margin: 20px; background-color: transparent; box-sizing:border-box; } #tex{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); margin: 0; padding: 0; color: gold; font-size: 100px; } .fadeIn { animation-name:fadeInAnime; animation-duration:1s; animation-fill-mode:forwards; opacity: 0; } @keyframes fadeInAnime{ from { opacity: 0; } to { opacity: 1; } } .delay-time01{ animation-delay: 2.6s; } .delay-time02{ animation-delay: 2.8s; } .delay-time03{ animation-delay: 3s; } .delay-time04{ animation-delay: 3.5s; } .delay-time05{ animation-delay: 3.7s; } .delay-time06{ animation-delay: 3.9s; } .delay-time07{ animation-delay: 4.5s; } .delay-time08{ animation-delay: 5.5s; }
試したこと
display を inline・inline-block にしてみたら文字がそのまま縦になった。
スクロールバーを記載しても効果がありませんでした。
回答1件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
2023/02/28 05:11
2023/03/01 00:32
2023/03/01 12:49