WEBデザインのためのサイト模写で思う通りにいかないところがあります。

現在こちらのサイト(https://note.com/tokyofreelance/n/n4baf7dd10306)の模写に取り組んでおります。

一通りフッターまで描き終わってはみたのですが、細かいところでうまくいっていないところがあります。

①デイトラとはの画像の右にある文字がおかしなところで改行される。
②コース一覧の画像の下にある文字が、画像の下の左上にピタッとくっつける方法がわからない。(position:absolute;で位置指定したい気持ちになっております。)
③コース一覧の画像が、ウインドウのサイズを変更する(小さくする)と、初級コースの画像だけがずれて表示されてしまう。

以上の三点が特に気になっています。
フィードバックをもらえる環境にないので、他にも拙い書き方をしているところがあれば教えていただきたいです。

また、これをスマホやタブレットに対応するレスポンシブデザインにしたいのですが、私のコードは画像などにサイズ指定をしていないのですが、これを一から全て相対的なサイズ指定を施していかなければならないということなのでしょうか...?(正直うまくいく気がしなくて心が折れそうです。)
よろしくお願いします。

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    
91  </body>

css
1*{
2  box-sizing:border-box;
3}
4
5
6header{
7    color:#000033;
8    font-family;align-content: 
9}
10
11header h1{
12    float:left;
13    font-size:20px;
14    padding: 0px 10px 0px 150px;
15}
16
17.header-link{
18    float:right;
19    font-size:15px;
20    padding: 15px 150px 0px 10px;
21}
22
23.top-img{
24    
25}
26
27.about-daytora h1{
28    text-align:center;
29}
30
31.about-img img{
32    padding: 20px 20px 20px 120px;
33    
34}
35
36.imgtext{
37    padding: 20px 20px 20px 120px;
38}
39
40.clearfix:after {
41	content: "";
42	display: block;
43	clear: both;
44}
45 
46
47.index-of-courses h1{
48    text-align:center;
49}
50
51.img1{
52    float:left;
53    padding:0px 20px 0px 40px
54}
55
56.img2{
57    float:left;
58    padding:0px 20px 0px 20px
59}
60
61.img3{
62    float:left;
63    padding:0px 40px 0px 20px
64}
65
66.contactus h1,p{
67    text-align:center;
68}
69
70.contactus p{
71    color:#000044;
72}
73
74input {
75    width: 700px;
76    height: 50px;
77    border-radius: 2em;
78   border: 2px solid #CCCCCC;
79}
80
81.email{
82    text-align:center;
83}
84
85.button-area{
86    text-align:center;
87    padding:20px 0px 100px 0px;
88    outline: none; 
89}
90
91footer p{
92    font-size:1px;
93    color:black;
94    float:right;
95    padding:0px 160px 10px 0px;
96}
97
98
99

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

回答1件

こんにちは。

①デイトラとはの画像の右にある文字がおかしなところで改行される。

センタリングをしているからです。

css
1.contactus h1, p {
2	text-align: center; /* ←これ */
3}
4
5/* おそらくこうしたいのでは？ 
6.contactus h1, .contactus p {
7	text-align: center;
8}
9*/

②コース一覧の画像の下にある文字が、画像の下の左上にピタッとくっつける方法がわからない。(position:absolute;で位置指定したい気持ちになっております。)

①と同じです。

__③コース一覧の画像が、ウインドウのサイズを変更する(小さくする)と、初級コースの画像だけがずれて表示されてしまう。 __

右と左のパディングが違うからです。

css
1.img1 {
2	float: left;
3	padding: 0px 20px 0px 40px;
4}

40px 初級 20px 20px 中級 20px 20px 上級 40px
のようにしたいのであれば、このようにしてみてはどうでしょうか。

20px 親要素境界 20px 初級 20px 20px 中級 20px 20px 上級 20px 親要素境界 20px

私のコードは画像などにサイズ指定をしていないのですが、これを一から全て相対的なサイズ指定を施していかなければならないということなのでしょうか...?

どういうレイアウトなのかにもよると思いますが、面倒なら以下のように一括指定して、それでダメなところだけ変えてみてはいかがでしょうか。

css
1  img{
2      width: 100%; /* 親要素と同じ幅になります */
3      display: block;
4  }

投稿2021/03/31 00:52

Lhankor_Mhy

総合スコア36960

Lhankor_Mhy

2021/03/31 00:59

> 他にも拙い書き方この教材でそれを推奨しているなら仕方がないですが、フロートレイアウトは、5年ぐらい時代遅れです。いろいろ問題も起きるので、これから新しくサイトを作る時に採用することはないでしょう。この教材が終わったあとは使わないようにして、フレックスレイアウトやグリッドレイアウトを学ぶようにしてください。

Googler

2021/03/31 04:11

わかりました。また、画像の横のコメントとは、 <div class="about-daytora"> <h1>デイトラとは</h1> </div> 　　 <div class="about-img"> <div class="clearfix"> <img src="img/about.png" alt="デイトラについて" align="top"　width="350" height="350"style="float:left;"> <div class="imgtext"> <p>デイトラとは、無料で・迷わず・楽しく学べるプログラミング学習アプリです。毎日指定された課題をこなしていくだけで、未経験から30日でプログラミングスキルが身につきます。<br> 1日1題30日でプロのWebエンジニアを目指しましょう！</p> </div> </div> </div> の部分なのですが、ここは中心に寄せてないはずなのですが、なぜ文章が中心に寄っているんでしょうか...?

Googler

2021/03/31 04:13

また、親要素境界というのがよくわからないのですが、具体的にどのようなコードを書けばいいのでしょうか？

Lhankor_Mhy

2021/03/31 04:13

回答に書いた通り、としか言いようがないですが…… .contactus h1, p { text-align: center; } ↑は↓と同じ意味です。 .contactus h1 { text-align: center; } p { text-align: center; }

Lhankor_Mhy

2021/03/31 04:14

親要素の外にパディングを20px使えばスッキリするよね、という話です。

Lhankor_Mhy

2021/03/31 04:21

全然試してないですが、 .clearfix{ padding: 0 20px; } .img1,.img2,.img3{ padding: 0 20px; }

Googler

2021/03/31 10:08

返信ありがとうございます。 .contactus h1, p { text-align: center; } は <div class="contactus"> <h1>お問い合わせ</h1> <p>さあ今日から30日間を始めよう!</p> </div> に関する部分の記述で、私が文章が中心によって困ってるのは <div class="about-img"> <div class="clearfix"> <img src="img/about.png" alt="デイトラについて" align="top"　width="350" height="350"style="float:left;"> <div class="imgtext"> <p>デイトラとは、無料で・迷わず・楽しく学べるプログラミング学習アプリです。毎日指定された課題をこなしていくだけで、未経験から30日でプログラミングスキルが身につきます。<br> 1日1題30日でプロのWebエンジニアを目指しましょう！</p> </div> </div> </div> の部分なのですが、私が勘違いしてるんでしょうか...? またレスポンシブ対応は一括でうまくいかなかったので、やはり一つ一つ修正するしかなさそうでした...

Lhankor_Mhy

2021/03/31 10:19 編集

> 私が勘違いしてるんでしょうか...? そうですね。どこで行き違いが起きているのかわかりませんが、どうもコミュニケーションがうまくいっていないようです。そのCSSが「<p>デイトラとは、... </p>」に効いてしまうことは、回答とコメントで十分に説明しているつもりなので、どうしたものか悩みます。まあ、ひとつひとつやっていきましょうか。 --- p { text-align: center; } が、ページにあるPタグを全部センタリングしてしまう、ということについて、同じ意見を共有できますか？

Googler

2021/03/31 11:23

解決しました！ .contactus h1, p { text-align: center; } という書き方で.contactus　はh1にもpにもかかるものだと勘違いしておりました。ありがとうございます

Lhankor_Mhy

2021/03/31 11:26

ご理解いただけて助かりました。

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