WEBデザインをレスポンシブにする過程で困っていることがあります。

パソコンでは綺麗に表示されている自作のWEBサイトをスマホ対応させようとしているのですがうまくいきません。
https://note.com/tokyofreelance/n/n4baf7dd10306
こちらのサイトの模写を行なっています。

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>デイトラ　練習用ページ</title>
7    <link rel="stylesheet" href="style.css"> 
8  </head>
9    
10  <body>
11    
12    <header>
13        <h1>30DAYSトライアル</h1>
14        <div class="header-link">
15        <a href="#" class="about">デイトラとは</a>
16        <a href="#" class="courses">コース一覧</a>
17        <a href="#" class="contact-us">お問い合わせ</a>
18        </div>
19    </header>
20      
21    <div class="top-img">
22     <img src="img/main-vsual.png" width="100%" height="100%"  alt="トップ画像">
23    </div>
24    
25      
26    <div class="about-daytora">
27      <h1>デイトラとは</h1>
28    </div>
29　　
30    <div class="about-img">
31   <div class="clearfix">
32<img src="img/about.png" alt="デイトラについて" align="top"　width="350" height="350"style="float:left;">
33      <div class="imgtext">
34      <p>デイトラとは、無料で・迷わず・楽しく学べるプログラミング学習アプリです。毎日指定された課題をこなしていくだけで、未経験から30日でプログラミングスキルが身につきます。<br>
35      1日1題30日でプロのWebエンジニアを目指しましょう！</p>
36      </div>
37        
38    </div>
39</div>
40      
41      
42   <div class="index-of-courses">
43      <h1>コース一覧</h1>
44    </div>
45    
46    <div class="clearfix">  
47    <div class="courses-img">
48    <div class="img1">
49      <img src="img/web_first.png" width="400px" height="200px"  alt="初級コース">
50        <p>HTML/CSS/Bootstrap</p>
51      </div>
52      
53      <div class="img2">
54      <img src="img/web_second.png" width="400px" height="200px"  alt="中級コース">
55        <p>HTML/CSS/JavaScript/jQuery</p>
56      </div>
57      
58      <div class="img3">
59      <img src="img/web_third.png" width="400px" height="200px"  alt="上級コース">
60        <p>PHP/WordPress</p>
61      </div>
62        
63    </div>
64      </div>
65      
66      
67     
68      
69      
70     <div class="contactus">
71      <h1>お問い合わせ</h1>
72         <p>さあ今日から30日間を始めよう!</p>
73    </div>
74      
75       <div class="email">
76       <input type="email" name="example" placeholder=" メールアドレス">
77       </div>
78      
79      <div class="button-area">
80      <button type="button" style="width:300px;height:50px;background-color:red; color:white; font-size:25px">無料で始める</button>
81      </div>
82    
83      
84      <hr width="1100">
85      <footer>
86      <p>Copyright(C) 東京フリーランス ALL Rights Reserved.</p>
87      </footer>
88   
89    
90  </body>

css
1*{
2  box-sizing:border-box;
3}
4
5
6
7
8
9header{
10    color:#000033;
11    font-family;align-content: 
12}
13
14header h1{
15    float:left;
16    font-size:20px;
17    padding: 0px 10px 0px 150px;
18}
19
20.header-link{
21    float:right;
22    font-size:15px;
23    padding: 15px 150px 0px 10px;
24}
25
26.top-img{
27    
28}
29
30.about-daytora h1{
31    text-align:center;
32}
33
34.about-img img{
35    flex:auto;
36    padding: 20px 20px 20px 120px;
37    
38}
39
40.imgtext{
41    padding: 20px 20px 20px 120px;
42}
43
44.clearfix:after {
45	content: "";
46	display: block;
47	clear: both;
48}
49 
50
51.index-of-courses h1{
52    text-align:center;
53}
54
55.courses-img{
56    display:flex;
57}
58
59.img1{
60    flex:auto;
61    padding:0px 20px 0px 40px;
62    width:33%;
63}
64
65.img2{
66    flex:auto;
67    padding:0px 20px 0px 20px;
68    width:33%;
69}
70
71.img3{
72    flex:auto;
73    padding:0px 40px 0px 20px;
74    width:33%;
75}
76
77.contactus h1, .contactus p{
78    text-align:center;
79}
80
81.contactus p{
82    color:#000044;
83}
84
85input {
86    width: 700px;
87    height: 50px;
88    border-radius: 2em;
89   border: 2px solid #CCCCCC;
90}
91
92.email{
93    text-align:center;
94}
95
96.button-area{
97    text-align:center;
98    padding:20px 0px 100px 0px;
99    outline: none; 
100}
101
102footer p{
103    font-size:1px;
104    color:black;
105    float:right;
106    padding:0px 160px 10px 0px;
107}
108
109
110@media(max-width:1000px){
111   
112.courses-img{
113 flex-wrap:wrap;
114    }button-area
115    
116.img1, img2, img3{
117 width:50%; 
118    }
119}
120
121@media(max-width:670px){
122
123
124.img1{
125    flex:auto;
126    padding:0px 20px 0px 20px;
127}
128
129.img2{
130    flex:auto;
131}
132    
133.img3{
134    flex:auto;
135}
136
137 .about-img img{
138        flex:auto;
139        text-align:center;
140    }
141    
142.courses-img{
143flex-direction:column;
144    }
145    
146.button-area{
147    text-align:center;
148    width:100%;
149}
150
151fooer {
152    text-align:center;
153    
154}
155    
156    .clearfix{
157        
158    }
159
160}
161
162
163
164

