http://yachin29.webcrow.jp/sprit/
<!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> $(document).ready(function(){ $('.bxslider').bxSlider(); }); </script> </head> <body> <header> <h1>フェリカ企画</h1> <nav> <ul> <li><a href="#">サービス</a></li> <li><a href="#">制作実績</a></li> <li><a href="#">会社概要</a></li> <li><a href="#">Access</a></li> <li><a href="#">お問い合わせ</a></li> </ul> </nav> </header> <div id="content"> <div id="service"> <ul class="bxslider"> <li class="slide1"></li> <li class="slide2"></li> <li class="slide3"></li> </ul> </div> <div id="portfolio"> <h2>制作実績</h2> <ul> <li class="box box1"><a href="#"></a><span>Vol.1</span></li> <li class="box box2"><a href="#"></a><span>Vol.2</span></li> <li class="box box3"><a href="#"></a><span>Vol.3</span></li> <li class="box box4"><a href="#"></a><span>Vol.4</span></li> <li class="box box5"><a href="#"></a><span>Vol.5</span></li> <li class="box box6"><a href="#"></a><span>Vol.6</span></li> </ul> </div> </div><!--/#content--> <div id="one-col"> <div id="info"> <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>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>Felica international Co.,Ltd.</dd> </dl> </div> </div> <div class="map-wrapper"> <h2>Access</h2> <div id="map-inner"></div> </div><!--/.map-wrapper--> </div> <footer></footer> <script src="https://maps.googleapis.com/maps/api/js?callback=initMap" type="text/javascript"></script> </body> </html>
@charset "utf-8"; html,body,h1,p,ul,li,dl,dt,dd,div { margin:0; padding:0; line-height:1.0; box-sizing:border-box; } ul { list-style:none; } a { text-decoration:none; color:#222; } img { border:none; vertical-align:bottom; } /*PC部分レイアウト*/ body { width:100%; height:100vh; background:url(../img/bg.jpg) no-repeat center/cover; background-attachment:fixed; } header { width:6%; height:100vh; background:#000000; position:fixed; top:0; left:0; z-index:100; } #content { width:50%; margin:20px 20px 60px 0; height:2000px; background:rgba(0,0,0,0.80); float:right; } /*サービス部分*/ #service { width:100%; height:350px; } .bxslider { width:100%; } .bxslider li { width:100%; height:350px; float:left; } .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; } #portfolio ul { overflow:hidden; background:#FFF; } #portfolio li { width:33.33%; height:300px; float:left; box-sizing:border-box; position:relative; overflow:hidden; } #portfolio li:nth-child(-n + 3) { border-bottom: 1px solid #474747; } #portfolio li { border-right: 1px solid #474747; } #portfolio li:nth-child(3),#portfolio li:nth-child(6){ border-right:none; } li.box a { display:block; width:100%; height:300px; background:#FF4B4E; transform:rotate(-45deg); position:absolute; top:-200px; left:-200px; transition: 0.2s; } li.box:hover a { width:400%; height:600px; } li.box2 a { background: #ED39BA; } li.box3 a { background: #3437D9; } li.box4 a { background: #1FC16E; } li.box5 a { background: #E1893B; } li.box6 a { background: #929292; } li.box span { display:block; width:100%; text-align:center; padding-top:100px; font-size:24px; position:absolute; top:0; left:0; z-index:100; } #one-col { width:94%; height:1000px; margin-left:6%; background:#FFFFFF; clear:both; } /*会社概要*/ #info { width:100%; padding:100px 8% 0; 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 dd.long { padding-bottom:34px; } #info .info-en dt { width:30%; } #info .info-en dd { padding-left:32%; } .dl-btn { display:none; } /*googleMap*/ #map-inner { width:100%; height:350px; } footer { width:94%; margin-left:6%; height:400px; background: #E4E4E4; } @media screen and (max-width:767px) { /*会社概要*/ #info { width:100%; padding:100px 4% 0; font-size:12px; margin-bottom:180px; } .info-ja { width:100%; float:none; } .info-en { width:100%; float:none; } .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; } }
// JavaScript Document $(function() { $('.dl-btn a').on('touchstart',function() { $('.info-ja,.info-en').toggleClass('dl-box'); return false; }); }); var map; function initMap() { // マップ基本設定 var latLng = new google.maps.LatLng(35.725968, 139.713874); map = new google.maps.Map( document.getElementById("map-inner"), { zoom: 16, // 拡大率 center: latLng, scrollwheel: false // マウスホイールで拡縮しなくなる } ); // マーカーの設定 var markerImg = { url:'img/maplogo.svg', scaledSize : new google.maps.Size(60,72) }; var marker = new google.maps.Marker({ position: latLng, map: map, icon: markerImg }); // 地図をグレースケールに var mapStyle = [ { "stylers": [ { "saturation": -100 } ] } ]; var mapType = new google.maps.StyledMapType(mapStyle); map.mapTypes.set('GrayScaleMap', mapType); map.setMapTypeId('GrayScaleMap'); }