質問編集履歴

1

コードを書き忘れていたので、追加いたしました。

2020/08/27 09:46

投稿

dreamland
dreamland

スコア43

test CHANGED
File without changes
test CHANGED
@@ -1,8 +1,16 @@
1
+ 現在、練習としてポートフォリオを作っております。display:flex;でテキストと画像を横並びにで実装したいですが、上手く動きません。
2
+
3
+
4
+
1
- 現在、練習としてポートフォリオを作っておりま。テキストと画像をdisplay:flex;、justify-content:space-betweenで横並びにしたのですが、均等に横に並びません。下の画像のようになってしまいます。
5
+ 横並びにるためにskill_boxをdisplay:flex;、justify-content:space-betweenにしたのですが、均等に横に並びません。下の画像のようになってしまいます。
2
-
3
-
4
-
6
+
7
+
8
+
5
- また、skill_photo5だけ(wordpressの画像とテキスト)が異様に遠く離れて以下のイメージ図のように表示されます。これはどうしてでしょうか?教えていただけると助かります。
9
+ また、skill_photo5だけ(wordpressの画像とテキスト、1番右の画像とテキスト)が異様に遠く離れて以下のイメージ図のように表示されます。これはどうしてでしょうか?教えていただけると助かります。
10
+
11
+
12
+
13
+ もし、display:flex;で実装するのが難しければ他のコードの書き方を伝授していただければ助かります。
6
14
 
7
15
 
8
16
 
@@ -15,3 +23,465 @@
15
23
 
16
24
 
17
25
  ![イメージ説明](eb6923803ca3fd3f0ce9a7c621a48540.png)