①どうしてもこちらの画像を中心に寄せることができません。
少し右にずれて表示されてしまいます。

②一番下のメールフォームをウィンドウのサイズに合わせて小さくすることができません。

④また、検証モードでは検証モードにしても拡大縮小することができるので、どこがスマホの画面全体なのかがよくわかっておりません。
検証モードを使わず、パソコンのウインドウを大きくしたり小さくしたりするだけではスマホやタブレットでどのように表示されるかはわからないのでしょうか？

よろしくお願いいたします。

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

回答2件

こんにちは。

①どうしてもこちらの画像を中心に寄せることができません。
少し右にずれて表示されてしまいます。

左側に大きなパディングがあるからです。

css
1  .about-img img{
2      flex:auto;
3      padding: 20px 20px 20px 120px;
4  
5  }
6  
7  .imgtext{
8      padding: 20px 20px 20px 120px;
9  }

解決方法ですがパディングを消しましょう。

②一番下のメールフォームをウィンドウのサイズに合わせて小さくすることができません。

widthが固定値だからです。

css
1input {
2	width: 700px;
3	height: 50px;
4	border-radius: 2em;
5	border: 2px solid #CCCCCC;
6}

解決方法ですが、widthに相対値を使いましょう。

<percentage> - CSS: カスケーディングスタイルシート | MDN

<length> - CSS: カスケーディングスタイルシート | MDN

③また、ウィンドウを小さくするのではなく、検証モードでiPhoneXで確認してみると、一番下の「Copyright(C) 東京フリーランス ALL Rights Reserved.」も中心に寄っていないような気がします。

パディングで右側だけ大きくなっているからです。

css
1footer p {
2	font-size: 1px;
3	color: black;
4	float: right;
5	padding: 0px 160px 10px 0px;
6}

解決方法ですが、幅を親要素に合わせて、文字をセンタリングするのが手っ取り早そうです。

④また、検証モードでは検証モードにしても拡大縮小することができるので、どこがスマホの画面全体なのかがよくわかっておりません。

__検証モードを使わず、パソコンのウインドウを大きくしたり小さくしたりするだけではスマホやタブレットでどのように表示されるかはわからないのでしょうか？ __

言葉の意味を測りかねていますが、「検証モード」とはデバイスツールバーのことでしょうか？
そうであれば、スマホの表示を確認するためにはデバイスツールバーを使った方がいいです。

投稿2021/04/01 00:55

Lhankor_Mhy

総合スコア36104

各質問にはLhankor_Mhyさんが答えてらっしゃるので、コード上で気になったところを指摘しておきます。
※見た目がどう変わるかの検証はしていません。
※質問そのものには回答していません（低評価もやむなし）。

html
1<!-- alignはstyleで指定　widthの前の全角スペースを半角スペースに修正 -->
2<img src="img/about.png" alt="デイトラについて" align="top"　width="350" height="350"style="float:left;">
3<!-- ↓ -->
4<img src="img/about.png" alt="デイトラについて" width="350" height="350" style="vertical-align:top; float:left;">

html
1<!-- HTMLでサイズ指定する場合は数値だけか％で -->
2<img src="img/web_first.png" width="400px" height="200px"alt="初級コース">
3<img src="img/web_second.png" width="400px" height="200px"alt="中級コース">
4<img src="img/web_third.png" width="400px" height="200px"alt="上級コース">
5<!-- ↓ -->
6<img src="img/web_first.png" width="400" height="200"alt="初級コース">
7<img src="img/web_second.png" width="400" height="200"alt="中級コース">
8<img src="img/web_third.png" width="400" height="200"alt="上級コース">

html
1<!-- widthはstyleで指定　※1100px固定だとウィンドウサイズによりはみ出すので%とかの方がいいかも -->
2<hr width="1100">
3<!-- ↓ -->
4<hr style="width:1100px;">

css
1header{
2    color:#000033;
3    font-family;align-content: /* この行がおかしいので修正を */
4}

css
1@media(max-width:1000px){
2
3.courses-img{
4 flex-wrap:wrap;
5    }button-area /* button-areaを削除 */
6
7.img1, img2, img3{ /* img2, img3の.が抜けてる */
8 width:50%; 
9    }
10}