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

会社概要の作成

会社概要

会社名
株式会社フェリカ企画
所在地
東京都豊島区南池袋2-12-9 KKビル4F
設立日
2000年1月1日
代表取締役
山田太郎
資本金
10億円
関連会社
フェリカ・インターナショナル
Company info

Company Name
Felica Co.,Ltd.
Company Address
KK Bldg-4F, 2-12-9 Minamiikebukuro, Toshima-ku, Tokyo.
Date of the Establishment
Jan 1st, 2000
President
Tarou Yamada
Capital
\1,000,000,000
Affiliated Company
Felica international Co.,Ltd.

広告を非表示にする

GoogleMapのカスタマイズ

GoogleMapは通常インラインフレームで表示させている場合が多いですが、カスタマイズをするには
DOMで表示させる必要があります。

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


それとGoogleMap用のapiを呼び出すCDNをリンクします

<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" type="text/javascript"></script>

レンタルサーバー「ロリポップ」今なら全プラン初期費用無料! 7.20まで

f:id:yachin29:20170715120021p:plain


全プラン初期費用無料キャンペーン実施中!
ロリポップ!レンタルサーバー |今だけ初期費用無料キャンペーン中!

■□━━━━━━━━━━━━━━━━━━━━━■□

ロリポップ!では無料独自SSLのリリースを記念し、
【全プラン初期費用無料キャンペーン】を実施中です!

■キャンペーンの詳細
期間: 2017年7月11日(火)13:00 - 2017年7月20日(木)23:59
内容: 全プランの初期費用が無料になります。
対象: 期間中にロリポップ!を新規お申込みされた方



f:id:yachin29:20170715120038p:plain

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

スプリットレイアウト(Split Layout)とは

スプリットレイアウトとは、中央などの境界線をもとにコンテンツを分割したレイアウトの事です。例えば左右に分割し、画面を大きく使用することで、制約のあるウェブページを有効に使うことができ、また各コンテンツにおいて統一したデザインでなくてもうまくはまりやすく、クリエイティビティを表現しやすいのが特徴です。

スプリットレイアウトを使った制作例

gms.life


www.lagrandeevasion.fr


www.nodai.ac.jp


www.climarks.com


http://yamadamk.webcrow.jp/website/

今回のポイント

以前、img要素のスライダーとして使用したbxsliderを今回はli要素の背景画像として使用します。
img要素として画像を使う場合と背景画像として使用する場合の違いや利点をしっかりと理解しておく必要があります。



index.html

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<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/jquery.bxslider.js"></script>
<script>
$(document).ready(function(){
  $('.bxslider').bxSlider();
});
</script>
</head>

<body>
<header>
<h1>ロゴ</h1>
<nav>
<ul class="gnav">
<li><a href="#">サービス</a></li>
<li><a href="#">実績紹介</a></li>
<li><a href="#">企業情報</a></li>
<li><a href="#">ブログ</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>
</header>
<div class="right-content">
<div class="slide-box">
<ul class="bxslider">
  <li class="slide1">サービス内容A</li>
  <li class="slide2">サービス内容B</li>
  <li class="slide3">サービス内容C</li>
</ul>
</div>
<div class="works">
<ul class="works-box">
<li class="box1"><a href="#">実績1</a></li>
<li class="box2"><a href="#">実績2</a></li>
<li class="box3"><a href="#">実績3</a></li>
<li class="box4"><a href="#">実績4</a></li>
<li class="box5"><a href="#">実績5</a></li>
<li class="box6"><a href="#">実績6</a></li>
<li class="box7"><a href="#">実績7</a></li>
<li class="box8"><a href="#">実績8</a></li>
<li class="box9"><a href="#">実績9</a></li>
</ul>
</div>
</div><!--/.right-content-->


<footer></footer>
</body>
</html>


スタイルシート

@charset "utf-8";
/* CSS Document */

html,body,h1,h2,h3,p,ul,li,dl,dt,dd {
  margin:0;
  padding: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:absolute;
top:0;
left:0;
background:rgba(102,102,102,1);
}
h1 {
width:100%;
height:200px;
background:#FF3366;
}
nav {
width:100%;
height:calc(100vh - 200px);
}
.gnav li {
width:100%;
height:calc((100vh - 200px) / 5);
position:relative;
border-bottom:1px solid rgba(255,255,255,1);
}
.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;
}
.gnav li:nth-child(5) a:before{
display:block;
content:"";
width:100%;
height:calc((100vh - 200px) / 5);
background:url(img/mail.svg) no-repeat center top/26px;
position:absolute;
top:14px;
left:0;
}
.right-content {
  width:50%;
  height:2000px;
  float:right;
  background:rgba(0,0,0,0.50);
}
/*スライダー部分*/
.slide-box {
	width:100%;
	height:350px;
	background:#33C;
}
.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;
}
.works-box li.box1 {
	background:#DB4D6D;
}
.works-box li.box2 {
	background:#F596AA;
}
.works-box li.box3 {
	background:#E16B8C;
}
.works-box li.box4 {
	background:#E87A90;
}
.works-box li.box5 {
	background:#D05A6E;
}
.works-box li.box6 {
	background:#F19483;
}
.works-box li.box7 {
	background:#FB966E;
}
.works-box li.box8 {
	background:#DB4D6D;
}
.works-box li.box9 {
	background:#FEDFE1;
}


footer {
  width:100%;
  height:400px;
  clear:both;
  background:#FFFFFF;
}

有名フォントの代替フォントとしてGoogleフォントを使う

webnaut.jp