teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

2

ソースコード追記

2020/12/10 06:05

投稿

mitrasi
mitrasi

スコア49

title CHANGED
File without changes
body CHANGED
@@ -13,7 +13,60 @@
13
13
  ```
14
14
  ソースコード(HTML)
15
15
  ```
16
+ <!DOCTYPE html>
17
+ <html>
18
+ <head>
19
+ <meta charset="utf-8">
20
+ <title>Progate</title>
21
+ <link rel="stylesheet" href="stylesheet.css">
22
+ </head>
23
+ <body>
24
+ <!-- ここからHTMLを書き始めてください -->
25
+ <!--ここからheader-->
26
+ <header>
27
+ <div class="header-logo">Progate</div>
28
+ <div class="header-list">
29
+ <ul>
30
+ <li>プログラミングとは</li>
31
+ <li>学べるレッスン</li>
32
+ <li>お問い合わせ</li>
33
+ </ul>
34
+ </div>
35
+ </header>
36
+ <!--ここまでheader-->
37
+
38
+ <!--ここからmain-->
39
+ <div class="message">
40
+ <h1>HELLO WORLD<span>.</span></h1>
41
+ <h2>プログラミングの世界へようこそ</h2>
42
+ </div>
43
+ <!--ここまでmain-->
44
+
45
+ <!--ここからcontent-->
46
+ <contents clearfix>
47
+ <h3>学べるレッスン</h3>
48
+ <div class="contents-section">
49
+ <div class="contents-item">
50
+ <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/html.svg"><p>HTML & CSS</p>
51
+ </div>
52
+ <div class="contents-item">
53
+ <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/php.svg"><p>PHP</p>
54
+ </div>
55
+ <div class="contents-item">
56
+ <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/ruby.svg"><p>Ruby</p>
57
+ </div>
58
+ <div class="contents-item" clearfix>
59
+ <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg"><p>Swift</p>
60
+ </div>
61
+ </div>
62
+
63
+
64
+
65
+ </contents>
66
+ <!--ここまでcontent-->
67
+
68
+ <!--ここからform-->
16
- <div class="contact-form">
69
+ <div class="contact-form">
17
70
  <h3 class="form-title">お問い合わせ</h3>
18
71
 
19
72
  <p>メールアドレス(必須)</p>
@@ -23,12 +76,105 @@
23
76
  <p>※必須項目は必ずご入力ください</p>
24
77
  <input type="submit" class="submit" value="送信">
25
78
  </div>
79
+ <!--ここまでform-->
80
+
81
+ </body>
82
+ <!--ここまでbody-->
83
+ <!--ここからfotter-->
84
+ <!--ここまでfotter-->
85
+ </html>
26
86
 
27
87
 
88
+ ### ソースコード(CSS)
28
89
 
90
+ /* CSSのリセット(消さないでください) */
91
+ html, body,
92
+ ul, ol, li,
93
+ h1, h2, h3, h4, h5, h6, p,
94
+ form, input, div {
95
+ margin: 0;
96
+ padding: 0;
97
+ }
29
98
 
30
- ### ソースコード(CSS)
99
+ body {
100
+ font-family: "Avenir Next", "Hiragino Kaku Gothic ProN W3", sans-serif;
101
+ }
31
102
 
103
+ li {
104
+ list-style: none;
105
+ }
106
+
107
+ /* ここからCSSを記述してください */
108
+ /*ここからheader*/
109
+ header {
110
+ height:90px;
111
+ background-color:#26d0c9 ;
112
+ color:#fff
113
+ }
114
+
115
+ .header-logo {
116
+ font-size:36px;
117
+ float:left;
118
+ padding:20px 40px;
119
+ }
120
+
121
+ .header-list li{
122
+ float:left;
123
+ padding:33px 20px;
124
+ }
125
+
126
+ /*ここからmain*/
127
+ .message {
128
+ margin: 100px 80px;
129
+ }
130
+
131
+ .message h1 {
132
+ font-size:140px;
133
+ }
134
+
135
+ .message h2 {
136
+ font-size:60px;
137
+ }
138
+
139
+ .message span {
140
+ color:#ff4a4a ;
141
+ }
142
+
143
+ /*ここからcontents*/
144
+ contents {
145
+ height:500px;
146
+ margin: 5px 80px;
147
+ float:left;
148
+ }
149
+ contents h3 {
150
+ font-size:28px;
151
+ border-bottom: 2px solid #dee7ec;
152
+ padding-bottom: 15px;
153
+ }
154
+
155
+ .contents-section {
156
+ margin-top: 50px;
157
+ }
158
+ .contents-item {
159
+ font-size:24px;
160
+ padding-right: 40px;
161
+ float:left;
162
+ }
163
+
164
+
165
+ .clearfix:after {
166
+ contents:"";
167
+ display:block;
168
+ clear:both;
169
+ }
170
+ /*ここからform*/
171
+
172
+ .clearfix:after {
173
+ contents:"";
174
+ display:block;
175
+ clear:both;
176
+ }
177
+
32
178
  .contact-form {
33
179
  padding: 100px;
34
180
  }

1

※質問文、ソースコード追記

2020/12/10 06:05

投稿

mitrasi
mitrasi

スコア49

title CHANGED
File without changes
body CHANGED
@@ -10,16 +10,56 @@
10
10
  エラーメッセージ
11
11
  赤く囲まれたところを見直してみましょう
12
12
 
13
+ ```
14
+ ソースコード(HTML)
15
+ ```
16
+ <div class="contact-form">
17
+ <h3 class="form-title">お問い合わせ</h3>
18
+
19
+ <p>メールアドレス(必須)</p>
13
- ### 該当のソースコード
20
+ <input>
21
+ <p>お問い合わせ内容(必須)</p>
22
+ <textarea></textarea>
23
+ <p>※必須項目は必ずご入力ください</p>
24
+ <input type="submit" class="submit" value="送信">
25
+ </div>
14
26
 
15
- css
27
+
28
+
29
+
16
- ソースコード
30
+ ### ソースコード(CSS)
31
+
32
+ .contact-form {
33
+ padding: 100px;
34
+ }
35
+
36
+ input , textarea {
37
+ width: 400px;
38
+ padding:20px;
39
+ margin-top:10px;
40
+ margin-bottom:30px;
41
+ border: 1px solid #dee7ec;
42
+ font-size:18px;
43
+ }
44
+
45
+ .form-title {
46
+ font-size: 28px ;
47
+ border-bottom: 2px solid #dee7ec;
48
+ padding-bottom: 15px;
49
+ margin-bottom: 50px;
50
+
51
+ }
52
+
53
+ .submit {
54
+ background-color: #dee7ec;
55
+ color: #889eab ;
56
+ }
17
57
  ```
18
58
 
19
59
  ### 試したこと
20
60
 
21
61
  ①回り込みに関しては原因はおそらく「float」かとおもいますがこちらの過去の回答を拝見させていただいたのですが、どうにもうまく対処できませんでした。
22
-
62
+ 偶然で部分的には上手くできることもあるのですが、それだと全体の高さが合わないエラーが発生するのでこの際きちんと原因を突き止めたいです。
23
63
  ### 補足情報(FW/ツールのバージョンなど)
24
64
  ![①に関する現状](908dc7cc4e55a9e22a8cb4521884cbf9.png)
25
65
  ![②に関する現状※ちなみに①は縮小画面だとこのように見えています](89a1c5f3adc1599d5adf33c6b04aecf3.png)