質問編集履歴

1

HTML,CSS,ブラウザ表示の情報の追加

2020/03/13 04:41

投稿

konbu-3
konbu-3

スコア9

test CHANGED
File without changes
test CHANGED
@@ -19,3 +19,227 @@
19
19
 
20
20
 
21
21
  間違い箇所が分かる方、ご教授お願いします。
22
+
23
+
24
+
25
+ ######追記 現在のHTML,CSS,ブラウザ表示の状態です。
26
+
27
+ ```html
28
+
29
+ <!DOCTYPE html>
30
+
31
+ <html lang="ja">
32
+
33
+ <head>
34
+
35
+ <meta charset="UTF-8">
36
+
37
+ <title>WCBCafe</title>
38
+
39
+ <meta name="description" content="ブレンドコーヒーとヘルシーなオーガニックフードを提供するカフェ">
40
+
41
+
42
+
43
+
44
+
45
+
46
+
47
+ <!--CSS-->
48
+
49
+ <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
50
+
51
+ <link href="https://font.googleapis.com/css?family=philosopher" rel="stylesheet">
52
+
53
+ <link href="css/style.css" rel="stylesheet">
54
+
55
+
56
+
57
+ </head>
58
+
59
+
60
+
61
+ <body>
62
+
63
+ <header class="page-header wrapper">
64
+
65
+ <h1>
66
+
67
+ <a href="index.html"><img class="logo" src="images/logo.svg" alt="WCBCafeホーム画面"></a>
68
+
69
+ </h1>
70
+
71
+
72
+
73
+ <nav>
74
+
75
+ <ul class="main-nav">
76
+
77
+ <li><a href="news.html">News</a></li>
78
+
79
+ <li><a href="menu.html">Menu</a></li>
80
+
81
+ <li><a href="contact.html">Contact</a></li>
82
+
83
+ </ul>
84
+
85
+ </nav>
86
+
87
+
88
+
89
+ </header>
90
+
91
+
92
+
93
+ <div class="home-contact wrapper">
94
+
95
+ <h2 class="page-title">We`ll Make Your Day</h2>
96
+
97
+ <p>おしゃれなカフェで癒されてみませんか?無添加の食材で体の中からリフレッシュ。</p>
98
+
99
+ <a class="button" href="menu.html">メニューを見る</a>
100
+
101
+ </div><!-- /.home-content-->
102
+
103
+
104
+
105
+
106
+
107
+ </body>
108
+
109
+
110
+
111
+ </html>
112
+
113
+
114
+
115
+ ```
116
+
117
+ ```css
118
+
119
+ @charset "UTF-8";
120
+
121
+ /*共通部分
122
+
123
+ ーーーーーーーーーーーーーーーーーーーーーーー*/
124
+
125
+ /*header
126
+
127
+ --------------------------------------*/
128
+
129
+
130
+
131
+ html{
132
+
133
+ font-size: 100%;
134
+
135
+ }
136
+
137
+ body{
138
+
139
+ font-family: "Yu Gothic Medium","游ゴシック Medium","YuGothic","游ゴシック体","ヒラギノ角ゴ Pro W3",sans-serif;;
140
+
141
+ line-height: 1.7;
142
+
143
+ color:#432;
144
+
145
+ }
146
+
147
+ a{
148
+
149
+ text-decoration: none;
150
+
151
+ }
152
+
153
+ img{
154
+
155
+ max-width: 100%
156
+
157
+ }
158
+
159
+ .logo{
160
+
161
+ width:210px;
162
+
163
+ margin-top:14px;
164
+
165
+ }
166
+
167
+ .main-nav{
168
+
169
+ display: flex;/*中の<li>タグを横並びにする*/
170
+
171
+ font-size: 1.25rem;
172
+
173
+ text-transform: uppercase; /*これは何だろう?*/
174
+
175
+ margin-top:34px;
176
+
177
+ list-style:none;
178
+
179
+ }
180
+
181
+ .main-nav li{
182
+
183
+ margin-left:36px;
184
+
185
+
186
+
187
+ }
188
+
189
+ .main-nav a{  /*メインメニューの色*/
190
+
191
+ color:#432;
192
+
193
+ }
194
+
195
+ .main-nav a:hobor{ /*カーソルを合わせたときの処理*/
196
+
197
+ color:#0bd;
198
+
199
+ }
200
+
201
+ .page-header{
202
+
203
+ display: flex;
204
+
205
+ justify-content: space-between;
206
+
207
+ }
208
+
209
+ .wrapper{
210
+
211
+ max-width: 1100px;
212
+
213
+ margin:0 auto;
214
+
215
+ padding:0 4%;
216
+
217
+ }
218
+
219
+
220
+
221
+ /*HOME
222
+
223
+ ------------------------------------*/
224
+
225
+ .home-content{
226
+
227
+ text-align: center;
228
+
229
+ margin-top:10%;
230
+
231
+ }
232
+
233
+ .home-content p{
234
+
235
+ font-size: 1.125rem;
236
+
237
+ margin:10px 0 42px;
238
+
239
+ }
240
+
241
+
242
+
243
+ ```
244
+
245
+ ![イメージ説明](a2c7b6e5afe9a41cedeb3d7a3425c4ed.png)