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>
<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;
});
$('.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');
}
});
});
</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>
<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ビル４F</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>
<div class="map-wrapper" id="section04">
<h2>Access</h2>
<div id="map-inner"></div>
</div>
<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>
スタイルシート
"utf-8";
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;
}
.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);
}
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;
}
}
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;
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
$(function() {
var map = $('iframe');
map.css('pointer-events', 'none');
$('.map-wrapper').click(function() {
map.css('pointer-events', 'auto');
});
map.mouseout(function() {
map.css('pointer-events', 'none');
});
});
$(function() {
$('.dl-btn a').on('touchstart',function() {
$('.info-ja,.info-en').toggleClass('dl-box');
return false;
});
});
