画面の幅を狭めるとタイトル欄から文字が抜け出ちゃいます。

実現したいこと

画面の幅を狭くしても、動かないようにしてほしい。

前提

ポートフォリオを作成しているのですが、
パソコンの画面の横の幅を狭めると、
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件

ベストアンサー

いまひとつ、どうなって欲しいのか理解していないのですが、

css
1header{
2  height: 150px;
3  width: 100%;
4
5.flex{

header のルールセットを閉じる } がないため、次の .flex のルールセットは無効になってます。

追記: .flex の flex-wrap: wrap; と .box の横方向のマージンは消すべきかと思います。

投稿2023/02/27 22:31

編集2023/03/01 00:32

int32_t

総合スコア21929

shimonishi

2023/02/28 05:11

ご返答頂きありがとうございました。「header のルールセットを閉じる } がない」という内容を確認しましたが、コピペする際に入れ忘れておりました。申し訳ございませんでした。問題点に関しまして、詳細をお伝えするために下記にGYAZOのURLを貼っておきます。「縦の幅を狭めても、画面が狭くなるだけで、飛び出るような変化はありません」 https://gyazo.com/235c876ad3c300e9b29ab80c3064c4e8 「パソコンの画面の横の幅を狭めると、header の所から文字が飛び出てしまいます」 https://gyazo.com/9e12c0bb554bfe9320c938f330749db7 ご確認の上で、皆様のご意見を何卒よろしくお願いします。