teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

1

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

2020/08/27 09:46

投稿

dreamland
dreamland

スコア43

title CHANGED
File without changes
body CHANGED
@@ -1,9 +1,244 @@
1
- 現在、練習としてポートフォリオを作っております。テキストと画像をdisplay:flex;、justify-content:space-betweenで横並びにしたですが、均等に横に並びません。下の画像のようになってしまいます。
1
+ 現在、練習としてポートフォリオを作っております。display:flex;でテキストと画像を横並びにで実装したですが、上手く動きません。
2
2
 
3
- た、skill_photo5だけ(wordpress画像とテキスト)異様遠く離れて以下のイメージ図のように表示されます。これはどうしょうか?教えてただけると助かります。
3
+ 横並びにするめにskill_boxをdisplay:flex;justify-content:space-betweenにしたです、均等横に並びません。下の画像のようになってしいます。
4
4
 
5
+ また、skill_photo5だけ(wordpressの画像とテキスト、1番右の画像とテキスト)が異様に遠く離れて以下のイメージ図のように表示されます。これはどうしてでしょうか?教えていただけると助かります。
6
+
7
+ もし、display:flex;で実装するのが難しければ他のコードの書き方を伝授していただければ助かります。
8
+
5
9
  練習中ですので、優しく伝授してもらえればと思います。
6
10
  よろしくお願いたします。
7
11
 
8
12
 
