質問編集履歴

1

該当のコードに改めて記載しました。よろしくお願いいたします。

2021/04/29 05:42

投稿

Erunoa
Erunoa

スコア61

test CHANGED
File without changes
test CHANGED
@@ -20,7 +20,167 @@
20
20
 
21
21
  ### 該当のソースコード
22
22
 
23
-
23
+ index.html
24
+
25
+ <!DOCTYPE html>
26
+
27
+ <html lang="ja">
28
+
29
+ <head>
30
+
31
+ <meta charset="UTF-8">
32
+
33
+ <title>Document</title>
34
+
35
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
36
+
37
+ <link rel="shotcaticon" href="img/favicon.ico">
38
+
39
+ <link rel="stylesheet" href="http://unpkg.com/ress/dist/ress.min.css">
40
+
41
+ <link rel="stylesheet" href="css/style.css">
42
+
43
+ </head>
44
+
45
+
46
+
47
+ <body>
48
+
49
+ <header>
50
+
51
+ <div class="header-title"><a href="#">30日Daysトライアル</a>
52
+
53
+ </div>
54
+
55
+ <nav>
56
+
57
+ <ul class="header-right">
58
+
59
+ <li><a href="#">デイドラとは</a></li>
60
+
61
+ <li><a href="#">コース一覧</a></li>
62
+
63
+ <li><a href="#">お問い合わせ</a></li>
64
+
65
+ </ul>
66
+
67
+ </nav>
68
+
69
+ </header>
70
+
71
+
72
+
73
+ <div class="container">
74
+
75
+ <h1 class="copy">1日1題30日で<br>プロのWebエンジニアになろう</h1>
76
+
77
+ </div>
78
+
79
+
80
+
81
+ <p>毎日設定された課題をこなすだけ!未経験から<br>30日でプログラミングスキルが身に付きます</p>
82
+
83
+
84
+
85
+ <!-- wrapper -->
86
+
87
+ </body>
88
+
89
+ </html>
90
+
91
+
92
+
93
+ style.css
94
+
95
+ @charset "UTF-8";
96
+
97
+
98
+
99
+ html {
100
+
101
+ font-size: 100%;
102
+
103
+ }
104
+
105
+ body {
106
+
107
+ color: black;
108
+
109
+ }
110
+
111
+ header {
112
+
113
+ display: flex;
114
+
115
+ justify-content: space-between;
116
+
117
+
118
+
119
+ }
120
+
121
+ .header-title {
122
+
123
+ float: left;
124
+
125
+ }
126
+
127
+
128
+
129
+ .header-right {
130
+
131
+ display: flex;
132
+
133
+ float: right;
134
+
135
+ list-style: none;
136
+
137
+ margin-right: 20px;
138
+
139
+ }
140
+
141
+
142
+
143
+ .container {
144
+
145
+ position: relative;
146
+
147
+ background-image: url(../img/main-vsual-nontitle.png);
148
+
149
+ background-size: cover;
150
+
151
+ height: 300px;
152
+
153
+ }
154
+
155
+ .copy {
156
+
157
+ top: 50%;
158
+
159
+ left: 50%;
160
+
161
+ display: block;
162
+
163
+ position: absolute;
164
+
165
+ transform: translate(-50%,-50%)
166
+
167
+ }
168
+
169
+ .copy p {
170
+
171
+ top: 50%;
172
+
173
+ left: 50%;
174
+
175
+ display: block;
176
+
177
+ position: absolute;
178
+
179
+ transform: translate(-50%,-50%)
180
+
181
+
182
+
183
+ }
24
184
 
25
185
  ```ここに言語名を入力HTML
26
186