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

回答編集履歴

1

追記

2020/07/17 09:32

投稿

wing283
wing283

スコア123

answer CHANGED
@@ -25,4 +25,150 @@
25
25
  width: 48%;
26
26
  margin: 0 0 0 2%;
27
27
  }
28
+ ```
29
+
30
+
31
+ 追記
32
+ ```
33
+
34
+ <div class="container">
35
+ <div class="header-left">
36
+ <a class="logo" href="index.html"><img src="●○○○○●○○○○●○○○○.png"></a>
37
+ </div>
38
+ <div class="header-right">
39
+ <a href="index02.html">●○○○○</a>
40
+ <a href="index03.html">●○○○○</a>
41
+ <a href="index04.html">●○○○○</a>
42
+ <a href="index05.html">●○○○○</a>
43
+ </div>
44
+ </div>
45
+ </header>
46
+
47
+ <div class="content-wrapper">
48
+ <div class="container">
49
+ <div class="heading">
50
+ <h2>●○○○○</h2>
51
+ </div>
52
+ <div class="contents">
53
+
54
+ <div class="content">
55
+ <div class="content-icon">
56
+ <a href="●○○○○"><img src="●○○○○.jpg"></a>
57
+ <p>●○○○○</p>
58
+ </div>
59
+ <div class="content-icon">
60
+ <a href="●○○○○"><img src="●○○○○.jpg"></a>
61
+ <p>●○○○○</p>
62
+ </div>
63
+ <div class="content-icon">
64
+ <a href="●○○○○"><img src="●○○○○.jpg"></a>
65
+ <p>●○○○○</p>
66
+ </div>
67
+ <div class="content-icon">
68
+ <a href="●○○○○"><img src="●○○○○.jpg"></a>
69
+ <p>●○○○○</p>
70
+ </div>
71
+ <div class="content-icon">
72
+ <a href="●○○○○"><img src="●○○○○.jpg"></a>
73
+ <p>●○○○○</p>
74
+ </div>
75
+ <div class="content-icon">
76
+ <a href="●○○○○"><img src="●○○○○.jpg"></a>
77
+ <p>●○○○○</p>
78
+ </div>
79
+ </div>
80
+
81
+ <footer>
82
+ <div class="container">
83
+ <div class="border"></div>
84
+ <div class="footer-left">
85
+ <a href="index02.html">●○○○○</a>
86
+ <a href="index03.html">●○○○○</a>
87
+ <a href="index04.html">●○○○○</a>
88
+ <a href="index05.html">●○○○○</a>
89
+ </div>
90
+ <span class="copy">©️ ●○○○○ 2020
91
+ </span>
92
+ </div>
93
+ </footer>
94
+
95
+ <style>
96
+ .container {
97
+ width: 1170px;
98
+ margin: 0 auto;
99
+ }
100
+ .content-wrapper {
101
+ height: 1550px;
102
+ }
103
+ .content-wrapper img {
104
+ width: 100%;
105
+ height: 330px;
106
+ object-fit: cover;
107
+ }
108
+ .content-wrapper img:hover {
109
+ opacity: 0.7;
110
+ }
111
+ .content-wrapper p {
112
+ padding-top: 10px;
113
+ font-size: 12px;
114
+ color: #5f5d60;
115
+ letter-spacing: 3px;
116
+ }
117
+ .contents {
118
+ display: flex;
119
+ flex-wrap: wrap;
120
+ }
121
+ .content {
122
+ width: 100%;
123
+ font-size: 0;
124
+ }
125
+ .content-icon {
126
+ width: calc( (100% / 6) - 63px);
127
+ margin: 0 75px 0 0;
128
+ display: inline-block;
129
+ }
130
+ .content-icon:last-child {
131
+ margin: 0;
132
+ }
133
+ .content-icon {
134
+ position: relative;
135
+ }
136
+ .content-icon a { display: block;}
137
+ .content-icon p {
138
+ width: 100%;
139
+ text-align: center;
140
+ }
141
+ footer {
142
+ height: 150px;
143
+ padding-bottom: 60px;
144
+
145
+ }
146
+ .border {
147
+ border-top: 1px solid #E0E0E0;
148
+ width: 100%;
149
+
150
+ }
151
+ .footer-left a {
152
+ margin-top: 127px;
153
+ padding-right: 70px;
154
+ color: #5f5d60;
155
+ letter-spacing: 5px;
156
+ display: block;
157
+ float: left;
158
+ transition: all 0.4s;
159
+ font-size: 14px;
160
+ }
161
+ .footer-left a:hover {
162
+ color: dimgray;
163
+ opacity: 0.2;
164
+ }
165
+ .copy {
166
+ color: #5f5d60;
167
+ font-size: 12px;
168
+ letter-spacing: 3px;
169
+ float: right;
170
+ padding-top: 129px;
171
+
172
+ }
173
+ </style>
28
174
  ```