9
- ![イメージ説明](eb6923803ca3fd3f0ce9a7c621a48540.png)
13
+ ![イメージ説明](eb6923803ca3fd3f0ce9a7c621a48540.png)
14
+
15
+ ```HTML
16
+ <!DOCTYPE html>
17
+ <html lang="ja">
18
+
19
+ <head>
20
+ <meta charset="UTF-8">
21
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
22
+ <link rel="stylesheet" href="stylesheet.css">
23
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.1.0/css/drawer.min.css">
24
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
25
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.1.3/iscroll.min.js"></script>
26
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.1.0/js/drawer.min.js"></script>
27
+ <script src="script.js"></script>
28
+ <title>My portfolio</title>
29
+ </head>
30
+
31
+ <body>
32
+ <div class="wrap">
33
+ <header>
34
+ <div class="header_wrapper">
35
+ <!-- グローバルメニュー -->
36
+ <nav class="drawer_nav">
37
+ <ul class="drawer_menu">
38
+ <li><a href="#">HOME</a></li>
39
+ <li><a href="#">ABOUT ME</a></li>
40
+ <li><a href="#">WORKS</a></li>
41
+ <li><a href="#">SKILLS</a></li>
42
+ <li><a href="#">CONTACT</a></li>
43
+ </ul>
44
+ </nav>
45
+ <h1>Welcome to My portfolio</h1>
46
+ <video id="video" playsinline autoplay loop muted>
47
+ <source src="img/Computer.mp4" type="video/mp4">
48
+ </video>
49
+ </div>
50
+ </header>
51
+ <!-- プロフィール -->
52
+ <div class="about_me">
53
+ <div class="portfolio_box">
54
+ <div class="portfolio-right">
55
+ <img src="img/profile_img.JPG" alt="プロフィール写真">
56
+ </div>
57
+ <div class="portfolio-left">
58
+ <div class="portfolio-text">
59
+ <div class="portfolio_title">
60
+ <h2>About Me</h2>
61
+ </div>
62
+ <div class="text">
63
+ <p>xxxxxx</p>
64
+ <p>xxxxxxxxxxxxx</p>
65
+ <p>xxxxxxxxxxxxxxxxxxxxxx </p>
66
+ <p>xxxxxxxxxxxxxxxxxxxxxxxxx</p>
67
+ <p>xxxxxxxxxxxxxx</p>
68
+ </div>
69
+ </div>
70
+ </div>
71
+ </div>
72
+ </div>
73
+ <div class="skills">
74
+ <div class="title">Skills</div>
75
+ <div class="skill_box">
76
+ <div class="skill-item">
77
+ <h3>HTML</h3>
78
+ <img src="img/HTML.png" alt="HTML" class="skill_photo1">
79
+ </div>
80
+ <div class="skill-item">
81
+ <h3>CSS</h3>
82
+ <img src="img/CSS.png" alt="CSS" class="skill_photo2">
83
+ </div>
84
+ <div class="skill-item">
85
+ <h3>jQuery</h3>
86
+ <img src="img/jQuery.png" alt="jQuery" class="skill_photo3">
87
+ </div>
88
+ <div class="skill-item">
89
+ <h3>Javascript</h3>
90
+ <img src="img/Javascript.jpg" alt="Javascript" class="skill_photo4">
91
+ </div>
92
+ <div class="skill-item">
93
+ <h3>Wordpress</h3>
94
+ <img src="img/Wordpress.png" alt ="Wordpress" class="skill_photo5">
95
+ </div>
96
+ </div>
97
+ </div>
98
+ </div>
99
+ </body>
100
+
101
+ </html>
102
+ ```
103
+
104
+ ```CSS
105
+ *{
106
+ box-sizing: border-box;
107
+ }
108
+ body{
109
+ margin:0;
110
+ padding:0;
111
+ font:'Times Roman News','serif','Times'
112
+ }
113
+ .header-wrapper{
114
+ position: relative;
115
+ }
116
+ h1{
117
+ position:absolute;
118
+ color:#fff;
119
+ text-align: center;
120
+ top:50%;
121
+ left:27%;
122
+ transform:(-50%,-27%);
123
+ font-size:50px;
124
+
125
+ }
126
+ .drawer_nav{
127
+ width:100%;
128
+ padding:20px;
129
+ background-color: rgba(0,0,0,0.80);
130
+ }
131
+ .drawer_menu{
132
+ display: flex;
133
+ justify-content: space-evenly;
134
+ margin:0;
135
+ }
136
+ .drawer_menu li {
137
+ list-style: none;
138
+ text-decoration: none;
139
+ }
140
+ .drawer_menu li a {
141
+ color:white;
142
+ text-decoration: none;
143
+ }
144
+
145
+ #video{
146
+ background:url('img/Computer.mp4');
147
+ vertical-align: bottom;
148
+ width:100%;
149
+ height:100%;
150
+ background-size:cover;
151
+ }
152
+ .toggle-btn{
153
+ background:url('img/menu_icon.png')
154
+ }
155
+
156
+ .about_me{
157
+ height: 500px;
158
+ background-color: #B0B0B0;
159
+
160
+ }
161
+
162
+ .portfolio_box{
163
+ display:flex;
164
+ padding:100px;
165
+
166
+
167
+ }
168
+ .portfolio_title h2{
169
+ margin:0;
170
+ font-size:30px;
171
+ padding-bottom:20px;
172
+ }
173
+ .text{
174
+ padding-bottom:20px;
175
+
176
+ }
177
+ .portfolio-right{
178
+ text-align:center;
179
+
180
+ }
181
+
182
+ .portfolio-right img{
183
+ height:50%;
184
+ border-radius:55%;
185
+ }
186
+ .portfolio-left{
187
+ width:50%;
188
+ text-align: left;
189
+ }
190
+ .skills{
191
+ background:url('img/skills.jpg');
192
+ background-size: cover;
193
+ height:700px;
194
+
195
+ }
196
+ .title{
197
+ text-align: center;
198
+ font-size:30px;
199
+ font:'Times Roman News','serif','Times';
200
+ padding:30px;
201
+ font-weight:700;
202
+ }
203
+ .skill_box{
204
+ display:flex;
205
+ text-align:center;
206
+ justify-content: space-between;
207
+ margin:30px;
208
+
209
+ }
210
+
211
+ .skill-item{
212
+ flex:none;
213
+
214
+ }
215
+
216
+ .skill_photo1{
217
+ max-width:50%;
218
+ height:auto;
219
+
220
+ }
221
+ .skill_photo2{
222
+ max-width:100%;
223
+ height:auto;
224
+
225
+
226
+ }
227
+ .skill_photo3{
228
+ max-width:50%;
229
+ height:auto;
230
+
231
+
232
+ }
233
+ .skill_photo4{
234
+ max-width:90%;
235
+ height:auto;
236
+
237
+
238
+
239
+ }
240
+ .skill_photo5{
241
+ max-width:25%;
242
+ height:auto;
243
+ }
244
+ ```