質問編集履歴
1
htmlも書きました
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
javascript css移動する画像とメニューバー
|
|
1
|
+
javascript css HTML 移動する画像とメニューバー
|
body
CHANGED
|
@@ -19,6 +19,9 @@
|
|
|
19
19
|
ul.style.transform = 'translateX(-200px)';
|
|
20
20
|
});
|
|
21
21
|
}
|
|
22
|
+
|
|
23
|
+
CSS
|
|
24
|
+
|
|
22
25
|
body{
|
|
23
26
|
margin:0;
|
|
24
27
|
font-family: Verdana,sans-serif;
|
|
@@ -136,4 +139,59 @@
|
|
|
136
139
|
right: 0;
|
|
137
140
|
}
|
|
138
141
|
|
|
142
|
+
|
|
143
|
+
HTML
|
|
144
|
+
|
|
145
|
+
<!DOCTYPE html>
|
|
146
|
+
<html lang="ja" dir="ltr">
|
|
147
|
+
<head>
|
|
148
|
+
<meta charset="utf-8">
|
|
149
|
+
<link rel="stylesheet" href="stylesheet.css">
|
|
150
|
+
<link rel="shortcut icon" href="image/watermark.jpeg">
|
|
151
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
152
|
+
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
|
153
|
+
<title>洗足池運輸株式会社</title>
|
|
154
|
+
</head>
|
|
155
|
+
<body>
|
|
156
|
+
<header>
|
|
157
|
+
<div class="logo">
|
|
158
|
+
<h1>洗足池運輸 株式会社</h1>
|
|
159
|
+
</div>
|
|
160
|
+
<div class="sp-menu">
|
|
161
|
+
<span class="material-icons" id="open">menu</span>
|
|
162
|
+
</div>
|
|
163
|
+
</header>
|
|
164
|
+
<div class="overlay">
|
|
165
|
+
<span class="material-icons" id="close">close</span>
|
|
166
|
+
<nav>
|
|
167
|
+
<ul>
|
|
168
|
+
<li><a href="#">about</a></li>
|
|
169
|
+
<li><a href="#">consept</a></li>
|
|
170
|
+
</ul>
|
|
171
|
+
</nav>
|
|
172
|
+
</div>
|
|
173
|
+
<div class="container">
|
|
174
|
+
<ul>
|
|
175
|
+
<li><img src="image/main_img01.jpg" alt=""></li>
|
|
176
|
+
<li><img src="image/main_img02.jpg" alt=""></li>
|
|
177
|
+
<li><img src="image/main_img.jpg" alt=""></li>
|
|
178
|
+
</ul>
|
|
179
|
+
|
|
180
|
+
<button id="prev">«</button>
|
|
181
|
+
<button id="next">»</button>
|
|
182
|
+
</div>
|
|
183
|
+
|
|
184
|
+
|
|
185
|
+
|
|
186
|
+
|
|
187
|
+
|
|
188
|
+
|
|
189
|
+
|
|
190
|
+
|
|
191
|
+
|
|
192
|
+
|
|
193
|
+
<script src="main.js"></script>
|
|
194
|
+
</body>
|
|
195
|
+
</html>
|
|
196
|
+
|
|
139
197
|
こちらのコード使って背景を透過するメニューバーとボタンを押すと画像が移動するを作りたいのですがheaderは消えるのですが画像が消えませんあと写真も移動しません誰か教えてくださいお願いします
|