index.html
<!doctype 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><!--/.container--> <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><!--/.pick-up--> <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><!--/.tab-wrapper--> <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><!--/.col3--> <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(){ //ハンバーガー部分 //#btnをクリックしたらその要素に「.click」が付いたり外れたりする $('.sp-nav').hide(); $('#btn').on('click',function(){ $(this).toggleClass('click'); $('.sp-nav').slideToggle(200); }); //sp-nav-boxを展開させる //「.sp-nav a」をクリックしたら $('.sp-nav a').on('click',function(){ //クリックした要素のすぐ下の弟の「.sp-nav-box」をslideToggleさせる、同時に親要素の他の兄弟要素の子要素の「.sp-nav-box」をslideUp $(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要素をクリックしたら $('#tab a').on('click',function(){ //クリックしたその要素の親要素「li」に「.active」をaddする。さらにクリックしていない方のa要素の「.active」をremoveする $(this).parent('li').addClass('active').siblings('li').removeClass('active'); //クリックしたa要素のhref属性の値を変数targetに代入する var target = $(this).attr('href'); console.log(target); //変数target(#aboutか#scene)に「.active」をaddする。さらにクリックしていない方の「.tab-box」の「.active」をremoveする $(target).addClass('active').siblings('.tab-box').removeClass('active'); return false; }); }); </script> </body> </html>
@charset "utf-8"; /* CSS Document */ * ress.css • v1.2.2 * MIT License * github.com/filipelinhares/ress * 全ての要素にbox-sizing: border-box;. * 全ての背景画像にbackground-repeat: no-repeat. */html{box-sizing:border-box;-webkit-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;-webkit-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]{-webkit-appearance:textfield}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}textarea{overflow:auto;resize:vertical}button,input,optgroup,select,textarea{font:inherit}optgroup{font-weight:700}button{overflow:visible}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:0;padding:0}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button:-moz-focusring{outline:1px dotted ButtonText}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}button,select{text-transform:none}button,input,select,textarea{background-color:transparent;border-style:none;color:inherit}select{-moz-appearance:none;-webkit-appearance:none}select::-ms-expand{display:none}select::-ms-value{color:currentColor}legend{border:0;color:inherit;display:table;max-width:100%;white-space:normal}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type=search]{-webkit-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}::-moz-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; } /*PCレイアウト*/ .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; } /*3カラム部分*/ .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%;/*210x100÷640=32.8125....を切り捨て*/ 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部分*/ .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){ /*PCナビを非表示*/ .g-nav{ display:none; } /*SPナビを表示*/ .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部分*/ .pick-up-slide li{ margin:0 auto; } /*3カラム部分*/ .col3{ width:100%; display:block; padding:50px 0; } .col3>div{ width:100%; background:#f6f8f9; font-size:14px; } /*footer部分*/ .footer-nav{ display:none; } }
