レイアウト崩れを直す方法を教えて頂きたいと思います

現在、HTML/CSSでサイトを作っている段階です。
画面を左右に小さくすると、

のように見づらくなってしまいます。

コードは以下の通りになります。

<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>学習用ストップウォッチャー</title>
    <link rel="stylesheet" href="Desktop/学習用ストップウォッチャー/ホーム画面/css/styles.css">
  </head>

  <body>
    <header>
      <h1>学習用ストップフォッチャー</h1>
      <ul>
        <li id="home-nav"><a href="">HOME</li>
        <li><a href="/Desktop---/学習用ストップウォッチャー/プロフィール詳細１/index.html" target="_blank">プロフィール詳細</a></li>
        <li><a href="/Desktop/学習用ストップウォッチャー/カレンダー１/index.html" target="_blank">カレンダー</a></li>
        <li><a href="Desktop/学習用ストップウォッチャー/グラフ１/index.html" target="_blank">グラフ</a></li>
        <li><a href="Desktop/学習用ストップウォッチャー/投稿コーナー１/index.html" target="_blank">投稿コーナー</a></li>
      </ul>
    </header>
    <div class="mokuhyo">
      <p>あなたの目標を書いてみよう！<br>
      <textarea cols="100" rows="10"></textarea>
    </div>
    <div class="timer">
      <h3>タイマー</h3>
    </div>
    <h2>週間カレンダー</h2>
    <table border="1">
      <tr>
        <th class="date" id="today">9月16日(月)</th>
        <th class="date" id="day">9月17日(火)</th>
        <th class="date" id="day">9月18日(水)</th>
        <th class="date" id="day">9月19日(木)</th>
        <th class="date" id="day">9月20日(金)</th>
        <th class="date" id="day">9月21日(土)</th>
        <th class="date" id="day">9月22日(日)</th>
      </tr>
      <tr>
        <td><input type="time" id="appt" name="appt"
                  min="00:00" max="24:00" required></td>
        <td><input type="time" id="appt" name="appt"
                  min="00:00" max="24:00" required></td>
        <td><input type="time" id="appt" name="appt"
                       min="00:00" max="24:00" required></td>
        <td><input type="time" id="appt" name="appt"
                       min="00:00" max="24:00" required></td>
        <td><input type="time" id="appt" name="appt"
                            min="00:00" max="24:00" required></td>
        <td><input type="time" id="appt" name="appt"
                                 min="00:00" max="24:00" required></td>
        <td><input type="time" id="appt" name="appt"
                                      min="00:00" max="24:00" required></td>
      </tr>
      <tr>
        <td><textarea cols="30" rows="10" input type="text" maxlength="140"></textarea></td>
        <td><textarea cols="30" rows="10" input type="text" maxlength="140"></textarea></td>
        <td><textarea cols="30" rows="10" input type="text" maxlength="140"></textarea></td>
        <td><textarea cols="30" rows="10" input type="text" maxlength="140"></textarea></td>
        <td><textarea cols="30" rows="10" input type="text" maxlength="140"></textarea></td>
        <td><textarea cols="30" rows="10" input type="text" maxlength="140"></textarea></td>
        <td><textarea cols="30" rows="10" input type="text" maxlength="140"></textarea></td>
      </tr>
    </table>
    <button type="submit">登録</button>




  </body>
</html>

コード

ul
1  display: inline;
2  padding: 20px;
3  background-color: #EAFDC3;
4  margin-bottom: 16px;
5}
6
7
8h3 {
9  text-align: right;
10}
11
12.mokuhyo {
13  width: 616px;
14  flex-wrap: nowrap;
15}
16
17.timer {
18  width: 800px;
19  flex-direction: row;
20}
21
22.min {
23max-width: 500px;
24}
25
26body {
27  overflow: hidden
28}
29
30コード

となっております。

どのようにしたら、画面のレイアウトが崩れる事なくスクロールして表示させる事ができるのか、教えて頂けないでしょうか？

以上よろしくお願い致します。

kyoya0819

2019/09/22 02:50

CSSが途切れています。全てご提示ください。

退会済みユーザー

2019/09/22 03:54

