WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

スプリットレイアウト完成版

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>&copy; 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;
  });
});