質問編集履歴

1

コードの追加

2019/03/06 08:25

投稿

omyu
omyu

スコア22

test CHANGED
File without changes
test CHANGED
@@ -45,3 +45,203 @@
45
45
  HTML5とCSS3です。
46
46
 
47
47
  ![イメージ説明](0769ea46e8a711072d89f388f7263363.png)- ![イメージ説明](c0e5af9175e0fdd31fcf146df12062f0.png)
48
+
49
+ ```HTML
50
+
51
+ <!DOCTYPE html>
52
+
53
+ <html lang="ja">
54
+
55
+ <head>
56
+
57
+ <meta charset="UTF-8">
58
+
59
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
60
+
61
+ <meta http-equiv="X-UA-Compatible" content="ie=edge">
62
+
63
+ <title>Document</title>
64
+
65
+ <link rel="stylesheet" href="stylesheet.css">
66
+
67
+ </head>
68
+
69
+ <body>
70
+
71
+ <header>
72
+
73
+ <div class="container">
74
+
75
+ <div class="header-left">
76
+
77
+ <img src="images/isaralogo.png" alt="isara" class="header-logo">
78
+
79
+ <p class="h1">バンコクのノマドエンジニア育成講座</p>
80
+
81
+ </div>
82
+
83
+ <div class="header-right">
84
+
85
+ <a href="#">お問い合わせ / 資料請求はこちら</a>
86
+
87
+ </div>
88
+
89
+ </div>
90
+
91
+ </header>
92
+
93
+ <div id="wrap">
94
+
95
+ <section class="top">
96
+
97
+ <p class="text1">プログラミングで</p>
98
+
99
+ <p class="text1">人生の安定を手にいれよう</p>
100
+
101
+ <img src="images/isaralogolarge.png" alt="isara">
102
+
103
+ <p class="text2">バンコクのノマドエンジニア育成講座</p>
104
+
105
+ <p class="text2">iSara[イサラ]</p>
106
+
107
+ </section>
108
+
109
+
110
+
111
+ </div>
112
+
113
+ </body>
114
+
115
+ </html>
116
+
117
+ ```
118
+
119
+ ```CSS
120
+
121
+ @charset "utf-8";
122
+
123
+
124
+
125
+ * {
126
+
127
+ box-sizing: border-box;
128
+
129
+ text-decoration: none;
130
+
131
+ }
132
+
133
+ body {
134
+
135
+ margin:0;
136
+
137
+ }
138
+
139
+ header {
140
+
141
+ height:75px;
142
+
143
+ width:100%;
144
+
145
+ background-color:white;
146
+
147
+ position:fixed;
148
+
149
+ top:0px;
150
+
151
+ }
152
+
153
+ header:after {
154
+
155
+ content:"";
156
+
157
+ display:block;
158
+
159
+ clear:both;
160
+
161
+ }
162
+
163
+ .container {
164
+
165
+ width:1170px;
166
+
167
+ height:75px;
168
+
169
+ margin:0 auto;
170
+
171
+ }
172
+
173
+ .header-left {
174
+
175
+ float:left;
176
+
177
+ width:400px;
178
+
179
+ height:75px;
180
+
181
+ }
182
+
183
+ .header-logo {
184
+
185
+ margin-top:17px;
186
+
187
+ width:120px;
188
+
189
+ float:left;
190
+
191
+ }
192
+
193
+ .header-left .h1 {
194
+
195
+ margin: 37px 0 0 0;
196
+
197
+ font-size: 14px;
198
+
199
+ color: #333333;
200
+
201
+ font-weight:600;
202
+
203
+ letter-spacing: 2px;
204
+
205
+ }
206
+
207
+ .header-right {
208
+
209
+ float:right;
210
+
211
+ width:320px;
212
+
213
+ height:45px;
214
+
215
+ margin-top:15px;
216
+
217
+ background-color: #da6b64;
218
+
219
+ border-radius:25px;
220
+
221
+ }
222
+
223
+ .header-right a {
224
+
225
+ line-height: 45px;
226
+
227
+ font-weight:300;
228
+
229
+ font-size: 14px;
230
+
231
+ text-align:center;
232
+
233
+ color:white;
234
+
235
+ letter-spacing: 2px;
236
+
237
+ display:block;
238
+
239
+ }
240
+
241
+ .header-right:hover {
242
+
243
+ background-color:#dc143c;
244
+
245
+ }
246
+
247
+ ```