質問編集履歴

1

書式の改善

2020/01/29 09:43

投稿

sheepshonn
sheepshonn

スコア16

test CHANGED
File without changes
test CHANGED
@@ -14,226 +14,226 @@
14
14
 
15
15
 
16
16
 
17
+
18
+
19
+ 模写サイト
20
+
21
+ [https://isara.life/](https://isara.life)
22
+
23
+ リセットCSS
24
+
25
+ [http://html5doctor.com/html-5-reset-stylesheet/](http://html5doctor.com/html-5-reset-stylesheet/)
26
+
27
+
28
+
29
+
30
+
31
+ ### 該当のソースコード
32
+
33
+ ```HTML
34
+
35
+ <!DOCTYPE html>
36
+
37
+ <html lang="ja">
38
+
39
+
40
+
41
+ <head>
42
+
43
+ <meta charset="UTF-8">
44
+
45
+ <title>Isara head</title>
46
+
47
+ <meta name="Author" content="" />
48
+
49
+ <link rel="stylesheet" href="doctor_css_reset.css">
50
+
51
+ <link rel="stylesheet" href="isara_head.css">
52
+
53
+ </head>
54
+
55
+
56
+
57
+ <body>
58
+
59
+ <section class="head">
60
+
61
+ <div class="head_in">
62
+
63
+ <header class="bar">
64
+
65
+ <div class="logo">
66
+
67
+ <img src="https://isara.life/wp-content/themes/isara_v2/img/isaralogo.png" alt="">
68
+
69
+ </div>
70
+
71
+ <div class="subtitle txtxs">
72
+
73
+ <p>バンコクのノマドエンジニア育成講座</p>
74
+
75
+ </div>
76
+
77
+ <div class="headcontact">
78
+
79
+ <div class="contactsp">
80
+
81
+ <p class="txtxs">お問い合わせ / 資料請求はこちら</p>
82
+
83
+ </div>
84
+
85
+ <div class="contactpc"></div>
86
+
87
+ </div>
88
+
89
+ </header>
90
+
91
+ </div>
92
+
93
+ </section>
94
+
95
+ <div class="box">
96
+
97
+ </div>
98
+
99
+ </body>
100
+
101
+ </html>
102
+
17
103
  ```
18
104
 
19
- 模写サイト
20
-
21
- [https://isara.life/](URL)
22
-
23
- リセットCSS
105
+ ```CSS
106
+
24
-
107
+ * {
108
+
109
+ box-sizing: border-box;
110
+
111
+ }
112
+
113
+
114
+
115
+ .head {
116
+
117
+ position: fixed;
118
+
119
+ z-index: 10;
120
+
121
+ width: 100%;
122
+
123
+ background: #fff;
124
+
125
+ }
126
+
127
+
128
+
129
+ .bar {
130
+
131
+ padding: 20px 0;
132
+
133
+ height: 75px;
134
+
135
+ width: 1170px;
136
+
137
+ max-width: calc(100% - 20px);
138
+
139
+ margin: 0 auto;
140
+
141
+ position: relative;
142
+
143
+ }
144
+
145
+
146
+
147
+ .logo img {
148
+
149
+ width: 128px;
150
+
151
+ }
152
+
153
+
154
+
155
+ .bar .logo,
156
+
157
+ .subtitle {
158
+
159
+ display: inline-block;
160
+
161
+ }
162
+
163
+
164
+
165
+ .logo {
166
+
167
+ margin-top: -6px;
168
+
169
+ }
170
+
171
+
172
+
173
+ img {
174
+
175
+ width: auto;
176
+
177
+ height: auto;
178
+
179
+ max-width: 100%;
180
+
181
+ max-height: 100%;
182
+
183
+ }
184
+
185
+
186
+
187
+ .subtitle {
188
+
189
+ position: relative;
190
+
191
+ bottom: -10px;
192
+
193
+ font-weight: 600;
194
+
195
+ }
196
+
197
+
198
+
199
+ .txtxs {
200
+
201
+ font-size: :14px;
202
+
203
+ }
204
+
205
+
206
+
207
+ .bar .contactsp {
208
+
209
+ cursor: pointer;
210
+
211
+ position: absolute;
212
+
213
+ background: rgb(216, 73, 64);
214
+
215
+ color: #ffffff;
216
+
217
+ border-radius: 25px;
218
+
219
+ right: 0px;
220
+
221
+ top: 16px;
222
+
223
+ padding: 11px 40px;
224
+
225
+ }
226
+
227
+
228
+
229
+ .box {
230
+
25
- [http://html5doctor.com/html-5-reset-stylesheet/](URL)
231
+ background-color: blueviolet;
232
+
233
+ height: 3000px;
234
+
235
+ }
236
+
237
+
26
238
 
27
239
  ```
28
-
29
-
30
-
31
- ### 該当のソースコード
32
-
33
- ```HTML
34
-
35
- <!DOCTYPE html>
36
-
37
- <html lang="ja">
38
-
39
-
40
-
41
- <head>
42
-
43
- <meta charset="UTF-8">
44
-
45
- <title>Isara head</title>
46
-
47
- <meta name="Author" content="" />
48
-
49
- <link rel="stylesheet" href="doctor_css_reset.css">
50
-
51
- <link rel="stylesheet" href="isara_head.css">
52
-
53
- </head>
54
-
55
-
56
-
57
- <body>
58
-
59
- <section class="head">
60
-
61
- <div class="head_in">
62
-
63
- <header class="bar">
64
-
65
- <div class="logo">
66
-
67
- <img src="https://isara.life/wp-content/themes/isara_v2/img/isaralogo.png" alt="">
68
-
69
- </div>
70
-
71
- <div class="subtitle txtxs">
72
-
73
- <p>バンコクのノマドエンジニア育成講座</p>
74
-
75
- </div>
76
-
77
- <div class="headcontact">
78
-
79
- <div class="contactsp">
80
-
81
- <p class="txtxs">お問い合わせ / 資料請求はこちら</p>
82
-
83
- </div>
84
-
85
- <div class="contactpc"></div>
86
-
87
- </div>
88
-
89
- </header>
90
-
91
- </div>
92
-
93
- </section>
94
-
95
- <div class="box">
96
-
97
- </div>
98
-
99
- </body>
100
-
101
- </html>
102
-
103
- ```
104
-
105
- ```CSS
106
-
107
- * {
108
-
109
- box-sizing: border-box;
110
-
111
- }
112
-
113
-
114
-
115
- .head {
116
-
117
- position: fixed;
118
-
119
- z-index: 10;
120
-
121
- width: 100%;
122
-
123
- background: #fff;
124
-
125
- }
126
-
127
-
128
-
129
- .bar {
130
-
131
- padding: 20px 0;
132
-
133
- height: 75px;
134
-
135
- width: 1170px;
136
-
137
- max-width: calc(100% - 20px);
138
-
139
- margin: 0 auto;
140
-
141
- position: relative;
142
-
143
- }
144
-
145
-
146
-
147
- .logo img {
148
-
149
- width: 128px;
150
-
151
- }
152
-
153
-
154
-
155
- .bar .logo,
156
-
157
- .subtitle {
158
-
159
- display: inline-block;
160
-
161
- }
162
-
163
-
164
-
165
- .logo {
166
-
167
- margin-top: -6px;
168
-
169
- }
170
-
171
-
172
-
173
- img {
174
-
175
- width: auto;
176
-
177
- height: auto;
178
-
179
- max-width: 100%;
180
-
181
- max-height: 100%;
182
-
183
- }
184
-
185
-
186
-
187
- .subtitle {
188
-
189
- position: relative;
190
-
191
- bottom: -10px;
192
-
193
- font-weight: 600;
194
-
195
- }
196
-
197
-
198
-
199
- .txtxs {
200
-
201
- font-size: :14px;
202
-
203
- }
204
-
205
-
206
-
207
- .bar .contactsp {
208
-
209
- cursor: pointer;
210
-
211
- position: absolute;
212
-
213
- background: rgb(216, 73, 64);
214
-
215
- color: #ffffff;
216
-
217
- border-radius: 25px;
218
-
219
- right: 0px;
220
-
221
- top: 16px;
222
-
223
- padding: 11px 40px;
224
-
225
- }
226
-
227
-
228
-
229
- .box {
230
-
231
- background-color: blueviolet;
232
-
233
- height: 3000px;
234
-
235
- }
236
-
237
-
238
-
239
- ```