index.html
<html lang="ja">
<head>
<meta charset="utf-8">
<title>既存サイトのトレース｜ポカリスエット</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/slick.css">
<link rel="stylesheet" href="css/slick-theme.css">
<style>
.pick-up-slide .slick-prev{
left: -60px;
top:-20px;
bottom:0;
margin:auto;
z-index:9999;
}
.pick-up-slide .slick-prev:before{
content: '';
display:block;
width:30px;
height:30px;
background:url(img/home_arw_04.png) no-repeat center center/contain;
}
.pick-up-slide .slick-next{
right: -46px;
top:-20px;
bottom:0;
margin:auto;
z-index:9999;
}
.pick-up-slide .slick-next:before{
content: '';
display:block;
width:30px;
height:30px;
background:url(img/home_arw_03.png) no-repeat center center/contain;
}
@media (max-width:764px){
.pick-up-slide .slick-prev{
left: 20px;
}
.pick-up-slide .slick-next{
right: 30px;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1><img src="img/header_logo_01.gif" alt=""></h1>
<nav class="g-nav">
<ul>
<li><span>ボタン1</span>
<div class="drop-menu">
<ul class="menu-inner">
<li class="size-l">
<a href="#">
<p class="menu-photo"><img src="img/gnav_img_products_01.png" alt=""></p>
<p class="menu-txt">ポカリスエット基本情報</p>
</a>
</li>
<li class="size-l">
<a href="#">
<p class="menu-photo"><img src="img/gnav_img_products_02.png" alt=""></p>
<p class="menu-txt">イオンウォーター基本情報</p>
</a>
</li>
<li>
<a href="#">
<p class="menu-photo"><img src="img/gnav_img_products_03.jpg" alt=""></p>
<p class="menu-txt">ポカリスエットの歴史</p>
</a>
</li>
<li>
<a href="#">
<p class="menu-photo"><img src="img/gnav_img_products_04.jpg" alt=""></p>
<p class="menu-txt">ポカリスエット誕生秘話</p>
</a>
</li>
<li>
<a href="#">
<p class="menu-photo"><img src="img/gnav_img_products_07.jpg" alt=""></p>
<p class="menu-txt">日常生活にイオンウォーター
</p>
</a>
</li>
<li>
<a href="#">
<p class="menu-photo"><img src="img/gnav_img_products_08.jpg" alt=""></p>
<p class="menu-txt">イオンウォーター<br>パウダータイプ</p>
</a>
</li>
<li>
<a href="#">
<p class="menu-photo"><img src="img/gnav_img_products_09.jpg" alt=""></p>
<p class="menu-txt">ポカリスエット ゼリー</p>
</a>
</li>
<li>
<a href="#">
<p class="menu-photo"><img src="img/gnav_img_products_06.jpg" alt=""></p>
<p class="menu-txt">よくあるQ&A</p>
</a>
</li>
</ul>
</div>
</li>
<li><span>ボタン2</span>
<div class="drop-menu"></div>
</li>
<li><span>ボタン3</span>
<div class="drop-menu"></div>
</li>
<li><span>ボタン4</span>
<div class="drop-menu"></div>
</li>
<li><span>ボタン5</span>
<div class="drop-menu"></div>
</li>
<li><span>ボタン6</span>
<div class="drop-menu"></div>
</li>
<li><a href="https://www.facebook.com/pocarisweat.jp" target="_blank">ボタン7</a></li>
</ul>
</nav>
<div class="news">
<p>NEWS<span>2019 ⁄ 6 ⁄ 6</span>新CM「母娘の揺れる想い」篇を公開しました</p>
</div>
<nav class="sp-nav">
<ul>
<li>
<a href="#">ボタン1<span class="plus"></span></a>
<div class="sp-nav-box">
<p>あああああ</p>
</div>
</li>
<li><a href="#">ボタン2<span class="plus"></span></a>
<div class="sp-nav-box"></div>
</li>
<li><a href="#">ボタン3</a>
<div class="sp-nav-box"></div>
</li>
<li><a href="#">ボタン4</a></li>
<li><a href="#">ボタン5</a></li>
<li><a href="#">ボタン6</a></li>
<li><a href="#">ボタン7</a></li>
</ul>
</nav>
<p class="hum" id="btn"><span class="hum-bar"></span></p>
</header>
<div class="keyvisual slider fade">
<div class="main-photo1"></div>
<div class="main-photo2"></div>
<div class="main-photo3"></div>
</div>
</div>
<div class="pick-up">
<h2><img src="img/home_ttl_01.gif" alt=""></h2>
<ul class="slider pick-up-slide">
<li><a href="#"><img src="img/home_img_pickup_15.jpg" alt="">
<span>ポカリスエット イオンウォーター リニューアル。より一層おいしくなりました。</span>
</a></li>
<li><a href="#"><img src="img/home_img_pickup_37.jpg" alt="">
<span>未来へ向かって前向きな行動を起こす人たちを応援する「EVERY SWEAT」公開中！</span>
</a></li>
<li><a href="#"><img src="img/home_img_pickup_39.png" alt="">
<span>夏のCM出演者が決定！オーディションドキュメンタリーはこちらから</span>
</a></li>
<li><a href="#"><img src="img/home_img_pickup_33.jpg" alt="">
<span>サウナといえばイオンウォーター</span>
</a></li>
<li><a href="#"><img src="img/home_img_pickup_28.jpg" alt="">
<span>ウォーキングをもっと楽しく！<br>「STEPMAP」公開中</span>
</a></li>
</ul>
</div>
<div class="tab-wrapper">
<ul id="tab">
<li class="tab-about"><a href="#about">About</a></li>
<li class="tab-scene active"><a href="#scene">Scene</a></li>
</ul>
<div class="tab-box" id="about">
About
</div>
<div class="tab-box active" id="scene">
Scene
</div>
</div>
<div class="col3">
<div class="hydration">
<div class="hydration-header">
</div>
<h2><img src="img/home_ttl_02_pc.gif" alt=""></h2>
<ul>
<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>
<li><a href="#">子どもの水分補給の大切さ</a></li>
<li><a href="#">高齢者の水分補給の大切さ</a></li>
<li><a href="#">働く人の熱中症対策</a></li>
</ul>
</div>
<div class="action">
<div class="action-header">
</div>
<h2><img src="img/home_ttl_03_pc.gif" alt=""></h2>
</div>
<div class="products">
<div class="products-header">
</div>
<h2><img src="img/home_ttl_04_pc.gif" alt=""></h2>
</div>
</div>
<footer>
<ul class="footer-nav">
<li><a href="#"><img src="img/footmenu01.png" alt=""></a></li>
<li><a href="#"><img src="img/footmenu02.png" alt=""></a></li>
<li><a href="#"><img src="img/footmenu03.png" alt=""></a></li>
<li><a href="#"><img src="img/footmenu04.png" alt=""></a></li>
<li><a href="#"><img src="img/footlogo.png" alt=""></a></li>
</ul>
<div class="footer-inner">
<ul class="footer-list">
<li><a href="#">大塚製薬ホームページ</a></li>
<li><a href="#">サイトのご利用にあたって</a></li>
<li><a href="#">個人情報保護への取り組み</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
<p class="copy"><small>© Felica Co., Ltd.</small></p>
</div>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="js/slick.js"></script>
<script>
$('.fade').slick({
dots: true,
infinite: true,
autoplay: true,
autoplaySpeed: 3000,
fade: true,
pauseOnHover:false,
pauseOnFocus: false,
cssEase: 'linear'
});
$(".pick-up-slide").slick({
dots: false,
infinite: true,
slidesToShow: 3,
slidesToScroll: 1,
responsive: [
{
breakpoint: 764,
settings: {
centerMode: true,
slidesToShow: 1,
centerPadding:'0'
}
}
]
});
</script>
<script>
$(function(){
$('.sp-nav').hide();
$('#btn').on('click',function(){
$(this).toggleClass('click');
$('.sp-nav').slideToggle(200);
});
$('.sp-nav a').on('click',function(){
$(this).next('.sp-nav-box').slideToggle().parent('li').siblings('li').children('.sp-nav-box').slideUp();
$(this).children('.plus').toggleClass('minus').parents('li').siblings('li').find('.plus').removeClass('minus');
});
$('#tab a').on('click',function(){
$(this).parent('li').addClass('active').siblings('li').removeClass('active');
var target = $(this).attr('href');
console.log(target);
$(target).addClass('active').siblings('.tab-box').removeClass('active');
return false;
});
});
</script>
</body>
</html>
スタイルシート
@charset "utf-8";
* ress.css • v1.2.2
* MIT License
* github.com/filipelinhares/ress
* 全ての要素にbox-sizing: border-box;.
* 全ての背景画像にbackground-repeat: no-repeat.
*/html{box-sizing:border-box;text-size-adjust:100%}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}*{padding:0;margin:0}audio:not([controls]){display:none;height:0}hr{overflow:visible}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}summary{display:list-item}small{font-size:80%}[hidden],template{display:none}abbr[title]{border-bottom:1px dotted;text-decoration:none}a{background-color:transparent;text-decoration-skip:objects}a:active,a:hover{outline-width:0}code,kbd,pre,samp{font-family:monospace,monospace}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}input{border-radius:0}[role=button],[type=button],[type=reset],[type=submit],button{cursor:pointer}[disabled]{cursor:default}[type=number]{width:auto}[type=search]{appearance:textfield}[type=search]::search-cancel-button,[type=search]::search-decoration{appearance:none}textarea{overflow:auto;resize:vertical}button,input,optgroup,select,textarea{font:inherit}optgroup{font-weight:700}button{overflow:visible}[type=button]::focus-inner,[type=reset]::focus-inner,[type=submit]::focus-inner,button::focus-inner{border-style:0;padding:0}[type=button]::focus-inner,[type=reset]::focus-inner,[type=submit]::focus-inner,button:focusring{outline:1px dotted ButtonText}[type=reset],[type=submit],button,html [type=button]{appearance:button}button,select{text-transform:none}button,input,select,textarea{background-color:transparent;border-style:none;color:inherit}select{appearance:none;appearance:none}select::expand{display:none}select::value{color:currentColor}legend{border:0;color:inherit;display:table;max-width:100%;white-space:normal}::file-upload-button{appearance:button;font:inherit}[type=search]{appearance:textfield;outline-offset:-2px}img{border-style:none}progress{vertical-align:baseline}svg:not(:root){overflow:hidden}audio,canvas,progress,video{display:inline-block}@media screen{[hidden~=screen]{display:inherit}[hidden~=screen]:not(:active):not(:focus):not(:target){position:absolute!important;clip:rect(0 0 0 0)!important}}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled]{cursor:default}::selection{background-color:#b3d4fc;color:#000;text-shadow:none}::selection{background-color:#b3d4fc;color:#000;text-shadow:none}ul,ol{list-style:none;}a{text-decoration:none;}.wrapper{overflow:hidden;}body{overflow-y:scroll;}
*{box-sizing:border-box;}
a{color:#222;}
img{
vertical-align:bottom;
}
.container {
width:100%;
height:100vh;
position:relative;
}
header{
width:100%;
height:120px;
display:flex;
flex-wrap:wrap;
position:absolute;
bottom:0;
left:0;
z-index:9999;
}
h1{
width:30%;
height:80px;
background:#015db2;
text-align:right;
padding:10px 60px 0 0;
}
.g-nav{
width:70%;
height:80px;
padding-left:40px;
background:#FFF;
}
.g-nav>ul{
display:flex;
}
.g-nav>ul>li{
width:112px;
height:80px;
cursor:pointer;
background:url(../img/header_gnav_pc_01.gif) no-repeat 0 0;
}
.g-nav>ul>li>span{
display:block;
white-space:nowrap;
text-indent:100%;
overflow:hidden;
}
.g-nav>ul>li:nth-child(2){
background:url(../img/header_gnav_pc_01.gif) no-repeat -112px 0;
}
.g-nav>ul>li:nth-child(3){
background:url(../img/header_gnav_pc_01.gif) no-repeat -224px 0;
}
.g-nav>ul>li:nth-child(4){
background:url(../img/header_gnav_pc_01.gif) no-repeat -336px 0;
}
.g-nav>ul>li:nth-child(5){
background:url(../img/header_gnav_pc_01.gif) no-repeat -448px 0;
}
.g-nav>ul>li:nth-child(6){
background:url(../img/header_gnav_pc_01.gif) no-repeat -560px 0;
}
.g-nav>ul>li:nth-child(7){
background:url(../img/header_gnav_pc_01.gif) no-repeat -672px 0;
}
.g-nav>ul>li:hover{
background:url(../img/header_gnav_pc_01.gif) no-repeat 0 -80px;
}
.g-nav>ul>li:nth-child(2):hover{
background:url(../img/header_gnav_pc_01.gif) no-repeat -112px -80px;
}
.g-nav>ul>li:nth-child(3):hover{
background:url(../img/header_gnav_pc_01.gif) no-repeat -224px -80px;
}
.g-nav>ul>li:nth-child(4):hover{
background:url(../img/header_gnav_pc_01.gif) no-repeat -336px -80px;
}
.g-nav>ul>li:nth-child(5):hover{
background:url(../img/header_gnav_pc_01.gif) no-repeat -448px -80px;
}
.g-nav>ul>li:nth-child(6):hover{
background:url(../img/header_gnav_pc_01.gif) no-repeat -560px -80px;
}
.g-nav>ul>li:nth-child(7):hover{
background:url(../img/header_gnav_pc_01.gif) no-repeat -672px -80px;
}
.g-nav>ul>li>a{
display:block;
height:80px;
white-space:nowrap;
text-indent:100%;
overflow:hidden;
}
.news{
width:100%;
height:40px;
background:rgba(1,93,178,0.7);
}
.drop-menu{
width:100%;
height:422px;
background:#FFF url(../img/gnav_bg_megaMenu_01.gif) repeat-x left bottom;
position:absolute;
bottom:120px;
left:0;
display:none;
}
.g-nav>ul>li:hover>.drop-menu{
display:block;
}
.keyvisual {
width:100%;
height:100vh;
}
.main-photo1{
width:100%;
height:100vh;
background:url(../img/home_img_slider_05_pc.jpg) no-repeat center center/cover;
}
.main-photo2{
width:100%;
height:100vh;
background:url(../img/home_img_slider_06_pc.jpg) no-repeat center center/cover;
}
.main-photo3{
width:100%;
height:100vh;
background:url(../img/home_img_slider_03_pc.jpg) no-repeat center center/cover;
}
.menu-inner{
width:840px;
margin:0 auto;
padding-top:20px;
overflow:hidden;
}
.menu-inner>li{
width:190px;
height:120px;
float:left;
margin:10px;
background:#B04C4E;
}
.menu-inner>li.size-l{
width:190px;
height:260px;
}
.menu-photo{
margin-bottom:6px;
}
.menu-txt{
font-size:14px;
background:url(../img/mod_ico_arwR_01.png) no-repeat left 3px;
padding-left:1em;
}
.menu-inner>li>img{
max-width:100%;
}
.news>p{
font-size:13px;
color:#FFF;
margin-left:30%;
padding-top:8px;
}
.news>p>span{
padding:2px;
background:#7C7A7B;
margin:0 10px;
}
.pick-up{
background:#FFF;
}
.pick-up>h2{
width:116px;
margin:0 auto;
padding-top:100px;
}
.pick-up img{
max-width:100%;
}
.pick-up-slide {
max-width:820px;
margin:100px auto;
display:flex;
justify-content:space-between;
}
.pick-up-slide li{
width:260px!important;
}
.pick-up-slide li>a>span{
display:block;
font-size:12px;
background:url(../img/mod_ico_arwR_01.png)no-repeat left 2px;
padding-left:1.4em;
margin-top:10px;
}
.tab-wrapper{
width:100%;
background:url(../img/home_bg_01.jpg) no-repeat left top/cover;
padding:50px 0;
}
#tab{
max-width:1080px;
height:80px;
margin:0 auto;
background:#FFFFFF;
display:flex;
}
#tab>li{
width:50%;
height:80px;
position:relative;
}
#tab>li>a{
display:block;
height:80px;
white-space:nowrap;
text-indent:100%;
overflow:hidden;
}
#tab>li.tab-about>a {
background:url(../img/home_btn_tab_01_pc_off.png) no-repeat 0 0/cover;
}
#tab>li.tab-scene>a {
background:url(../img/home_btn_tab_02_pc_off.png) no-repeat 0 0/cover;
}
#tab>li.tab-about.active>a{
background:url(../img/home_btn_tab_01_pc_on.png) no-repeat 0 0/cover;
}
#tab>li.tab-scene.active>a{
background:url(../img/home_btn_tab_02_pc_on.png) no-repeat 0 0/cover;
}
#tab>li.active::after{
display:block;
content:"";
width:0;
height:0;
border:12px solid transparent;
border-top:16px solid #015db2;
position:absolute;
right:0;
left:0;
bottom:-24px;
margin:auto;
z-index:1000;
}
.tab-box{
width:100%;
margin:0 auto;
height:500px;
background:rgba(255,255,255,0.80);
display:none;
}
.tab-box.active{
display:block;
}
.col3{
width:100%;
display:flex;
padding:50px 0;
}
.col3>div{
width:33.33%;
background:#f6f8f9;
font-size:14px;
}
.col3>div>h2{
padding:40px 60px;
}
.col3>div>ul{
padding:0 60px;
}
.col3>div>ul>li{
margin-bottom:20px;
}
.col3>div>ul>li>a{
display:block;
background:url(../img/mod_ico_arwR_01.png) no-repeat left 3px;
padding-left:16px;
}
.col3>div>ul>li>a:hover{
text-decoration:underline;
}
.col3>div:nth-of-type(2){
background:#FFF;
padding:0 10px;
}
.hydration-header{
height:0;
padding-bottom:32.8%;
background:url(../img/home_img_01.jpg) no-repeat center center/cover;
}
.action-header{
height:0;
padding-bottom:32.8%;
background:url(../img/home_img_02_pc.jpg) no-repeat center center/cover;
}
.products-header{
height:0;
padding-bottom:32.8%;
background:url(../img/home_img_03.jpg) no-repeat center center/cover;
}
.footer-nav{
max-width:960px;
margin:0 auto;
display:flex;
}
.footer-nav>li{
margin-right:20px;
}
.footer-nav>li:last-child{
margin:0 0 0 auto;
}
.footer-inner{
width:100%;
padding:5px 0;
display:flex;
justify-content:space-between;
font-size:12px;
background:#EBEBEB;
}
.footer-list{
display:flex;
}
.footer-list>li{
margin-right:10px;
}
.sp-nav{
display:none;
}
@media (max-width:764px){
.g-nav{
display:none;
}
.sp-nav{
display:block;
width:100%;
position:absolute;
top:50px;
left:0;
z-index:99999;
border-bottom:10px solid #1153ae;
}
.sp-nav li{
width:100%;
}
.sp-nav li>a{
display:block;
width:100%;
height:60px;
position:relative;
background:#FFF url(../img/header_gnav_sp_01.gif) no-repeat 0 0/320px auto;
border-top:1px solid #ccc;
white-space:nowrap;
text-indent:100%;
overflow:hidden;
}
.sp-nav li:nth-of-type(2)>a{
background:#FFF url(../img/header_gnav_sp_01.gif) no-repeat 0 -60px/320px auto;
}
.sp-nav li:nth-of-type(3)>a{
background:#FFF url(../img/header_gnav_sp_01.gif) no-repeat 0 -120px/320px auto;
}
.sp-nav li:nth-of-type(4)>a{
background:#FFF url(../img/header_gnav_sp_01.gif) no-repeat 0 -180px/320px auto;
}
.sp-nav li:nth-of-type(5)>a{
background:#FFF url(../img/header_gnav_sp_01.gif) no-repeat 0 -240px/320px auto;
}
.sp-nav li:nth-of-type(6)>a{
background:#FFF url(../img/header_gnav_sp_01.gif) no-repeat 0 -300px/320px auto;
}
.sp-nav li:nth-of-type(7)>a{
background:#FFF url(../img/header_gnav_sp_01.gif) no-repeat 0 -360px/320px auto;
}
.plus{
display:block;
width:20px;
height:2px;
background:#A3A3A3;
position:absolute;
top:0;
bottom:0;
right:20px;
margin:auto;
}
.plus::before{
display:block;
content:"";
width:20px;
height:2px;
background:#A3A3A3;
position:absolute;
top:0;
bottom:0;
right:0;
margin:auto;
transform:rotate(90deg);
}
.plus.minus::before{
background:transparent;
}
.sp-nav-box{
width:100%;
height:200px;
background:#52CBC1;
display:none;
}
header{
width:100%;
height:50px;
display:flex;
flex-wrap:wrap;
position:static;
justify-content:space-between;
}
.news{
display:none;
}
.hum{
width:56px;
height:50px;
border-left:1px solid #1153ae;
position:relative;
}
.hum-bar{
display:block;
width:34px;
height:3px;
background:#1153ae;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
}
.hum-bar::before{
display:block;
content:"";
width:34px;
height:3px;
background:#1153ae;
position:absolute;
top:-22px;
right:0;
bottom:0;
left:0;
margin:auto;
}
.hum-bar::after{
display:block;
content:"";
width:34px;
height:3px;
background:#1153ae;
position:absolute;
top:0;
right:0;
bottom:-22px;
left:0;
margin:auto;
}
.hum.click{
background:#1153ae;
}
.click>.hum-bar{
background:transparent;
}
.click>.hum-bar::before{
top:0;
transform:rotate(45deg);
background:#FFF;
}
.click>.hum-bar::after{
bottom:0;
transform:rotate(-45deg);
background:#FFF;
}
h1{
width:100px;
height:50px;
text-align:center;
padding:0;
}
h1>img{
max-width:100%;
width:52px;
height:30px;
margin-bottom:10px;
}
.container {
width:100%;
height:60vh;
position:relative;
}
.keyvisual {
width:100%;
height:60vh;
}
.main-photo1{
width:100%;
height:60vh;
background:url(../img/home_img_slider_05_sp.jpg) no-repeat center center/cover;
}
.main-photo2{
width:100%;
height:60vh;
background:url(../img/home_img_slider_06_sp.jpg) no-repeat center center/cover;
}
.main-photo3{
width:100%;
height:60vh;
background:url(../img/home_img_slider_03_sp.jpg) no-repeat center center/cover;
}
.pick-up-slide li{
margin:0 auto;
}
.col3{
width:100%;
display:block;
padding:50px 0;
}
.col3>div{
width:100%;
background:#f6f8f9;
font-size:14px;
}
.footer-nav{
display:none;
}
}
