質問編集履歴

3

その他もろもろの修整

2021/06/11 10:45

投稿

HdNu
HdNu

スコア32

test CHANGED
File without changes
test CHANGED
@@ -196,10 +196,20 @@
196
196
 
197
197
  .About{
198
198
 
199
- text-align:right;
200
-
201
199
  background-color:rgb(243, 240, 235);
202
200
 
201
+
202
+
203
+ }
204
+
205
+
206
+
207
+ .About h3{
208
+
209
+ display: inline-block;
210
+
211
+ margin-top: 50px;
212
+
203
213
  }
204
214
 
205
215
 
@@ -208,27 +218,11 @@
208
218
 
209
219
  width: 50%;
210
220
 
221
+ float: right;
222
+
211
- }
223
+ }
212
-
213
-
214
-
215
- .About h3{
224
+
216
-
217
- text-align:left;
225
+
218
-
219
- padding-top: 20px;
220
-
221
- }
222
-
223
-
224
-
225
- img{
226
-
227
- background-size: 300px;
228
-
229
-
230
-
231
- }
232
226
 
233
227
 
234
228
 
@@ -240,11 +234,27 @@
240
234
 
241
235
 
242
236
 
237
+
238
+
239
+ .purodakut p{
240
+
241
+ text-align: left;
242
+
243
+ }
244
+
245
+
246
+
247
+
248
+
243
249
  .purodaku img{
244
250
 
245
- float:left;
251
+ float:right;
246
-
252
+
247
- }
253
+ }
254
+
255
+
256
+
257
+
248
258
 
249
259
 
250
260
 
@@ -252,4 +262,4 @@
252
262
 
253
263
 
254
264
 
255
- ![イメージ説明](fe7bbeb8a648aabed74cf8a5393157ff.png)
265
+ ![イメージ説明](27a69e24e8f228d55ff026ad3b3681c8.png)

2

文字の修整

2021/06/11 10:45

投稿

HdNu
HdNu

スコア32

test CHANGED
File without changes
test CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
 
4
4
 
5
- ABOUTの文字を下に移動調整したいのですが記述法が見つからず困っております。
5
+ 実現したいこととしましては、ABOUTの文字を画像の左側のスプーンの高さにまでABOUTの文字を下に下げたいのですが記述法が見つからず困っております。
6
6
 
7
7
 
8
8
 

1

写真の追加

2021/06/09 06:31

投稿

HdNu
HdNu

スコア32

test CHANGED
File without changes
test CHANGED
@@ -11,3 +11,245 @@
11
11
 
12
12
 
13
13
  どなたかが教授頂きたい所存です。
14
+
15
+
16
+
17
+
18
+
19
+ ```HTML
20
+
21
+ <!DOCTYPE html>
22
+
23
+ <html lang="ja">
24
+
25
+ <head>
26
+
27
+ <meta charset="utf-8">
28
+
29
+ <title>ブランドサイト</title>
30
+
31
+ <link href="css/style.css" rel="stylesheet">
32
+
33
+ </head>
34
+
35
+
36
+
37
+ <body>
38
+
39
+ <header>
40
+
41
+ <div class=""></div>
42
+
43
+ <ul>
44
+
45
+ <li class="lo">Home</li>
46
+
47
+ <li class="lo">About</li>
48
+
49
+ <li class="lo">Product</li>
50
+
51
+ <li class="lo">Online Store</li>
52
+
53
+ <li class="lo">NEWS</li>
54
+
55
+ </ul>
56
+
57
+ </header>
58
+
59
+ <div class="container">
60
+
61
+ <div class="main">
62
+
63
+
64
+
65
+ </div>
66
+
67
+ <div class="consept">
68
+
69
+ <h1>おいしさ際立てる、美しさ</h1>
70
+
71
+ <p>○○県○○市、この地域に構える○○店。
72
+
73
+ 様々な料理に合わせたお皿を提供し、料理のおいしさ、美しさを引き立てます。
74
+
75
+
76
+
77
+
78
+
79
+
80
+
81
+ </p>
82
+
83
+ </div>
84
+
85
+ <div class="About">
86
+
87
+ <h3>About</h3>
88
+
89
+ <p></p>
90
+
91
+ <img src="plate-526603_1920.jpg">
92
+
93
+ </div>
94
+
95
+ <div class="purodakut">
96
+
97
+ <h3>Product</h3>
98
+
99
+ <img src="niz0025-066.jpg">
100
+
101
+
102
+
103
+ </div>
104
+
105
+ <div class="Online"></div>
106
+
107
+ <div class="news"></div>
108
+
109
+ <footer></footer>
110
+
111
+ </div>
112
+
113
+ </body>
114
+
115
+ </html>
116
+
117
+ ```
118
+
119
+
120
+
121
+ ```CSS
122
+
123
+ body{
124
+
125
+ margin: 0;
126
+
127
+ padding: 0;
128
+
129
+ }
130
+
131
+
132
+
133
+
134
+
135
+ ul{
136
+
137
+ text-align:right;
138
+
139
+ padding-right:500px;
140
+
141
+ padding-top:20px;
142
+
143
+ }
144
+
145
+
146
+
147
+ li{
148
+
149
+ display: inline;
150
+
151
+ }
152
+
153
+
154
+
155
+ .lo{
156
+
157
+ padding:0px;
158
+
159
+ margin-right: 30px;
160
+
161
+ }
162
+
163
+
164
+
165
+ li:hover{
166
+
167
+ opacity: 0.5;
168
+
169
+ }
170
+
171
+
172
+
173
+ li{cursor: pointer}
174
+
175
+
176
+
177
+ .main{
178
+
179
+ height: 80vh;
180
+
181
+ background-size:cover;
182
+
183
+ background-image: url(..//tom-chen-6DH6BojClJg-unsplash.jpg);
184
+
185
+ }
186
+
187
+
188
+
189
+ .consept{
190
+
191
+ text-align: center;
192
+
193
+ }
194
+
195
+
196
+
197
+ .About{
198
+
199
+ text-align:right;
200
+
201
+ background-color:rgb(243, 240, 235);
202
+
203
+ }
204
+
205
+
206
+
207
+ .About img{
208
+
209
+ width: 50%;
210
+
211
+ }
212
+
213
+
214
+
215
+ .About h3{
216
+
217
+ text-align:left;
218
+
219
+ padding-top: 20px;
220
+
221
+ }
222
+
223
+
224
+
225
+ img{
226
+
227
+ background-size: 300px;
228
+
229
+
230
+
231
+ }
232
+
233
+
234
+
235
+ .purodakut{
236
+
237
+ text-align: center;
238
+
239
+ }
240
+
241
+
242
+
243
+ .purodaku img{
244
+
245
+ float:left;
246
+
247
+ }
248
+
249
+
250
+
251
+ ```
252
+
253
+
254
+
255
+ ![イメージ説明](fe7bbeb8a648aabed74cf8a5393157ff.png)