<body>
<div class="holder clearfix">
<header class="clearfix">
<div class="header">
<h1><a href="#"><span>dejizon</span>.co.jp (サンプルサイトです。購入は出来ません）</a></h1>
</div>
<div class="search clearfix">
<form name="searchform1" id="searchform1" method="get" action="#">
<input name="keywords1" id="keywords1" value="" type="text" />
<input type="image" src="images/icon_search.png" alt="検索" name="searchBtn1" id="searchBtn1" />
</form>
</div>
</header>
<div class="route clearfix">
<p><a href="#">カメラ</a> ><a href="#"> デジタルカメラ</a> ><a href="#"> デジタル一眼</a> ><a href="#"> デジタル一眼レフ</a></p>
</div>
<section class="clearfix">
<div id="main" class="clearfix">
<div id="content" class="clearfix">
<h2>KONICA コンパクトフィルムカメラC35レンズ38mm</h2>
<p><a href="#">コニカ</a></p>
<hr>
<p id="the_prise">価格：<span>¥54,800.-</span></p>
<p id="hayokae">残り2点 ご注文はお早めに <a href="#">在庫状況について</a></p>
<p id="description" class="clearfix">5/14 土曜日 にお届けするには、今から7 時間 38 分以内に「お急ぎ便」または「当日お急ぎ便」を選択して注文を確定してください<br><br>色: シルバー</p>
</div>
</div>
<div id="left" class="clearfix">
<p><img src="images/konica_c35_view.jpg" width="300" height="300" alt="camera"></p>
</div>
<div id="right" class="clearfix">
<div id="padding_buy">
<div id="buy">
<div class="buy1"><p>価格：<span>¥54,800.-</span></p></div>
<div class="buy1"><p>数量：
<select name="howmany" required>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</p>
</div>
<input id="plus_cart" type="submit" name="submit" value="カートに入れる">
</div>
<div id="plus_fv_list_holder">
<input id="plus_fv_list" type="submit" name="submit" value="ほしいものリストに追加する">
</div>
</div>
</div>
</section>
<div id="padding">
<p id="description2">こちらの商品は、お一人様１個のご注文に限らせていただいております。 複数のご注文をされている場合は、キャンセルをさせていただく場合がございますので、あらかじめご了承ください。</p>
<hr>
<section id="define">
<div id="syouhinsetumei">
<h2>商品の説明</h2>
<p>色: シルバー</p>
</div>
<h3>商品紹介</h3>
<ul id="syouhinsyoukai">
<li>レンズ：HEXANON 38mm／F2.8</li>
<li>シャッター速度：B・1/30〜1/650秒</li>
<li>フィルム感度：ASA25〜400</li>
<li>サイズ：112×69×52mm</li>
<li>電池：MR44型水銀電池 1個（代替品LR44）</li>
<li>重量：約360g</li>
</ul>
<h3>関連商品を探す</h3>
<p><a href="#">カメラ</a> ><a href="#"> デジタルカメラ</a> ><a href="#"> デジタル一眼</a> ><a href="#"> デジタル一眼レフ</a></p>
</section>
<div class="goto_top">
<a href="#top">トップへ戻る</a>
</div>
<footer class="clearfix">
<div id="link_lists" class="clearfix">
<div class="footer">
<h3>dejizonについて</h3>
<ul>
<li><a href="#">採用情報</a></li>
<li><a href="#">dejizonについて</a></li>
<li><a href="#">プレスリリース</a></li>
<li><a href="#">dejizonと地球</a></li>
<li><a href="#">dejizonのコミュニティ活動</a></li>
<li><a href="#">dejizon Story</a></li>
<li><a href="#">dejizonGlobal</a></li>
</ul>
</div>
<div class="footer">
<h3>dejizonでビジネス</h3>
<ul>
<li><a href="#">dejizonで売る</a></li>
<li><a href="#">アソシエイト</a></li>
<li><a href="#">フルフィルメント</a></li>
<li><a href="#">出版</a></li>
<li><a href="#">仕入先になる</a></li>
</ul>
</div>
<div class="footer">
<h3>dejizonでのお支払い</h3>
<ul>
<li><a href="#">dejizonポイント</a></li>
<li><a href="#">dejizonギフト券</a></li>
<li><a href="#">クレジットカード</a></li>
<li><a href="#">ポイントプログラム</a></li>
<li><a href="#">dejizonギフト券チャージタイプ</a></li>
</ul>
</div>
<h3>ヘルプ＆ガイド</h3>
<ul>
<li><a href="#">dejizonで売る</a></li>
<li><a href="#">アソシエイト</a></li>
<li><a href="#">フルフィルメント</a></li>
<li><a href="#">出版</a></li>
<li><a href="#">仕入先になる</a></li>
</ul>
</div>
<div class="dejizon"><a href="#"><span>dejizon</span>.co.jp (サンプルサイトです。購入は出来ません）</a></div>
<div class id="under_bar">
<ul class="last_menu">
<li class="last_menu_list"><a href="#">利用規約</a></li>
<li class="last_menu_list padding_left_5"><a href="#">プライバシー規約</a></li>
<li class="padding_left_5"><a href="#">パーソナライズド広告規約</a></li>
</ul>
<p><small>©2016, dejizon.com ※このサイトは実在しません</small></p>
</div>
</footer>
</div>
</div>
</body>
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
line-height:1;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}
nav ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
/* change colours to suit your needs */
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}
/* change colours to suit your needs */
mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom:1px dotted;
cursor:help;
}
table {
border-collapse:collapse;
border-spacing:0;
}
/* change border colour to suit your needs */
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}
input, select {
vertical-align:middle;
}
.clearfix:after {
content: "";
clear: both;
display: block;
}/* CSS Document */
body{
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-size:62.5%;
line-height:1.6;
background:#fff;
color:#333;
height:100%
}
a:link,
a:visited,
a:active{
color:#294c12;
text-decoration:underline;
}
a:hover{
color:#294c12;
text-decoration:none;
}
hr{
border-top:solid 1px eee;
}
.holder{
min-width:960px;
margin:0 auto;
}
header{
background:#294c12;
height:50px;
}
.header{
float:left;
}
h1 a:link,
h1 a:visited,
h1 a:active,
h1 a:hover{
color:white;
display:block;
text-decoration:none;
margin:9px 0 0 20px;
}
h1 span,
.dejizon span{
font-size:20px;
}
.dejizon a:link,
.dejizon a:visited,
.dejizon a:active,
.dejizon a:hover{
color:black;
text-decoration:none;
text-align:center;
margin:0 auto;
}
.search{
margin-top:9px;
float:right;
margin-right:20px;
}
#keywords1{
width: 300px;
height: 26px;
border: 1px solid #CCC;
padding: 2px 2px 2px 2px;
border-radius:4px 0 0 4px;
font-size:15px;
}
#searchBtn1{
background:#D9B007;
padding:5px 15px 5px 15px;
border-bottom-right-radius:4px;
border-top-right-radius:4px;
}
.route{
margin:10px 0 10px 15px;
}
#main{
width: 100%;
float: left;
height:304px;
}
#content{
margin-right: 283px;
margin-left: 365px;
}
#left{
float: left;
margin-left: -100%;
width: 365px;
}
#right{
float: left;
margin-left: -283px;
width: 283px;
font-size:14px;
}
#left p{
padding-left:15px;
}
#content h2{
font-size:22px;
}
#the_prise{
font-size:14px;
}
#the_prise span{
color:#772222;
}
#hayokae{
font-size:13px;
color:#294c12;
}
#hayokae a{
font-size:10px;
color:#3086F0;
}
#description{
margin-top:15px;
}
#padding_buy{
padding-left:25px;
padding-top:5px;
margin-right:15px;
}
#buy{
border:#ccc solid 1px;
border-radius:7px;
padding:10px 20px 10px 20px;
}
#buy p span{
color:#772222;
}
.buy1{
margin-bottom:10px;
}
#plus_cart{
border-radius:4px;
text-align:center;
padding:5px 0 5px 0;
background:#febd69;
border-style:none;
width:100%;
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
color:#333;
}
#plus_fv_list_holder{
margin-top:15px;
border:#ccc solid 1px;
border-radius:7px;
text-align:center;
padding:15px 20px 15px 20px;
}
#plus_fv_list{
background:#eee;
border-style:none;
width:100%;
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
color:#333;
border-radius:4px;
padding:5px 0 5px 0;
}
#padding{
margin:0 15px 0 15px;
}
#description2{
margin-top:15px;
}
#define{
margin-bottom:50px;
}
#define h2{
font-size:15px;
color:#ba8313;
margin-bottom:2px;
}
#define h3{
color:black;
font-size:14px;
margin-bottom:2px;
}
#syouhinsetumei{
margin-bottom:30px;
}
#syouhinsyoukai{
list-style-position:inside;
margin-bottom:30px;
}
.goto_top{
margin-bottom:45px;
}
.goto_top a,
.goto_top a:link,
.goto_top a:visited,
.goto_top a:active
.goto_top a:hover{
text-decoration:none;
display:block;
text-align:center;
background:#eee;
padding:10px 0 10px 0;
color:black;
}
footer li{
list-style:none;
list-style-position:outside;
margin-bottom:3px;
}
.dejizon{
text-align:center;
}
.footer{
float:left;
margin-right:150px;
}
#link_lists{
margin:0 auto 60px auto;
}
#link_lists h3{
font-size:12px;
margin-bottom:10px;
}
.last_menu_list{
float:left;
border-right:solid 1px black;
padding-right:5px;
}
.padding_left_5{
float:left;
padding-left:5px;
}
small{
margin-left:15px;
}
#under_bar{
margin-top:10px;
display:flex;
justify-content:center;
}
.last_menu a{
text-decoration:none;
color:black;
}