-
Notifications
You must be signed in to change notification settings - Fork 0
/
products.html
372 lines (371 loc) · 18.5 KB
/
products.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>APPLE BERRY</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="VAF./SYAM"><!-- 誰が作ったの？を明記 -->
<meta name="copyright" content="© VAF. All rights reserved."><!-- 権利を主張 -->
<meta name="robots" content="noindex,nofollow"><!-- 検索されたくないからそれを明記 -->
<meta name="googlebot" content="noindex,nofollow"><!-- 検索されたくないからそれを明記 -->
<meta http-equiv="pragma" content="no-cache"><!-- キャッシュ対策 -->
<meta http-equiv="cache-control" content="no-cache"><!-- キャッシュ対策 -->
<meta http-equiv="expires" content="0"><!-- キャッシュ対策 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- IEが互換モードにならないように -->
<meta http-equiv="Content-Script-Type" content="text/javascript;"><!-- JS使いますよ。の宣言 -->
<meta http-equiv="Content-Style-Type" content="text/css;"><!-- CSS使いますよ。の宣言 -->
<!-- IE9以下でメディアクエリを使えるように -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<link rel="stylesheet" href="./css/sp_init_2nd.css" media="(max-width: 549px)"><!-- SP用のCSSをパッケージ化 -->
<link rel="stylesheet" href="./css/pc_init_2nd.css" media="print,screen and (min-width: 550px)"><!-- PC用のCSSをパッケージ化 -->
<link rel="icon" href="./image/favicon.png"><!-- fabiconの指定 -->
<link rel="apple-touch-icon" href="./image/apple-touch-icon"><!-- SPブックマーク用の指定 -->
<link rel="shortcut icon" href="./image/favicon.ico" type="image/vnd.microsoft.ico"><!-- fabiconの指定 -->
<link rev="made" href="mailto:s-yamada@va-f.co.jp"><!-- 作った人の連絡先 -->
<link rel="home" href="./" title="APPLE BERRY"><!-- どこがHOMEなのかを明記 -->
</head>
<body id="SHOPPING_SITE_TOP">
<header class="container">
<div class="row">
<h1 id="logo" class="four columns">
<a href="./" title="APPLE BERRY">
<img src="image/common/logo.png" alt="APPLE BERRY" />
</a>
</h1>
<nav class="eight columns">
<ul id="sp_menu">
<li>
<a href="http://www.facebook.com/" target="_blank" title="Facebook">
<i class="fa fa-facebook-official" aria-hidden="true"></i>
</a>
</li>
<li>
<a href="http://www.instagram.com/" target="_blank" title="Instagram">
<i class="fa fa-instagram" aria-hidden="true"></i>
</a>
</li>
<li id="sp_menu_button">
<i class="fa fa-bars" aria-hidden="true"></i>
</li>
</ul>
<ul id="pc_menu" style="display: none;">
<li>
<a href="#">
<span class="pc_menu_txt">LOGIN</span>
<span class="sp_menu_txt">LOGIN</span>
</a>
</li>
<li>
<a href="#">
<span class="pc_menu_txt">CART</span>
<span class="sp_menu_txt">CART</span>
</a>
</li>
<li>
<a href="#">
<span class="pc_menu_txt">MY PAGE</span>
<span class="sp_menu_txt">MY PAGE</span>
</a>
</li>
<li>
<a href="#">
<span class="pc_menu_txt">SHOPPING GUIDE</span>
<span class="sp_menu_txt">SHOPPING GUIDE</span>
</a>
</li>
<li class="social_link">
<a href="http://www.facebook.com/" target="_blank" title="Facebook">
<i class="fa fa-facebook-official" aria-hidden="true"></i>
</a>
</li>
<li class="social_link">
<a href="http://www.instagram.com/" target="_blank" title="Instagram">
<i class="fa fa-instagram" aria-hidden="true"></i>
</a>
</li>
</ul>
</nav>
</div>
</header>
<main class="container">
<section class="row">
<div id="main_field" class="nine columns">
<nav id="pank">
<ul>
<li>
<a href="index.html">
<i class="fa fa-home" aria-hidden="true"></i>
HOME
</a>
</li>
<li>
<a href="list.html">カテゴリー名</a>
</li>
<li>
<a href="#"> 商品名 </a>
</li>
</ul>
</nav>
<div id="products_box">
<h2 id="products_name" class="clearfix">
商品名が入ります
<span id="products_id">fa0001-91</span>
</h2>
<div id="products_pics" class="clearfix">
<div id="main_view">
<img src="image/products/pro_img_01.jpg" alt="商品画像-1">
</div>
<ul id="pict_list" class="clearfix">
<li><a href="#"><img src="image/products/pro_img_01.jpg" alt="商品画像-1"></a></li>
<li><a href="#"><img src="image/products/pro_img_02.jpg" alt="商品画像-2"></a></li>
<li><a href="#"><img src="image/products/pro_img_03.jpg" alt="商品画像-3"></a></li>
<li><a href="#"><img src="image/products/pro_img_04.jpg" alt="商品画像-4"></a></li>
<li><a href="#"><img src="image/products/pro_img_05.jpg" alt="商品画像-5"></a></li>
<li><img src="image/products/null.gif" alt></a></li>
<li><img src="image/products/null.gif" alt></a></li>
<li><img src="image/products/null.gif" alt></a></li>
<li><img src="image/products/null.gif" alt></a></li>
<li><img src="image/products/null.gif" alt></a></li>
</ul>
</div>
<form name="shopping_box" action="#" method="post" id="cart_box" class="clearfix">
<h3>COLOR / SIZE</h3>
<table>
<thead>
<tr>
<th> </th>
<th>カラー1</th>
<th>カラー2</th>
</tr>
</thead>
<tbody>
<tr>
<th>サイズ1</th>
<td><input type="checkbox" name="size_a" value="col_a"></td>
<td><input type="checkbox" name="size_a" value="col_b"></td>
</tr>
</tbody>
</table>
<div id="price_data" class="form_wrap">
<h3>PRICE</h3>
<div id="price_wrap">
<strong><span class="sub_data">¥</span>1000</strong>
<span class="sub_data">(tax in)</span>
<input type="hidden" name="price_data" value="1000">
</div>
</div>
<div id="form_wrapper">
<div id="quantity_data" class="form_wrap">
<h3>Quantity</h3>
<div id="quantity_wrap">
<input type="text" name="quantity_data" value="1">
</div>
</div>
</div>
<div id="btn_cart">
<input type="image" src="image/common/add_to_cart.png">
</div>
</form>
<div id="products_detail">
<h2>商品説明</h2>
<h3>■説明タイトル説明タイトル説明タイトル</h3>
<p>説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト</p>
<table>
<tbody>
<tr>
<th>カラー</th>
<td>説明文が入ります説明文が入ります</td>
</tr>
<tr>
<th>サイズ</th>
<td>説明文が入ります説明文が入ります</td>
</tr>
</tbody>
</table>
</div>
<div id="watch_items_list" class="item_list">
<h2>
<span>最近見た商品</span>
</h2>
<ul class="clearfix">
<li>
<a href="#">
<div class="item_pict">
<img src="image/item/item_01.jpg" />
</div>
<div class="item_name">
商品名が入ります。商品名が入ります。商品名が入ります。
</div>
<div class="item_price">
<span>¥10,000</span>
(tax in)
</div>
</a>
</li>
<li>
<a href="#">
<div class="item_pict">
<img src="image/item/item_02.jpg" />
</div>
<div class="item_name">
商品名が入ります。商品名が入ります。商品名が入ります。
</div>
<div class="item_price">
<span>¥10,000</span>
(tax in)
</div>
</a>
</li>
<li>
<a href="#">
<div class="item_pict">
<img src="image/item/item_03.jpg" />
</div>
<div class="item_name">
商品名が入ります。商品名が入ります。商品名が入ります。
</div>
<div class="item_price">
<span>¥10,000</span>
(tax in)
</div>
</a>
</li>
</ul>
</div>
<div id="shopping_guide">
<h2>
<span>SHOPPING GUIDE</span>
</h2>
<div id="guide_wrapper" class="clearfix">
<div id="guide_left" class="guide_box">
<div class="guide_wrap">
<h3>お届けについて</h3>
<div class="guide_pict">
<img src="image/common/guide_souryou.png" alt="合計¥5,000以上で送料無料">
</div>
<dl>
<dt>■〇〇運輸️</dt>
<dd>送料 ¥000円</dd>
<dt>■ゆうパケット</dt>
<dd>ポスト投函となります。日時指定不可</dd>
</dl>
</div>
</div>
<div id="guide_right" class="guide_box">
<div class="guide_wrap">
<h3>決済について</h3>
<dl>
<dt>■カード決済</dt>
<dd class="guide_pict"><img src="image/common/guide_card.png" alt="対応可能カード会社"></dd>
<dt>■代金引換️</dt>
<dd>代引き手数料が別途かかります</dd>
<dt>■銀行振込</dt>
<dd>お振込手数料お客様負担。</dd>
<dd>ご入金後の発送になります。</dd>
</dl>
</div>
</div>
</div>
</div>
</div>
<div id="sub_field" class="three columns">
<article id="search_engine">
<form action="#" method="post" name="search_engines">
<h4 class="sans">
<label for="search_txt">ITEM SEARCH</label>
</h4>
<dl>
<dt>
<input id="search_txt" placeholder="Search..." value="" name="search" size="30" maxlength="255" type="search">
</dt>
<dd>
<input src="image/common/icon_search.png" type="image">
</dd>
</dl>
</form>
</article>
<article id="page_link" class="sub_box link_box">
<h4>ページリンク</h4>
<ul>
<li><a href="index.html">トップページ</a></li>
<li><a href="list.html">商品一覧ページ</a></li>
<li><a href="#">商品詳細ページ</a></li>
</ul>
</article>
<article id="categories_link" class="sub_box link_box">
<h4 class="sans">CATEGORIES</h4>
<ul style="display: none;">
<li><a href="#">カテゴリー名</a></li>
<li><a href="#">カテゴリー名</a></li>
<li><a href="#">カテゴリー名</a></li>
<li><a href="#">カテゴリー名</a></li>
<li><a href="#">カテゴリー名</a></li>
<li><a href="#">カテゴリー名</a></li>
</ul>
</article>
<article id="about_data" class="sub_box clearfix">
<h4 class="sans">ABOUT</h4>
<div class="sub_pict">
<img src="image/common/about_img.jpg" alt="店舗イメージ">
</div>
<div class="sub_text">
<p>お店の説明が入ります。お店の説明が入ります。お店の説明が入ります。お店の説明が入ります。</p>
<div class="more_button">
<a class="sans" href="#">MORE</a>
</div>
</div>
</article>
<article id="shop_info" class="sub_box clearfix">
<h4 class="sans">SHOP INFO</h4>
<div class="sub_pict">
<img src="image/common/shopinfo_img.jpg" alt="店舗イメージ">
</div>
<div class="sub_text">
<p>お店の説明が入ります。お店の説明が入ります。お店の説明が入ります。お店の説明が入ります。</p>
<div class="more_button">
<a class="sans" href="#">MORE</a>
</div>
</div>
</article>
</div>
</section>
</main>
<footer class="container">
<div id="page_top" class="row twelve columns">
<a href="#logo">
<i class="fa fa-long-arrow-up" aria-hidden="true"></i>
PAGETOP
</a>
</div>
<div class="row twelve columns">
<ul>
<li>
<a href="#" title="特定商取引に基づく表記">特定商取引に基づく表記</a>
</li>
<li>
<a href="#" title="プライバシーポリシー">プライバシーポリシー</a>
</li>
<li>
<a href="#" title="マイページ">マイページ</a>
</li>
</ul>
<small class="twelve columns">copyright© APPLE BERRY all rights reserved.</small>
</div>
</footer>
<!--JQueryのベースライブラリを読み込む-->
<script src="js/jquery.min.js"></script>
<!--ハンバーガーメニューの動きを実装-->
<script src="js/spmenu.js"></script>
<!--リンクボックスの動きを実装-->
<script src="js/linkmenu.js"></script>
<!--ギャラリーの動きを実装-->
<script src="js/gallery.js"></script>
<!--ページトップをぬるぬるさせるのが動きを実装-->
<script src="js/pagetop.js"></script>
</body>
</html>