HTML,CSS　ウィンドウの縮小時に文字が崩れてしまう。

前提・実現したいこと

画像１のような配置のものを制作したいと考えています。

しかし、いざ作ってみると実行中のウィンドウを縮小したときに文字が崩れてしまうことに気が付きました。

そのため、二つの異なる記述で実行してみましたが、

一つ目(画像3)では、まったく改行されず、二つ目(画像2)では、改行はしましたが、他の文字にかぶってしまいました。

原因を考えましたが全く解決策が浮かびません

ウィンドウを縮小したときに、段落の文字がかぶることなく縮小するようにはどのようにしたらいいでしょうか。

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

実行中のウィンドウを縮小したときに文字が崩れてしまう。

該当のソースコード

HTML
1  <body>
2<div class="Box FirstBoxPhoto">
3  <div class="Fbox">
4    <h2>TestText</h2>
5     <h1>あかさたな、はまやらわ</h1>
6         <p> テスト、テスト、テスト、<br>
7           テキスト、テキスト、テキスト
8         </p>
9         <a class="FBoxTex4" href="N/A">
10           <p>READ MORE</p>
11         </a>
12  </div>
13</div>
14<div class="Box SecondBoxPhoto">
15  <h2 class="SecondBoxTex">TestText</h2>
16    <h1 class="SecondBoxTex2">あかさたな、はまやらわ</h1>
17      <div class="SecondBoxTex3">
18        <p> テスト、テスト、テスト、<br>
19　　　　　　テキスト、テキスト、テキスト</p>
20    </div>
21     <a class="SecondBoxTex4" href="N/A">
22      <p>READ MORE</p>
23   </a>
24</div>
25  </body>

CSS
1.Box {
2  width: 100%;
3  height: 100vh;
4  display: flex; 
5  align-items: center; 
6  justify-content: center; 
7  flex-direction: column; 
8  position: relative;
9
10}
11.FirstBoxPhoto {
12  background-image: url(DSCF244967543.jpg);
13  background-size: cover;
14  background-position: center;
15}
16.SecondBoxPhoto {
17  background-image: url(DSCF244967543.jpg);
18  background-size: cover;
19  background-position: center;
20}
21
22.Fbox {
23  width: 600px;
24  height: 300px;
25  margin-right: 100px;
26}
27
28.FBoxTex4 {
29    display: inline-block;
30    padding: 0em 1em;
31    margin: 0em 0;
32    background: #cde4ff;
33    color: #333;
34    font-size: 16px;
35    text-decoration: none;
36    font-weight: bold;
37 }
38
39  .FBoxTex4:hover {
40    background: #fff;
41    color: #333;
42  }
43
44.SecondBoxTex{
45  position: absolute;
46  top: 200px;
47  left: 250px;
48  font-size: 40px;
49  font-weight: bold;
50  font-style: italic;
51
52}
53
54.SecondBoxTex2{
55  position: absolute;
56  top: 250px;
57  left: 300px;
58  font-size: 50px;
59  font-weight: bold;
60  font-style: italic;
61
62}
63
64.SecondBoxTex3{
65  position: absolute;
66  top: 370px;
67  left: 300px;
68  font-size: 17px;
69  font-weight: bold;
70  color: black;
71
72}
73.SecondBoxTex4 {
74   display: inline-block;
75   padding: 0em 1em;
76   margin: 2em 0;
77   position: absolute;
78   top: 470px;
79   left: 300px;
80   background: #cde4ff;
81   color: #333;
82   font-size: 16px;
83   text-decoration: none;
84   font-weight: bold;
85}
86
87.SecondBoxTex4:hover {
88  background: #fff;
89  color: #333;
90}
91

試したこと

画像1で試したところ、崩れてしまったので、画像3のように記述しましたが、今度は改行しなくなりました。

補足情報（FW/ツールのバージョンなど）

実行はGooglechromeでしています。

記述に関し、https://mae.chab.in/archives/2749#post2749-4
こちらのサイトを参考にしました。

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

回答1件

ベストアンサー

こちらで、いかがでしょうか?

CSS
1.Fbox {
2  width: 600px;
3  /* 100%だけだと左右の余白がなくなるので、左右それぞれ15px分の余白ぶん、横幅を小さくする */
4  max-width: calc(100% - 15px - 15px);
5  height: 300px;
6  /* margin-right: 100px; */
7}

原因を考えましたが全く解決策が浮かびません

iPhone Xの横幅は375pxです。
375pxの画面に600pxの要素を表示しようとすると600px - 375px = 225pxは画面の中に収まりません。
というのが原因です。

投稿2020/03/27 14:50

編集2020/03/27 15:06

new1ro

総合スコア4528

Dim

2020/03/27 15:07

回答ありがとうございます。回答通りに記述してみたところ、うまくいきました。本当にありがとうございます。左右の余白の重要性がよく分かりました。

new1ro

2020/03/27 15:31

解決できたようでよかったです。「.wrapper」「.container」「.wrap」というクラス名に見覚えがなければ、以下の記事を読んでみてください。 https://coliss.com/articles/build-websites/operation/css/best-way-to-implement-wrapper.html CSSの基礎的なテクニックです。適当にWebサイトを4〜5ほど開いて、検証ツールで見てみるとわかると思うのですが、左右の余白やコンテンツエリアの横幅を指定するクラスとして見つけられると思います。 (トップページはイレギュラーなレイアウトをしている場合もあるので、中ページのほうが見つかると思います。) ちなみにteratailは「#l-bodyContents」という要素に指定されていました。

Dim

2020/03/27 15:39

ありがとうございます。熟読したいと思います。

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