モバイル端末で画面の途中で収まってしまうのでページいっぱいに広げたい

###前提
モバイル端末だと画面の半分に収まったり、途中で収まって白い余白ができる。

実現したいこと

画面いっぱいに表示させたい。

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

検証でモバイル端末だと画面の途中で収まってしまう。

該当のソースコード

html

<main class="main">
    <div class="title">
        <h1>無料体験</h1>
    </div>
    <div class="sab-title">
        <h2>対象学年と科目</h2>
    </div>
    <div class="chart">
        <div class="wrap">
            <table>
                <thead>
                    <tr>
                        <th></th>
                        <th class="plan1">
                            <div class="subject">算数・数学</div>
                        </th>
                        <th class="plan2">
                            <div class="subject">英語</div>
                        </th>
                        <th class="plan3">
                            <div class="subject">国語</div>
                        </th>
                        <th class="plan4">
                            <div class="subject">理科</div>
                        </th>
                        <th class="plan5">
                            <div class="subject">社会</div>
                        </th>
                    </tr>
                </thead>
                <tr>
                    <th>小５・６</th>
                    <td class="plan1_i">●</td>
                    <td class="plan2_i">▲</td>
                    <td class="plan3_i">●</td>
                </tr>
                <tr>
                    <th>中１〜３</th>
                    <td class="plan1_i">●</td>
                    <td class="plan2_i">●</td>
                    <td class="plan3_i">●</td>
                    <td class="plan4_i">●</td>
                    <td class="plan5_i">●</td>
                </tr>
                <tr>
                    <th>高１〜３</th>
                    <td class="plan1_i">●</td>
                    <td class="plan2_i">●</td>
                    <td class="plan3_i">▲</td>
                    <td class="plan4_i">▲</td>
                    <td class="plan5_i">▲</td>
                </tr>
            </table>
        </div>
    </div>
    <div class="explanation">
        <p>●：常時対応　▲：科目等、ご要望に応じて対応</p>
    </div>
    <div class="time">
        <h3>時間</h3>
        <h4>・善通寺教室</h4>
        <p>火曜日〜土曜日　14:00~22:00（日・月は休校）</p>
        <h4>・丸亀教室</h4>
        <p>月・木・土曜日　17:00~21:30</p>
    </div>
    <div class="time-h2">
        <h2>まずは、お電話にてお気軽にお問い合わせください。</h2>
    </div>
</main>
<!-- main -->

<!-- footer -->
<footer class="footer">
    <nav class="site-menu">
        <ul>
            <li><a href="./index.html">ホーム</a></li>
            <li><a href="./about-us,html">ステップについて</a></li>
            <li><a href="./experience.html">無料体験</a></li>
            <li><a href="access.html">アクセス</a></li>
            <li><a href="./menu.html">お問合せ</a></li>
        </ul>
    </nav>
    <a class="footer-logo" href="./index.html">
        <img src="./images/本文を追加.png" alt="KISSA">
    </a>
    <p class="footer-tel">TEL 01-2345-6789</p>
    <p class="footer-time"></p>
</footer>
<!-- footer -->

CSS
@charset "utf-8";

.title {
  height: 310px;
  background-image: url(../images/books-1204029_1280.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  text-shadow: 1px 1px 10px #4b2c14;
}

.title h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: 32px;
  font-weight: bold;
}

.sab-title {
  margin: 0 auto;
  padding: 0;
  width: 850px;
  font-size: 14px;
  margin-top: 80px;
  margin-bottom: 10px;
}

.explanation {
  font-size: 15px;
  margin: 0 auto;
  margin-top: 15px;
  padding: 0;
  width: 850px;
}

table {
  border-collapse: collapse;
  margin: 0 auto;
  padding: 0;
  width: 850px;
  table-layout: fixed;
}

thead th {
  padding: 1em .8em;
  border-right: 5px solid#fff;
}

table tr {
  background-color: #fff;
  padding: .75em;
}

table tr:nth-child(even) {
  background-color: #f9f9f9;
}

table td {
  padding: .7em;
  text-align: center;
}

table th {
  font-size: .75em;
}

.plan1 {
  background: #03A9F4;
}

.plan1_i {
  color: #03A9F4;
}

.plan4 {
  background: #009688;
}

.plan4_i {
  color: #009688;
}

.plan3 {
  background: #4caf50;
}

.plan3_i {
  color: #4caf50;
}

.plan2 {
  background: #cddc39;
}

.plan2_i {
  color: #cddc39;
}

.plan5 {
  background: #6222b6;
}

.plan5_i {
  color: #6222b6;
}

.subject {
  color: #fff;
  font-weight: bold;
  font-size: 1.8em;
  text-align: center;
  margin-bottom: 10px
}

.subject span {
  font-size: .6em;
}

.time {
  margin: 0 auto;
  margin-top: 20px;
  padding: 0;
  width: 850px;
  color: rgb(72, 71, 71);
  line-height: 25px;
}

.time h3 {
  margin-top: 30px;
  font-size: 20px;
  padding-bottom: 10px;
}

.time h4 {
  font-size: 16px;
}

