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

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

新規登録して質問してみよう
ただいま回答率
86.12%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

受付中

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

Galulu
Galulu

総合スコア0

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

1回答

0リアクション

0クリップ

152閲覧

投稿2022/09/30 06:37

編集2022/09/30 12:40

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

実現したいこと

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

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

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

該当のソースコード

html

<!-- main -->
<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>小5・6</th> <td class="plan1_i">●</td> <td class="plan2_i">▲</td> <td class="plan3_i">●</td> </tr> <tr> <th>中1〜3</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>高1〜3</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/ツールのバージョンなど) ここにより詳細な情報を記載してください。

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

hatena19

2022/09/30 07:35

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

2022/09/30 12:43

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

まだ回答がついていません

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

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

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

同じタグがついた質問を見る

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。