HTMLソース
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>スプリットレイアウト</title> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/jquery.bxslider.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!-- CDNが使えない場合は自サーバーに置いたjQueryファイルを読み込む --> <script>window.jQuery || document.write('<script src="js/jquery-3.2.1.min.js"><\/script>')</script> <script src="js/script.js"></script> <script src="js/jquery.bxslider.js"></script> <script src="js/map.js"></script> <script> $(document).ready(function(){ $('.bxslider').bxSlider(); }); //スムーススクロール複数バージョン $(function(){ // #で始まるアンカーをクリックした場合に処理 $('a[href^="#"]').on('click',function() { // スクロールの速度 var speed = 400; // ミリ秒 // 移動先を取得 var href= $(this).attr("href"); var target = $(href == "#" || href == "" ? 'html' : href); // 移動先を数値で取得 var position = target.offset().top; // スムーススクロール $('body,html').animate({scrollTop:position}, speed, 'swing'); return false; }); //スクロールが300に達したらボタン表示 $('.scroll-btn').hide(); $(window).scroll(function () { if ($(this).scrollTop() > 300) { $('.scroll-btn').fadeIn(); } else { $('.scroll-btn').fadeOut(); } }); }); $(function() { $('nav ul').hide();//スマホの時 $('#btn').on('touchstart',function(){ if($(window).innerWidth() <= 767){ $('#hum').not(':animated').toggleClass('click'); $('nav ul').not(':animated').slideToggle(200); }; }); $(window).on('load resize',function(){ $('nav ul').hide();//スマホの時 if($(window).innerWidth() > 768){ $('nav ul').show();//タブレット以上の時 $('#hum').removeClass('click');//PCから戻る時に邪魔な.clickを削除するため } }); }); </script> </head> <body id="body"> <header> <h1>ロゴ</h1> <p id="btn"><span id="hum"></span></p> <nav> <ul class="gnav"> <li><a href="#section01">サービス</a> <div class="mega"></div> </li> <li><a href="#section02">実績紹介</a> <div class="mega"></div> </li> <li><a href="#section03">企業情報</a> <div class="mega"></div> </li> <li><a href="#section04">アクセス</a> <div class="mega"></div> </li> <li><a href="#section05">お問い合わせ</a> <div class="mega"></div> </li> </ul> </nav> </header> <div class="right-content"> <div class="slide-box" id="section01"> <ul class="bxslider"> <li class="slide1">サービス内容A</li> <li class="slide2">サービス内容B</li> <li class="slide3">サービス内容C</li> </ul> </div> <div class="works" id="section02"> <ul class="works-box"> <li class="box1"><a href="#"></a><span>実績1</span></li> <li class="box2"><a href="#"></a><span>実績2</span></li> <li class="box3"><a href="#"></a><span>実績3</span></li> <li class="box4"><a href="#"></a><span>実績4</span></li> <li class="box5"><a href="#"></a><span>実績5</span></li> <li class="box6"><a href="#"></a><span>実績6</span></li> <li class="box7"><a href="#"></a><span>実績7</span></li> <li class="box8"><a href="#"></a><span>実績8</span></li> <li class="box9"><a href="#"></a><span>実績9</span></li> </ul> </div> </div><!--/.right-content--> <div class="col"> <div class="info" id="section03"> <div class="info-ja"> <p class="dl-btn"><a href="#">English</a></p> <h2>会社概要</h2> <dl> <dt>会社名</dt><dd>株式会社フェリカ企画</dd> <dt>所在地</dt><dd>東京都豊島区南池袋2-12-9 KKビル4F</dd> <dt>設立日</dt><dd>2000年1月1日</dd> <dt>代表取締役</dt><dd>山田太郎</dd> <dt>資本金</dt><dd>10億円</dd> <dt>関連会社</dt><dd>フェリカ・インターナショナル</dd> </dl> </div> <div class="info-en dl-box"> <p class="dl-btn"><a href="#">Japanese</a></p> <h2>Company info</h2> <dl> <dt>Company Name</dt><dd class="long">Felica Co.,Ltd.</dd> <dt>Company Address</dt><dd>KK Bldg-4F, 2-12-9 Minamiikebukuro, Toshima-ku, Tokyo.</dd> <dt>Date of the Establishment</dt><dd class="long">Jan 1st, 2000</dd> <dt>President</dt><dd>Tarou Yamada</dd> <dt>Capital</dt><dd>\1,000,000,000</dd> <dt>Affiliated Company</dt><dd class="long">Felica international Co.,Ltd.</dd> </dl> </div> </div><!--/.info--> <div class="map-wrapper" id="section04"> <h2>Access</h2> <div id="map-inner"></div> </div><!--/.map-wrapper--> <div class="form-wrapper" id="section05"> <h2>Contact form</h2> <form id="felica-form" action="" method="post"> <dl> <dt>お名前</dt><dd><input type="text" name="name" required placeholder="山田 太郎"></dd> <dt>メールアドレス</dt><dd><input type="email" name="mail" required></dd> <dt>血液型</dt> <dd><input type="radio" name="blood" value="A" id="type-a"><label for="type-a">A型</label><br class="sp-on"> <input type="radio" name="blood" value="B" id="type-b"><label for="type-b">B型</label><br class="sp-on"> <input type="radio" name="blood" value="o" id="type-o"><label for="type-o">O型</label><br class="sp-on"> <input type="radio" name="blood" value="AB" id="type-ab"><label for="type-ab">AB型</label></dd> <dt>お問い合わせ内容</dt><dd><textarea></textarea></dd> </dl> <p><input type="submit" value="確認"><input type="reset" value="リセット"></p> </form> </div> <footer> <p class="footer-copy"><small>© 2010-<span id="thisYear"></span>Felica Co., Ltd</small></p> <script type="text/javascript"> date = new Date(); thisYear = date.getFullYear(); document.getElementById("thisYear").innerHTML = thisYear; </script> </footer> <p id="to-top"><a href="#body" class="scroll-btn">トップに</a></p> </div> <script src="https://maps.googleapis.com/maps/api/js?callback=initMap" type="text/javascript"></script> </body> </html>
@charset "utf-8"; /* CSS Document */ html,body,h1,h2,h3,p,ul,li,dl,dt,dd,div { margin:0; padding:0; box-sizing:border-box; line-height:1.0; } ul { list-style:none; } a { text-decoration:none; color:#222; } img { border:none; vertical-align:bottom; } body { width:100%; height:100vh; background: url(../img/bg.jpg) no-repeat right center/cover; background-attachment:fixed; } header { width:80px; height:100vh; position:fixed; top:0; left:0; background:rgba(102,102,102,1); z-index:999; } h1 { width:100%; height:200px; font-size: 26px; padding-top: 60px; box-sizing: border-box; text-align: center; background:#FF3366; } nav { width:100%; height:calc(100vh - 200px); } .gnav ul { display: block; position:relative; } .gnav li { width:100%; height:calc((100vh - 200px) / 5); border-bottom:1px solid #FFF; box-sizing: border-box; } .gnav li:last-child { border-bottom:none; } .gnav li a { display:block; text-align:center; width:100%; font-size:12px; color:#FFFFFF; height:calc((100vh - 200px) / 5); padding:50px 0 10px 0; box-sizing:border-box; } .gnav li a:hover { background:#3366CC; border-bottom:1px solid #FFF; } /*ドロップダウンメニュー*/ .gnav li .mega { width:0; height:calc(100vh - 200px); position: absolute; top: 200px; left: 80px; z-index: 888; background:#3366CC; transition:0.1s; } .gnav li:hover .mega { width: 60px; } /*ハンバーガー*/ #btn { display: none; } .right-content { width:50%; float:right; margin:20px 20px 80px 0; background:rgba(0,0,0,0.50); } /*スライダー部分*/ .slide-box { width:100%; height:350px; background:#33C; margin-bottom: 40px; } .bxslider { width:100%; overflow:hidden; } .bxslider li { width:100%; height:350px; float:left; color:#FFF; font-size:34px; font-weight:bold; text-shadow: 0 0 20px #555, 0 0 20px #555, 0 0 1px #555; } .bxslider li.slide1 { background:url(../img/slide01.jpg) no-repeat center/cover; } .bxslider li.slide2 { background:url(../img/slide02.jpg) no-repeat center/cover; } .bxslider li.slide3 { background:url(../img/slide03.jpg) no-repeat center/cover; } /*実績紹介部分*/ .works { width:100%; } .works-box { overflow:hidden; } .works-box li { width:33.33%; height:300px; float:left; background: #FFFFFF; text-align: center; font-size: 24px; font-weight: bold; box-sizing: border-box; padding-top: 100px; overflow: hidden; position: relative; border-right: 1px solid #5D5D5D; } .works-box li span { position: relative; z-index: 100; transition: 0.3s; } .works-box li:nth-of-type(3n) { border-right: none; } .works-box li:nth-of-type(-n + 6) { border-bottom: 1px solid #5D5D5D; } .works-box li a { width: 200%; height: 200%; position: absolute; top: -190%; left: -120%; transform: rotate(-45deg); transition: 0.2s; } .works-box li:hover a { width: 400%; height: 400%; } .works-box li:hover span { color: #FFFFFF; } .works-box li.box1 a{ background:#DB4D6D; } .works-box li.box2 a{ background:#F596AA; } .works-box li.box3 a{ background:#E16B8C; } .works-box li.box4 a{ background:#E87A90; } .works-box li.box5 a{ background:#D05A6E; } .works-box li.box6 a{ background:#F19483; } .works-box li.box7 a{ background:#FB966E; } .works-box li.box8 a{ background:#DB4D6D; } .works-box li.box9 a{ background:#E55255; } /*ワンカラム部分*/ .col { width:calc(100% - 80px); margin-left:80px; background:#FFFFFF; clear:both; padding-top:50px; } .col h2 { width:100%; text-align:center; margin:20px 0; } /*googleMap */ .map-wrapper h2 { padding: 60px; } #map-inner { width: 100%; margin: 0 auto 140px; height: 400px; } /*会社概要*/ .info { width:100%; padding:0 8%; overflow:hidden; line-height:1.3; font-size:14px; margin-bottom:180px; } .info-ja { width:48%; float:left; } .info-en { width:48%; float:right; } .info dt { width:25%; float:left; font-weight:bold; padding:16px 0 16px 10px; } .info dd { padding:16px 10px 16px 26%; border-bottom:1px solid #222; } .info .info-en dt { width:30%; } .info .info-en dd { padding-left:32%; } .info .info-en dd.long { padding-bottom:32px; } .dl-btn { display:none; } /*お問い合わせフォーム*/ .form-wrapper { width:60%; margin: 0 auto 350px; } .form-wrapper h2 { margin-bottom:40px; } #felica-form dt { float: left; width:30%; } #felica-form dd { width:100%; padding-left:32%; margin-bottom:20px; } #felica-form textarea { width:70%; height:100px; } input[type="submit"] { margin-right:20px; } footer { width:100%; height:500px; background:#505050; border-top:1px solid #333; } small { display:block; text-align:center; padding: 30px 0; font-size:18px; } .sp-on { display:none; } /*トップに戻るボタン*/ p#to-top { width: 40px; height: 40px; position:fixed; bottom: 120px; right: 4%; } p#to-top a { display: block; width: 40px; height: 40px; border-radius: 50%; background: #505050; border: 2px solid #FFF; text-indent: 100%; white-space: nowrap; overflow: hidden; } p#to-top a::after { display: block; content: ""; width: 16px; height: 16px; margin: 0 auto; border-top: 2px solid #FFF; border-right: 2px solid #FFF; transform: rotate(-45deg); } @media screen and (max-width:959px) { header { width:100%; height:50px; position:fixed; top:0; left:0; } h1 { width:20%; height:50px; font-size: 18px; padding-top: 10px; float: left; } nav { width:80%; height:50px; float:left; } .gnav li { width:20%; height:50px; float: left; position:static; border-bottom:none; border-right: 1px solid #FFF; } .gnav li:last-child { border-right:none; } .gnav li a { display:block; text-align:center; width:100%; font-size:12px; color:#FFFFFF; height:50px; padding:0; line-height: 50px; } .gnav li a:hover { background:#3366CC; border-bottom:none; } /*ドロップダウンメニュー*/ .gnav li .mega { display:none; } .gnav li:hover .mega { width:0; } .right-content { width:100%; float:none; margin:60vh 0 80px 0; background:rgba(0,0,0,0.50); } /*ワンカラム部分*/ .col { width:100%; margin-left:0; } /*会社概要*/ .info { padding:0 1%; line-height:1.3; font-size:13px; } /*お問い合わせフォーム*/ .form-wrapper { width:90%; margin: 0 auto; } } @media screen and (max-width:767px) { header { background: transparent; } h1 { width: 100%; } /*ハンバーガー*/ #btn { display: block; width: 36px; height: 36px; background: #FFF; border-radius: 50%; position: absolute; top:7px; right: 20px; z-index: 100; } #hum { display: block; width: 22px; height: 2px; border-radius: 10px; background: #000; position: absolute; top:0; right: 0; bottom: 0; left: 0; margin: auto; transition: 0.2s; } #hum:before { display: block; content: ""; width: 22px; height: 2px; border-radius: 10px; background: #000; position: absolute; top:-20px; right: 0; bottom: 0; left: 0; margin: auto; transition: 0.2s; } #hum:after { display: block; content: ""; width: 22px; height: 2px; border-radius: 10px; background: #000; position: absolute; top:0; right: 0; bottom: -20px;/*bottomで動かさないとfirefoxでバグ*/ left: 0; margin: auto; transition: 0.2s; } #hum.click { background: transparent; } #hum.click:before { top:0; transform: rotate(45deg); } #hum.click:after { bottom: 0; transform: rotate(135deg); } nav { width:100%; height:50px; float:none; position:fixed; top: 50px; left: 0; } .gnav { width: 100%; } .gnav li { width:100%; height:50px; float: left; position:static; border-bottom:none; border-right: 1px solid #FFF; background: #505050; } /*会社概要*/ .info-ja { width:100%; float:none; clear:both; padding-top:20px; } .info-en { width:100%; float:none; } .info dt { width:25%; float:left; font-weight:bold; padding:16px 0 16px 10px; } .info dd { padding:16px 10px 16px 26%; border-bottom:1px solid #222; } .info .info-en dt { width:30%; } .info .info-en dd { padding-left:32%; } .info .info-en dd.long { padding-bottom:32px; } .dl-btn { display:block; width:100px; height:40px; border-radius:4px; border: 1px solid #333; float:right; margin-right:20px; } .dl-btn a { display:block; width:100%; text-align:center; line-height:40px; color:#333; } /*言語切り替え*/ .dl-box { display:none; } .sp-on { display:block; } /*お問い合わせフォーム*/ .form-wrapper { width:96%; margin: 0 auto; } #felica-form dt { float:none; width:100%; margin-bottom:10px; } #felica-form dd { width:100%; padding-left:1%; margin-bottom:20px; } #felica-form textarea { width:90%; height:160px; } }
script.js
// JavaScript Document $(function() { var map = $('iframe'); //あらかじめiframeにpointer-events:noneを掛け、マウスイベントを無効にしておく map.css('pointer-events', 'none'); //一度クリックされたらマウスイベントを有効にする $('.map-wrapper').click(function() { map.css('pointer-events', 'auto'); }); //iframeからマウスが離れたら再度pointer-events:noneを効かせる map.mouseout(function() { map.css('pointer-events', 'none'); }); }); $(function() { $('.dl-btn a').on('touchstart',function() { $('.info-ja,.info-en').toggleClass('dl-box'); return false; }); });