26
+
27
+
28
+
29
+ ```HTML
30
+
31
+ <!DOCTYPE html>
32
+
33
+ <html lang="ja">
34
+
35
+
36
+
37
+ <head>
38
+
39
+ <meta charset="UTF-8">
40
+
41
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
42
+
43
+ <link rel="stylesheet" href="stylesheet.css">
44
+
45
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.1.0/css/drawer.min.css">
46
+
47
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
48
+
49
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.1.3/iscroll.min.js"></script>
50
+
51
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.1.0/js/drawer.min.js"></script>
52
+
53
+ <script src="script.js"></script>
54
+
55
+ <title>My portfolio</title>
56
+
57
+ </head>
58
+
59
+
60
+
61
+ <body>
62
+
63
+ <div class="wrap">
64
+
65
+ <header>
66
+
67
+ <div class="header_wrapper">
68
+
69
+ <!-- グローバルメニュー -->
70
+
71
+ <nav class="drawer_nav">
72
+
73
+ <ul class="drawer_menu">
74
+
75
+ <li><a href="#">HOME</a></li>
76
+
77
+ <li><a href="#">ABOUT ME</a></li>
78
+
79
+ <li><a href="#">WORKS</a></li>
80
+
81
+ <li><a href="#">SKILLS</a></li>
82
+
83
+ <li><a href="#">CONTACT</a></li>
84
+
85
+ </ul>
86
+
87
+ </nav>
88
+
89
+ <h1>Welcome to My portfolio</h1>
90
+
91
+ <video id="video" playsinline autoplay loop muted>
92
+
93
+ <source src="img/Computer.mp4" type="video/mp4">
94
+
95
+ </video>
96
+
97
+ </div>
98
+
99
+ </header>
100
+
101
+ <!-- プロフィール -->
102
+
103
+ <div class="about_me">
104
+
105
+ <div class="portfolio_box">
106
+
107
+ <div class="portfolio-right">
108
+
109
+ <img src="img/profile_img.JPG" alt="プロフィール写真">
110
+
111
+ </div>
112
+
113
+ <div class="portfolio-left">
114
+
115
+ <div class="portfolio-text">
116
+
117
+ <div class="portfolio_title">
118
+
119
+ <h2>About Me</h2>
120
+
121
+ </div>
122
+
123
+ <div class="text">
124
+
125
+ <p>xxxxxx</p>
126
+
127
+ <p>xxxxxxxxxxxxx</p>
128
+
129
+ <p>xxxxxxxxxxxxxxxxxxxxxx </p>
130
+
131
+ <p>xxxxxxxxxxxxxxxxxxxxxxxxx</p>
132
+
133
+ <p>xxxxxxxxxxxxxx</p>
134
+
135
+ </div>
136
+
137
+ </div>
138
+
139
+ </div>
140
+
141
+ </div>
142
+
143
+ </div>
144
+
145
+ <div class="skills">
146
+
147
+ <div class="title">Skills</div>
148
+
149
+ <div class="skill_box">
150
+
151
+ <div class="skill-item">
152
+
153
+ <h3>HTML</h3>
154
+
155
+ <img src="img/HTML.png" alt="HTML" class="skill_photo1">
156
+
157
+ </div>
158
+
159
+ <div class="skill-item">
160
+
161
+ <h3>CSS</h3>
162
+
163
+ <img src="img/CSS.png" alt="CSS" class="skill_photo2">
164
+
165
+ </div>
166
+
167
+ <div class="skill-item">
168
+
169
+ <h3>jQuery</h3>
170
+
171
+ <img src="img/jQuery.png" alt="jQuery" class="skill_photo3">
172
+
173
+ </div>
174
+
175
+ <div class="skill-item">
176
+
177
+ <h3>Javascript</h3>
178
+
179
+ <img src="img/Javascript.jpg" alt="Javascript" class="skill_photo4">
180
+
181
+ </div>
182
+
183
+ <div class="skill-item">
184
+
185
+ <h3>Wordpress</h3>
186
+
187
+ <img src="img/Wordpress.png" alt ="Wordpress" class="skill_photo5">
188
+
189
+ </div>
190
+
191
+ </div>
192
+
193
+ </div>
194
+
195
+ </div>
196
+
197
+ </body>
198
+
199
+
200
+
201
+ </html>
202
+
203
+ ```
204
+
205
+
206
+
207
+ ```CSS
208
+
209
+ *{
210
+
211
+ box-sizing: border-box;
212
+
213
+ }
214
+
215
+ body{
216
+
217
+ margin:0;
218
+
219
+ padding:0;
220
+
221
+ font:'Times Roman News','serif','Times'
222
+
223
+ }
224
+
225
+ .header-wrapper{
226
+
227
+ position: relative;
228
+
229
+ }
230
+
231
+ h1{
232
+
233
+ position:absolute;
234
+
235
+ color:#fff;
236
+
237
+ text-align: center;
238
+
239
+ top:50%;
240
+
241
+ left:27%;
242
+
243
+ transform:(-50%,-27%);
244
+
245
+ font-size:50px;
246
+
247
+
248
+
249
+ }
250
+
251
+ .drawer_nav{
252
+
253
+ width:100%;
254
+
255
+ padding:20px;
256
+
257
+ background-color: rgba(0,0,0,0.80);
258
+
259
+ }
260
+
261
+ .drawer_menu{
262
+
263
+ display: flex;
264
+
265
+ justify-content: space-evenly;
266
+
267
+ margin:0;
268
+
269
+ }
270
+
271
+ .drawer_menu li {
272
+
273
+ list-style: none;
274
+
275
+ text-decoration: none;
276
+
277
+ }
278
+
279
+ .drawer_menu li a {
280
+
281
+ color:white;
282
+
283
+ text-decoration: none;
284
+
285
+ }
286
+
287
+
288
+
289
+ #video{
290
+
291
+ background:url('img/Computer.mp4');
292
+
293
+ vertical-align: bottom;
294
+
295
+ width:100%;
296
+
297
+ height:100%;
298
+
299
+ background-size:cover;
300
+
301
+ }
302
+
303
+ .toggle-btn{
304
+
305
+ background:url('img/menu_icon.png')
306
+
307
+ }
308
+
309
+
310
+
311
+ .about_me{
312
+
313
+ height: 500px;
314
+
315
+ background-color: #B0B0B0;
316
+
317
+
318
+
319
+ }
320
+
321
+
322
+
323
+ .portfolio_box{
324
+
325
+ display:flex;
326
+
327
+ padding:100px;
328
+
329
+
330
+
331
+
332
+
333
+ }
334
+
335
+ .portfolio_title h2{
336
+
337
+ margin:0;
338
+
339
+ font-size:30px;
340
+
341
+ padding-bottom:20px;
342
+
343
+ }
344
+
345
+ .text{
346
+
347
+ padding-bottom:20px;
348
+
349
+
350
+
351
+ }
352
+
353
+ .portfolio-right{
354
+
355
+ text-align:center;
356
+
357
+
358
+
359
+ }
360
+
361
+
362
+
363
+ .portfolio-right img{
364
+
365
+ height:50%;
366
+
367
+ border-radius:55%;
368
+
369
+ }
370
+
371
+ .portfolio-left{
372
+
373
+ width:50%;
374
+
375
+ text-align: left;
376
+
377
+ }
378
+
379
+ .skills{
380
+
381
+ background:url('img/skills.jpg');
382
+
383
+ background-size: cover;
384
+
385
+ height:700px;
386
+
387
+
388
+
389
+ }
390
+
391
+ .title{
392
+
393
+ text-align: center;
394
+
395
+ font-size:30px;
396
+
397
+ font:'Times Roman News','serif','Times';
398
+
399
+ padding:30px;
400
+
401
+ font-weight:700;
402
+
403
+ }
404
+
405
+ .skill_box{
406
+
407
+ display:flex;
408
+
409
+ text-align:center;
410
+
411
+ justify-content: space-between;
412
+
413
+ margin:30px;
414
+
415
+
416
+
417
+ }
418
+
419
+
420
+
421
+ .skill-item{
422
+
423
+ flex:none;
424
+
425
+
426
+
427
+ }
428
+
429
+
430
+
431
+ .skill_photo1{
432
+
433
+ max-width:50%;
434
+
435
+ height:auto;
436
+
437
+
438
+
439
+ }
440
+
441
+ .skill_photo2{
442
+
443
+ max-width:100%;
444
+
445
+ height:auto;
446
+
447
+
448
+
449
+
450
+
451
+ }
452
+
453
+ .skill_photo3{
454
+
455
+ max-width:50%;
456
+
457
+ height:auto;
458
+
459
+
460
+
461
+
462
+
463
+ }
464
+
465
+ .skill_photo4{
466
+
467
+ max-width:90%;
468
+
469
+ height:auto;
470
+
471
+
472
+
473
+
474
+
475
+
476
+
477
+ }
478
+
479
+ .skill_photo5{
480
+
481
+ max-width:25%;
482
+
483
+ height:auto;
484
+
485
+ }
486
+
487
+ ```