質問編集履歴

3

コード全文とサイト画像の追加

2021/06/07 14:32

投稿

mayuka_passion
mayuka_passion

スコア1

test CHANGED
File without changes
test CHANGED
@@ -36,13 +36,79 @@
36
36
 
37
37
  質問の仕方が悪く申し訳ありません。
38
38
 
39
+ このサイトのヘッダー部分をコーディングしようとしています。
40
+
41
+ ![イメージ説明](90d8efbbf72e13fcc6467769db693662.png)
42
+
39
- 描画結果はCSSが反映していない状態です。
43
+ 自分の描画結果はCSSが反映していない状態です。
40
44
 
41
45
  ![イメージ説明](3e86b730bfc9b1f5d3dab72517a762a4.png)
42
46
 
43
47
  以下、全文掲載いたします。
44
48
 
45
-
49
+ ```html
50
+
51
+ <!DOCTYPE html>
52
+
53
+ <html lang="ja">
54
+
55
+ <head>
56
+
57
+ <meta charset="utf-08">
58
+
59
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
60
+
61
+ <title>写経用コード</title>
62
+
63
+ <link rel="stylesheet" href="style.css">
64
+
65
+ </head>
66
+
67
+ <body>
68
+
69
+ <!-------------------------
70
+
71
+ * ヘッダー
72
+
73
+ --------------------------->
74
+
75
+
76
+
77
+ <header>
78
+
79
+ <div class="inner">
80
+
81
+ <h1>株式会社Practice</h1>
82
+
83
+ <nav>
84
+
85
+ <ul>
86
+
87
+ <li>ABOUT</li>
88
+
89
+ <li>NEWS</li>
90
+
91
+ <li>WORKS</li>
92
+
93
+ <li>ACCESS</li>
94
+
95
+ <li>CONTACT</li>
96
+
97
+ </ul>
98
+
99
+ </nav>
100
+
101
+ </div>
102
+
103
+ </header>
104
+
105
+ </body>
106
+
107
+ </html>
108
+
109
+ ```
110
+
111
+ ```css
46
112
 
47
113
  @charset "utf-8";
48
114
 
@@ -251,3 +317,5 @@
251
317
  padding: 0 20px;
252
318
 
253
319
  }
320
+
321
+ ```

2

CSSのコード全文掲載

2021/06/07 14:32

投稿

mayuka_passion
mayuka_passion

スコア1

test CHANGED
File without changes
test CHANGED
@@ -30,16 +30,224 @@
30
30
 
31
31
 
32
32
 
33
- ![![イメージ説明](c47f0b8fcce0363480cc014349b3d630.png)](2060e82f971410f041d726c5fe90268b.png)
33
+ ![![イメージ説明](c47f0b8fcce0363480cc014349b3d630.png)
34
34
 
35
35
 
36
36
 
37
37
  質問の仕方が悪く申し訳ありません。
38
38
 
39
- 詳細画像を追加添付します。
40
-
41
- ![イメージ説明](dd98565c25983227ebb70b05816d014f.png)
42
-
43
39
  描画結果はCSSが反映していない状態です。
44
40
 
45
41
  ![イメージ説明](3e86b730bfc9b1f5d3dab72517a762a4.png)
42
+
43
+ 以下、全文掲載いたします。
44
+
45
+
46
+
47
+ @charset "utf-8";
48
+
49
+
50
+
51
+ /* ーーーーーーーーーーーーーー
52
+
53
+ 全体構造
54
+
55
+ ーーーーーーーーーーーーーー */
56
+
57
+
58
+
59
+ html {
60
+
61
+ margin: 0;
62
+
63
+ padding: 0;
64
+
65
+ }
66
+
67
+
68
+
69
+ body {
70
+
71
+ margin: 0;
72
+
73
+ padding:0;
74
+
75
+ color: #4a4a4a;
76
+
77
+ line-height: 1.5;
78
+
79
+ background-color: #fff;
80
+
81
+ }
82
+
83
+
84
+
85
+ h1,h2,h3,h4 {
86
+
87
+ margin: 0;
88
+
89
+ padding: 0;
90
+
91
+ font-weight: bold;
92
+
93
+ }
94
+
95
+
96
+
97
+ h1 {
98
+
99
+ font-size: 24px;
100
+
101
+ }
102
+
103
+
104
+
105
+ h2 {
106
+
107
+ font-size: 28px;
108
+
109
+ text-align: center;
110
+
111
+ }
112
+
113
+
114
+
115
+ h3 {
116
+
117
+ font-size: 18px;
118
+
119
+ text-align: center;
120
+
121
+ }
122
+
123
+
124
+
125
+ p, a {
126
+
127
+ margin: 0;
128
+
129
+ padding: 0;
130
+
131
+ font-size: 18px;
132
+
133
+ color: #4a4a4a;
134
+
135
+ }
136
+
137
+
138
+
139
+ a {
140
+
141
+ text-decoration: none;
142
+
143
+ }
144
+
145
+
146
+
147
+ a:hover {
148
+
149
+ opacity: 0.7;
150
+
151
+ }
152
+
153
+
154
+
155
+ ul {
156
+
157
+ padding: 0;
158
+
159
+ margin: 0;
160
+
161
+ }
162
+
163
+
164
+
165
+ li {
166
+
167
+ list-style: none;
168
+
169
+ }
170
+
171
+
172
+
173
+ .inner {
174
+
175
+ padding: 70px 50px;
176
+
177
+ max-width: 980px;
178
+
179
+ margin: 0 auto;
180
+
181
+ text-align: center;
182
+
183
+ }
184
+
185
+
186
+
187
+ .line {
188
+
189
+ background-color: #4a4a4a;
190
+
191
+ width: 55px;
192
+
193
+ height: 1px;
194
+
195
+ margin: 30px auto 60px;
196
+
197
+ }
198
+
199
+
200
+
201
+ /* -------------------------
202
+
203
+ * ヘッダー
204
+
205
+ ---------------------------- */
206
+
207
+
208
+
209
+ header {
210
+
211
+ height: 10vh;
212
+
213
+ background-color: #343a40;
214
+
215
+ color: #fff;
216
+
217
+ }
218
+
219
+
220
+
221
+ header .inner {
222
+
223
+ display: flex;
224
+
225
+ justify-content: space-between;
226
+
227
+ align-items: center;
228
+
229
+ padding: 0 20px;
230
+
231
+ height: 100%;
232
+
233
+ max-width: 980px;
234
+
235
+ margin: 0 auto;
236
+
237
+ }
238
+
239
+
240
+
241
+ header ul {
242
+
243
+ display: flex;
244
+
245
+ }
246
+
247
+
248
+
249
+ header li {
250
+
251
+ padding: 0 20px;
252
+
253
+ }

1

詳細画像の追加

2021/06/07 14:13

投稿

mayuka_passion
mayuka_passion

スコア1

test CHANGED
File without changes
test CHANGED
@@ -31,3 +31,15 @@
31
31
 
32
32
 
33
33
  ![![イメージ説明](c47f0b8fcce0363480cc014349b3d630.png)](2060e82f971410f041d726c5fe90268b.png)
34
+
35
+
36
+
37
+ 質問の仕方が悪く申し訳ありません。
38
+
39
+ 詳細画像を追加添付します。
40
+
41
+ ![イメージ説明](dd98565c25983227ebb70b05816d014f.png)
42
+
43
+ 描画結果はCSSが反映していない状態です。
44
+
45
+ ![イメージ説明](3e86b730bfc9b1f5d3dab72517a762a4.png)