WEBサイト制作の勉強

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

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

スプリットレイアウト(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;
}