WEBサイト制作の勉強

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

フェリカテクニカルアカデミー

スプリットレイアウトの作成

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;
}
}


jQuery

// 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');
  }