.time p {
  padding-left: 15px;
}

.time-h2 {
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  text-shadow: 1px 1px 10px #5f5d5d;
}

.footer {
  margin-top: 50px;
}

@media (max-width: 800px) {
  .chart {
    overflow-x: scroll;
  }
}
### 試したこと


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

ここにより詳細な情報を記載してください。

hatena19

2022/09/30 07:35

> 検証でモバイル端末だと画面の途中で収まってしまう。モバイル端末とは具体的になんでしょうか。スマホ、タブレット・・・？具体的に画面幅がどの範囲を想定してますか。「画面の途中で収まってしまう」とはどのような状態ですか。そちらの画面が見えない他人にも伝わるように具体的に説明してください。言葉での説明が難しいのなら、スクリーンキャプチャー画像を追加してください。

Galulu

2022/09/30 12:43

ご教示頂きありがとうございます。スクリーンショットの追加させていただきました。宜しくお願いします。

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

回答1件

提示のコードでサンプルを作成してみましたが、症状は再現できませんでした。

提示のコードで気になる部分を修正したサンプルを提示しておきます。

width: 850px; と幅を固定設定にしているところがありますが、画面幅が850px以下になるとはみ出て水平スクロールバーが出てしまうので、max-width: 850px;に修正。これで、画面幅が850px以下の場合は画面幅に合わせて縮小します。

テーブル部分は幅800pxに固定して、画面幅がそれより小さい場合は水平スクロールバーが出てスクロールできるようにしました。

css
1@charset "utf-8";
2
3.title {
4  height: 310px;
5  background-image: url(https://picsum.photos/1200/900);
6  background-repeat: no-repeat;
7  background-position: center center;
8  background-size: cover;
9  display: flex;
10  flex-direction: column;
11  justify-content: center;
12  align-items: center;
13  color: #ffffff;
14  text-shadow: 1px 1px 10px #4b2c14;
15}
16
17.title h1 {
18  font-family: 'Montserrat', sans-serif;
19  font-size: 32px;
20  font-weight: bold;
21}
22
23.sab-title {
24  margin: 0 auto;
25  padding: 0;
26  max-width: 850px; /* 修正 width → max-width */
27  font-size: 14px;
28  margin-top: 80px;
29  margin-bottom: 10px;
30}
31
32.explanation {
33  font-size: 15px;
34  margin: 0 auto;
35  margin-top: 15px;
36  padding: 0;
37  max-width: 850px;  /* 修正 width → max-width */
38}
39
40table {
41  border-collapse: collapse;
42  margin: 0 auto;
43  padding: 0; 
44  width: 100%;  /* 追加 */
45  max-width: 850px;  /* 修正 width → max-width */
46  table-layout: fixed;
47}
48
49thead th {
50  padding: 1em .8em;
51  border-right: 5px solid#fff;
52}
53
54table tr {
55  background-color: #fff;
56  padding: .75em;
57}
58
59table tr:nth-child(even) {
60  background-color: #f9f9f9;
61}
62
63table td {
64  padding: .7em;
65  text-align: center;
66}
67
68table th {
69  font-size: .75em;
70}
71
72.plan1 {
73  background: #03A9F4;
74}
75
76.plan1_i {
77  color: #03A9F4;
78}
79
80.plan4 {
81  background: #009688;
82}
83
84.plan4_i {
85  color: #009688;
86}
87
88.plan3 {
89  background: #4caf50;
90}
91
92.plan3_i {
93  color: #4caf50;
94}
95
96.plan2 {
97  background: #cddc39;
98}
99
100.plan2_i {
101  color: #cddc39;
102}
103
104.plan5 {
105  background: #6222b6;
106}
107
108.plan5_i {
109  color: #6222b6;
110}
111
112.subject {
113  color: #fff;
114  font-weight: bold;
115  font-size: 1.8em;
116  text-align: center;
117  margin-bottom: 10px
118}
119
120.subject span {
121  font-size: .6em;
122}
123
124.time {
125  margin: 0 auto;
126  margin-top: 20px;
127  padding: 0;
128  max-width: 850px;
129  color: rgb(72, 71, 71);
130  line-height: 25px;
131}
132
133.time h3 {
134  margin-top: 30px;
135  font-size: 20px;
136  padding-bottom: 10px;
137}
138
139.time h4 {
140  font-size: 16px;
141}
142
143.time p {
144  padding-left: 15px;
145}
146
147.time-h2 {
148  height: 100px;
149  display: flex;
150  flex-direction: column;
151  justify-content: center;
152  align-items: center;
153  color: #ffffff;
154  text-shadow: 1px 1px 10px #5f5d5d;
155}
156
157.footer {
158  margin-top: 50px;
159}
160
161@media (max-width: 800px) {
162  .chart {
163    overflow-x: scroll;
164    width: 100%; /* 追加 */
165  }
166  .chart > .wrap { /* 追加 */
167    width: 800px;  /* 追加 */
168  }
169}

CodePenサンプル

投稿2022/09/30 13:10

hatena19

総合スコア33775

Galulu

2022/09/30 13:50

修正いただきありがとうございます！

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.47%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！