ul li { display: inline-block; padding: 20px; background-color: #EAFDC3; margin-bottom: calc(56px + 1em); } h3 { text-align: right; } .mokuhyo { width: 616px; flex-wrap: nowrap; } .timer { width: 800px; flex-direction: row; } .min { max-width: 500px; } body { overflow: hidden } 大変申し訳ございません。こちらでいかがでしょうか？

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

回答2件

ベストアンサー

そもそも論でHTMLの間違いがひどい
aとpの閉じタグがない。複数同じidが使われている。存在しない属性等が使われている。

HTML
1<body>
2  <header>
3    <h1>学習用ストップフォッチャー</h1>
4    <ul>
5      <li id="home-nav"><a href="">HOME</a></li>
6      <li><a href="" target="_blank">プロフィール詳細</a></li>
7      <li><a href="" target="_blank">カレンダー</a></li>
8      <li><a href="" target="_blank">グラフ</a></li>
9      <li><a href="" target="_blank">投稿コーナー</a></li>
10    </ul>
11  </header>
12  <div class="mokuhyo">
13    <p>あなたの目標を書いてみよう！<br>
14      <textarea cols="100" rows="10"></textarea></p>
15  </div>
16  <div class="timer">
17    <h3>タイマー</h3>
18  </div>
19  <h2>週間カレンダー</h2>
20  <table border="1">
21    <tr>
22      <th class="date" id="today">9月16日(月)</th>
23      <th class="date">9月17日(火)</th>
24      <th class="date">9月18日(水)</th>
25      <th class="date">9月19日(木)</th>
26      <th class="date">9月20日(金)</th>
27      <th class="date">9月21日(土)</th>
28      <th class="date">9月22日(日)</th>
29    </tr>
30    <tr>
31      <td><input type="time" name="appt" min="00:00" max="24:00" required></td>
32      <td><input type="time" name="appt" min="00:00" max="24:00" required></td>
33      <td><input type="time" name="appt" min="00:00" max="24:00" required></td>
34      <td><input type="time" name="appt" min="00:00" max="24:00" required></td>
35      <td><input type="time" name="appt" min="00:00" max="24:00" required></td>
36      <td><input type="time" name="appt" min="00:00" max="24:00" required></td>
37      <td><input type="time" name="appt" min="00:00" max="24:00" required></td>
38    </tr>
39    <tr>
40      <td><textarea cols="30" rows="10" maxlength="140"></textarea></td>
41      <td><textarea cols="30" rows="10" maxlength="140"></textarea></td>
42      <td><textarea cols="30" rows="10" maxlength="140"></textarea></td>
43      <td><textarea cols="30" rows="10" maxlength="140"></textarea></td>
44      <td><textarea cols="30" rows="10" maxlength="140"></textarea></td>
45      <td><textarea cols="30" rows="10" maxlength="140"></textarea></td>
46      <td><textarea cols="30" rows="10" maxlength="140"></textarea></td>
47    </tr>
48  </table>
49  <button type="submit">登録</button>
50</body>

でここからが回答。

CSS
1  display: inline;
2  padding: 20px;
3  background-color: #EAFDC3;
4  margin-bottom: 16px;
5}

がliだとしてもaだとしても以下のようにすればいいはず。

CSS
1a /*or li*/ {
2  display: inline-block;
3  padding: 20px;
4  background-color: #EAFDC3;
5  margin-bottom: calc(56px + 1em);
6}

まぁもっとデザイン性を求めるならmax-widthを親にかけることをお考えください。

投稿2019/09/22 03:02

編集2019/09/22 03:07

kyoya0819

総合スコア10429

kyoya0819

2019/09/22 03:03

input属性って何？

退会済みユーザー

2019/09/22 04:09

数字を入力出来る様にしようと思い、調べていましたらinput属性について書かれたサイトがあった為、それを真似て書きました。

退会済みユーザー

2019/09/22 04:24

恐れ入りますが、上記のコードで試しましたところスクロールができな状況となってしまいました。教えて頂きましたコードは、以下のように書いてみました。 ul li { display: inline-block; padding: 20px; background-color: #EAFDC3; margin-bottom: calc(56px + 1em); } h3 { text-align: right; } .mokuhyo { width: 616px; flex-wrap: nowrap; } .timer { width: 800px; flex-direction: row; } .min { max-width: 500px; } body { overflow: hidden } どこをどのように修正を加えれば良いか、ご存知でしたら教えて頂けないでしょうか？

kyoya0819

2019/09/22 04:48

何がダメなのでしょうか？ body { overflow: hidden } ではみ出すのは全て非表示＝最初の画面以外動かせないにしていますが

退会済みユーザー

2019/09/22 05:34

おっしゃる通りです。私の学習不足でした。大変失礼いたしました。教えて頂きありがとうございます。

kyoya0819

2019/09/22 05:39

以前の質問もそうですが解決しましたらベストアンサーを選ぶか自己解決をしてください。 https://teratail.com/help/question-tips#questionTips4

退会済みユーザー

2019/09/22 06:17

申し訳ございません。今後、解決しましたらベストアンサーを選んだり、自己解決を行なっていきます。以上ご指摘ありがとうございます。