質問編集履歴

3

修正

2022/08/16 02:46

投稿

tak_78910
tak_78910

score6

test CHANGED
File without changes
test CHANGED
@@ -4,6 +4,7 @@
4
4
 
5
5
  ### 実現したいこと
6
6
  linear-gradientを反映させたいのですが、どうしたら反映できますか?
7
+ HTMLとCSSに詳しい方すみませんが、宜しくお願いします
7
8
  ### 発生している問題・エラーメッセージ
8
9
 
9
10
  ```

2

足りないところの修正

2022/08/16 02:40

投稿

tak_78910
tak_78910

score6

test CHANGED
File without changes
test CHANGED
@@ -20,18 +20,156 @@
20
20
  CSS3
21
21
  ソースコード
22
22
  ```
23
+ .progress-area .progress-bar{
24
+ height: inherit;
25
+ width: 50%;
26
+ border-radius: inherit;
27
+ background: linear-gradient(90deg, var(--pink) 0%, var(--violet) 100%);;
28
+ }
23
29
 
24
30
  ###全て書き直しました。
25
31
 
26
32
  ここに問題に対して試したことを記載してください。
27
- ````ここに言語を入力
33
+ ````HTML5
28
34
  コード
35
+ <!DOCTYPE html>
36
+ <!-- Coding By Tak -->
37
+ <html lang="en">
38
+ <head>
39
+ <meta charset="UTF-8">
40
+ <meta namae="viewport" content="width=device-width, initial-scale=1.0">
41
+ <title>Music Player | Tak</title>
42
+ <link rel="stylesheet" href="style.css">
43
+ <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
44
+ </head>
45
+ <body>
46
+ <div class="wrapper">
47
+ <div class="top-bar">
48
+ <i class="material-icons">expand_more</i>
49
+ <span>Now Playing</span>
50
+ <i class="material-icons">more_horiz</i>
51
+ </div><!-- .top-bar -->
52
+ <div class="img-area">
53
+ <img src="images/music-1.jpg" alt="">
54
+ </div><!-- .img-area -->
55
+ <div class="song-details">
56
+ <p class="name">Beauz & Jvna - Crazy</p>
57
+ <p class="artist">Beauz & Jvna</p>
58
+ </div><!-- .song-details -->
59
+ <div class="progress-area">
60
+ <div class="progress-bar">
61
+ <span></span>
62
+ </div><!-- .progress-bar -->
63
+ <div class="timer">
64
+ <span class="current">0:20</span>
65
+ <span class="current">3:40</span>
66
+ </div><!-- .timer -->
67
+ </div><!-- .progress-area -->
68
+ <div class="controls">
69
+ <i id="repeat-plist" class="material-icons">repeat</i>
70
+ <i id="prev" class="material-icons">skip_previous</i>
71
+ <div class="play-pause">
72
+ <i class="material-icons">play_arrow</i>
73
+ </div><!-- .play-pause -->
74
+ <i id="next" class="material-icons">skip_next</i>
75
+ <i id="more-music" class="material-icons">queue_music</i>
76
+ </div><!-- .controls -->
77
+ </div><!-- .wrapper -->
78
+ </body>
79
+ </html>
29
80
  ```ここに言語を入力
30
81
  ここに言語を入力
31
82
  ```
32
- ここに言語を入力
83
+ CSS3
33
84
  ```
85
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
34
- コード
86
+ *{
87
+ margin: 0;
88
+ padding: 0;
89
+ box-sizing: border-box;
90
+ font-family: 'Poppins', sans-serif;
91
+ }
92
+ *::before, *::after{
93
+ padding: 0;
94
+ margin: 0;
95
+ }
96
+ :root{
97
+ --pink: #ff74a4a;
98
+ --violet: #8f6ea3;
99
+ --lightblack: #515C6F;
100
+ --white: #fff;
101
+ --darkwhite: #cecaca;
102
+ --pinkshadow: #ffcbdd;
103
+ --lightbshadow: rgba(0,0,0,0.15);
104
+ }
105
+ body{
106
+ display: flex;
107
+ align-items: center;
108
+ justify-content: center;
109
+ min-height: 100vh;
110
+ }
111
+ .wrapper{
112
+ width: 380px;
113
+ border-radius: 15px;
114
+ padding: 25px 30px;
115
+ background: var(--white);
116
+ box-shadow: 0px 6px 15px var(--lightbshadow);
117
+ }
118
+ .wrapper i{
119
+ cursor: pointer;
120
+ }
121
+ .top-bar{
122
+ display: flex;
123
+ align-items: center;
124
+ justify-content: space-between;
125
+ }
126
+ .top-bar i{
127
+ font-size: 30px;
128
+ color: var(--lightblack);
129
+ }
130
+ .top-bar span{
131
+ font-size: 18px;
132
+ color: var(--lightblack);
133
+ }
134
+ .img-area{
135
+ height: 256px;
136
+ width: 100%;
137
+ margin-top: 25px;
138
+ overflow: hidden;
139
+ border-radius: 15px;
140
+ box-shadow: 0px 6px 12px var(--lightbshadow);
141
+ }
142
+ .img-area img{
143
+ height: 100%;
144
+ width: 100%;
145
+ object-fit: cover;
146
+ }
147
+ .song-details{
148
+ text-align: center;
149
+ margin: 10px 0;
150
+ margin: 30px 0;
151
+ color: var(--lightblack);
152
+ }
153
+ .song-details .name{
154
+ font-size: 21px;
155
+ }
156
+ .song-details .artist{
157
+ opacity: 0.9;
158
+ font-size: 18px;
159
+ }
160
+ .progress-area{
161
+ height: 6px;
162
+ width: 100%;
163
+ background: #f0f0f0;
164
+ border-radius: 50px;
165
+ cursor: pointer;
166
+ }
167
+ .progress-area .progress-bar{
168
+ height: inherit;
169
+ width: 50%;
170
+ border-radius: inherit;
171
+ background: linear-gradient(90deg, var(--pink) 0%, var(--violet) 100%);;
172
+ }
35
173
  ```ここに言語を入力
36
174
  ここに言語を入力
37
175
  ```

1

質問のやり方がわからなかった

2022/08/16 02:37

投稿

tak_78910
tak_78910

score6

test CHANGED
File without changes
test CHANGED
@@ -24,7 +24,25 @@
24
24
  ###全て書き直しました。
25
25
 
26
26
  ここに問題に対して試したことを記載してください。
27
-
27
+ ````ここに言語を入力
28
+ コード
29
+ ```ここに言語を入力
30
+ ここに言語を入力
31
+ ```
32
+ ここに言語を入力
33
+ ```
34
+ コード
35
+ ```ここに言語を入力
36
+ ここに言語を入力
37
+ ```
38
+ ここに言語を入力
39
+ ```
40
+ ここに言語を入力
41
+ ```
42
+ ここに言語を入力
43
+ ```
44
+ コード
45
+ ```
28
46
  ### 補足情報(FW/ツールのバージョンなど)
29
47
 
30
48
  ここにより詳細な情報を記載してください。