質問編集履歴

1

HTML,CSSを記載致しました。

2020/08/27 06:02

投稿

kawakamikami1
kawakamikami1

スコア11

test CHANGED
File without changes
test CHANGED
@@ -9,3 +9,149 @@
9
9
 
10
10
 
11
11
  ![イメージ説明](39e20a82a3757b44a88c510556018b84.png)
12
+
13
+
14
+
15
+ ### HTML
16
+
17
+ ```HTML
18
+
19
+ <!DOCTYPE html>
20
+
21
+ <html>
22
+
23
+ <head>
24
+
25
+ <meta charset="utf-8">
26
+
27
+ <meta name="viewport" content="width=device-width,initial-scale=1.0">
28
+
29
+ <title>金曜日(仮)</title>
30
+
31
+ <link rel="stylesheet" href="stylesheet.compact.css">
32
+
33
+ <link href="https://fonts.googleapis.com/css?family=Open+Sans:700&display=swap" rel="stylesheet">
34
+
35
+ <link rel="icon" href="img/favicon.ico">
36
+
37
+ <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
38
+
39
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
40
+
41
+ <script type="text/javascript" src="js/script.js"></script>
42
+
43
+ <script src="https://kit.fontawesome.com/646ee2a69d.js" crossorigin="anonymous"></script>
44
+
45
+
46
+
47
+ </head>
48
+
49
+
50
+
51
+
52
+
53
+ <body>
54
+
55
+
56
+
57
+
58
+
59
+ <div class="page">
60
+
61
+ <div class="container">
62
+
63
+ <div class="top-btn">
64
+
65
+ <div class="Genre">
66
+
67
+ <a class="Genre-btn" href=""></a>
68
+
69
+ <a class="Genre-btn" href=""></a>
70
+
71
+ <a class="Genre-btn" href=""></a>
72
+
73
+ <a class="Genre-btn" href=""></a>
74
+
75
+ </div>
76
+
77
+ <div class="rank">
78
+
79
+ <a class="rank-btn" href=""></a>
80
+
81
+ </div>
82
+
83
+ </div>
84
+
85
+
86
+
87
+ </div>
88
+
89
+ </div>
90
+
91
+
92
+
93
+
94
+
95
+
96
+
97
+ </body>
98
+
99
+ </html>
100
+
101
+ ```
102
+
103
+
104
+
105
+
106
+
107
+
108
+
109
+
110
+
111
+
112
+
113
+
114
+
115
+
116
+
117
+
118
+
119
+
120
+
121
+ ### CSS
122
+
123
+ ```CSS
124
+
125
+ .page { background-color: #e0f5f7; }
126
+
127
+
128
+
129
+ .container { background-color: white; padding-top: 10px; max-width: 1170px; }
130
+
131
+
132
+
133
+ .top-btn { display: flex; }
134
+
135
+
136
+
137
+ .Genre { display: flex; align-items: center; justify-content: center; }
138
+
139
+
140
+
141
+ .Genre-btn { color: white; font-size: 18px; font-weight: 600; text-decoration: none; background-color: #7e9fe2; width: 163px; height: 50px; border-radius: 20px; text-align: center; margin-right: 60px; }
142
+
143
+
144
+
145
+ .Genre-btn:nth-of-type(4) { margin-right: 30px; }
146
+
147
+
148
+
149
+ .rank { display: flex; align-items: center; justify-content: center; margin: 0 0 0 auto; }
150
+
151
+
152
+
153
+ .rank-btn { color: white; font-size: 18px; font-weight: 600; text-decoration: none; background-color: #7c7c7c; width: 260px; height: 50px; border-radius: 20px; text-align: center; }
154
+
155
+
156
+
157
+ ```