求職者支援訓練webサイト制作科授業資料

フェリカテクニカルアカデミー池袋の求職者支援訓練webサイト制作科7月クラスの授業解説ブログです。

既存サイトの再構築 キリン編

f:id:yachin29:20161212121318j:plain

既存のサイトをトレースし、コーディングをするのは非常に良い勉強になります。
見ているだけでは解らない事も自身で組み直す事で、見えてきたり、理解出来たりする事があります。
開発者の意図や設計思想をしっかりと理解し、コーディングし直す事がこの課題の1番のポイントです。

今回はまず中央のギャラリー部分の作成をします。

  • 960px幅
  • 5カラム
  • 画像同士の隙間 20px

まずはギャラリーを作る際に、どういうサイズで画像をレイアウトしていけば良いか考えましょう。


Gridpx:グリッドデザイン計算ツール | Webデザイン便利ツール


またスマホレイアウトで、どういう見せ方にするべきか、またその為にどういう工夫がされているかを、制作しながら理解していきましょう。

グリッドデザイン計算ツール

グリッドデザインを制作する場合、各コンテンツのサイズを1px単位でしっかり計算し、正しい値を出すことが大事です。どこかで1pxでもズレてしまうと、それが後々色々な所に影響が出てしまうので、事前にしっかりと計算しておきましょう。web上には便利な計算ツールがあるので、そういった物を使うのも良いでしょう。


www.kenjisugimoto.com


san.ta2ya.com


grid.guide

CSS3のアニメーションを使ったスクロールナビゲーション

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Scroll Fixed Navigation</title>
<meta name="viewport" content="width=device-width">
<style>
html,body,h1,p,ul,li {
  margin: 0;
  padding: 0;
}
ul {
  list-style:none;
}
a {
  text-decoration:none;
  color: #0b8793;
}


body {
  background: #CCC;
}
#content {
  height: 1000px;
  margin: 100px auto;
  text-align: center;
  line-height: 1.9;
}
#content p {
  margin-bottom: 1em;
}
#main-visual {
  background: #1d76a6;
  background: linear-gradient(90deg, #360033 10%, #0b8793 90%);
  height: 700px;
}
footer {
  padding: 30px;
  text-align: center;
  background:#BBB;
}
footer a {
color: #666;
}

.inner {
  width: 980px;
  margin: 0 auto;
}
.inner:after {
  display: block;
  content: "";
  clear: both;
}

		/* header */
#top-head {
  position: fixed;
  width: 100%;
  margin: 0 auto;
  padding: 30px 0 0;
  z-index: 999;
}
#top-head:after {
  display: block;
  content: "";
  height: 1px;
  background: #fff;
  width: 980px;
  margin: 30px auto 0;
}
#top-head a, #top-head {
  color: #fff;
}
#top-head .inner {
  position: relative;
 }
#top-head .logo {
  float: left;
  font-size: 32px;
  margin-left: 25px;
}
#global-nav ul {
  list-style: none;
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: 14px;
}
#global-nav ul li {
  float: left;
  position: relative;
}
#global-nav ul li a {
  padding: 0 30px;
}

		/* Btn Hover */
#global-nav ul li:after {
  position: absolute;
  display: block;
  content: "";
  width: 100%;
  height: 3px;
  bottom: -20px;
  transition: all 0.3s ease;
}
#global-nav ul li:hover:after {
  background: #fff;
  bottom: -30px;
}

		/* Fixed */
#top-head.fixed {
  padding-top: 15px;
  background: #fff;
  background: rgba(255,255,255,.7);
}
#top-head.fixed .logo {
  font-size: 24px;
  color: #333;
  margin-left: 10px;
}

#top-head.fixed:after {
  width: 100%;
  margin-top: 20px;
}
#top-head.fixed #global-nav ul li a {
  color: #333;
  padding: 0 20px;
}

		/* Fixed Btn Hover */
#top-head.fixed #global-nav ul li:after {
  bottom: -10px;
}
#top-head.fixed #global-nav ul li:hover:after {
  background: #0b8793;
  bottom: -20px;
}

		/* transition */
#top-head,#top-head:after,#top-head .logo,#global-nav ul li,#global-nav ul li a {
  transition: all 0.3s ease;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
	<script>
			$(function() {
				var $header = $('#top-head');
				$(window).scroll(function() {
					if ($(window).scrollTop() > 50) {
						$header.addClass('fixed');
					} else {
						$header.removeClass('fixed');
					}
				});
			});
	</script>
</head>
<body>
<header id="top-head">
<div class="inner">
<h1 class="logo">メインタイトル</h1>
<nav id="global-nav">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">PRODUCT</a></li>
<li><a href="#">WORKS</a></li>
<li><a href="#">COMPANY</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
</div>
</header>
<div id="main-visual"></div>
<div id="content">
<p>コンテンツ部分です。</p>
</div>
<footer>
<p>フッターです!</p>
</footer>
</body>
</html>

Waypointsを使ったスクロールナビゲーション

Getting Started • Waypoints


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQuery Waypoints</title>
<meta name="viewport" content="width=device-width">
<style>
html,body,h1,ul,li {
  margin:0;
  padding:0;
}
ul {
  list-style:none;
}
a {
  text-decoration:none;
  color:#FFFFFF;
}


header{
  background: #222; 
  color: #fff;
  width: 100%;
  text-align: center;
}

header h1 {
  padding: 40px 0;
}


nav {
  background:#666;
}
ul.gnav {
  width:600px;
  height:50px;
  overflow:hidden;
  margin:0 auto;
  background:#666;
}
ul.gnav li{
  width:120px;
  float: left;
}
ul.gnav li a {
  display:block;
  line-height:50px;
  border-left:1px solid #CCC;
}
ul.gnav li:last-child a {
   border-right:1px solid #CCC;
}
#content {
	height: 1500px;
	padding: 100px;
	text-align: center;
}
footer{
	height: 200px;
	background: #ddd;
}

/*スクロール後のスタイル*/
header.scroll{
  position: fixed;
  top:0;
  left: 0; 
  opacity: 0.85;
}
header.scroll h1{
  position: fixed;
  top:-28px;
  left:20px;
  font-size:16px;
  z-index:9999;
}
</style>


<!-- script -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="jquery.waypoints.js"></script>
<script>
$(function() {
$("#content").waypoint({
handler: function(direction) {//
	if (direction == 'down') { //スクロールが下方の場合下記実行
		$("header").addClass('scroll');
		$("header.scroll").hide().slideDown(300);
	}else { //スクロールが下方以外の場合下記実行
	
		$("header.scroll").slideUp(200,function(){
			$("header").removeClass('scroll').slideDown(300);
		});
	}

}
});
});
</script>

</head>
<body>
<div id="container">
<header>
<h1>jQuery Waypoints</h1>
<nav>
<ul class="gnav">
<li><a href="#">menu</a></li>
<li><a href="#">menu</a></li>
<li><a href="#">menu</a></li>
<li><a href="#">menu</a></li>
<li><a href="#">menu</a></li>
</ul>
</nav>
</header>
<div id="content">
<p>コンテンツエリア</p>
</div>
<footer>
<p>フッターエリア</p>
</footer>
</div>
</body>
</html>

無限スクロールの制作

前回の内容を踏まえて、今回は検索エンジンが処理しやすい無限スクロールを作っていきましょう。

ポイント
・無限スクロールページを、JavaScript が無効でもアクセス可能な形にする。
・ページのタイトル・サイトURLの最適化
・コンテンツを細分化する事で表示スピードの向上

特にページのタイトルの最適化は非常に大事です。通常の無限スクロールは1枚のhtmlファイルに無数のコンテンツが記述されていますが、今回のようにhtmlファイルを細分化する事で、コンテンツに応じたより細かいタイトルやURLの設定が可能になります。


github.com

デモページ
http://yachin29.webcrow.jp/infini-scroll/

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jScroll</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container">
<h1>無限スクロール</h1>
<div class="wrapper">
<div class="pic">
<p><img src="img/01b.jpg"></p>
</div>
<div class="text">
<h3>新・平家物語</h3>
<p>『新・平家物語』は、吉川英治の歴史小説の大作。1950年から1957年まで「週刊朝日」に連載された。現行版は吉川英治歴史時代文庫全16巻。<br>
題材は『平家物語』だけでなく、『保元物語』『平治物語』『義経記』『玉葉』など複数の古典をベースにしながら、より一貫した長いスパンで源平両氏や奥州藤原氏、公家などの盛衰を描いた長編作品。</p>
</div>
</div><!--/.wrapper-->
<a href="http://yachin29.webcrow.jp/infini-scroll/book2/" id="next">next</a>
</div><!--/#container-->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="js/jquery.clever-infinite-scroll.js"></script>
<script>
		$('#container').cleverInfiniteScroll({
			contentsWrapperSelector: '#container',
			contentSelector: '.wrapper',
			nextSelector: '#next',
		});
	</script>
</body>
</html>

無限スクロールの導入

FacebookTwitterPinterestなどのソーシャルメディアサイトが使っている事で一躍有名になった無限スクロール(英: Infinite Scrolling)ですが、今でもシングルページを利用したウェブサイト、特にコンテンツの量が豊富なギャラリー的なサイトではよく見かけます。
しかし、よく見られるjQueryを使ったシンプルな無限スクロールはコンテンツをすべて1つのHTMLファイル上に記述しておいて、スクロールするたびに「display:block」と「display:none」を使って表示させていく、というものです。人が見る分にはこの形でも良いでしょうが、Googlebot に対してとなると話が変わってきます。

ご自身のサイトのニュース フィードやピンボードで、ユーザーの利便性を考えて無限スクロール(英語)を使用している方もいらっしゃるでしょう。しかし、Googlebot に対してとなると話が変わってきます。無限スクロールでは、クローラーがユーザーの行動(スクロールやボタンを押してさらにアイテムを読み込むなど)を常にエミュレートできるとは限らないため、フィードやギャラリー内のすべてのアイテムにアクセスできないことがあります。クローラーがアクセスできないコンテンツは、検索結果に表示されることもないでしょう。

無限スクロール ページからリンクされている個別のアイテムを検索エンジンがクロールできるようにするには、無限スクロールを分割した一連のページ群を生成するようにしましょう。

f:id:yachin29:20160216192134p:plain

Google ウェブマスター向け公式ブログ: 検索エンジンとの相性を考慮した無限スクロールのベストプラクティス


pushStateによるブラウザの履歴の更新

pushStateとは?

pushStateとは、HTML5でサポートされるAPIです。
ページを遷移せずHTML(の一部)を変えた場合でもブラウザに履歴を残し、また一意のURLを割り当てることが可能です。

HTMLの中身が変わってもAjaxはページを遷移しないのでURLが同じままです(#以下が入れ替わるだけで一意のURLとして処理しない)。

ブラウザの戻るボタンを押しても前のコンテンツを再び表示させることはできません。
本当に前のページに戻ってしまいます。

なのでGoogleは、クロール・インデックスできるように特殊な仕様をサポートしてくれたわけです。

しかしpushStateを使えば、Ajaxで変化させたそれぞれのコンテンツに対してユニークなURLを割り当てられるのです。

つまり検索エンジンにとってクロール・インデックスしやすくなります。

Googleの記事では、無限スクロールは次々にページを捲っていく事と同じとしている。そのため、無限スクロールで新しいコンテンツが表示される度にブラウザの履歴(URL)を更新しなければいけない。さらにスクロールでページを進んだり戻ったりする度にURLを更新させる必要があります。


さらにJavaScriptが切れている状態でも手動でページ遷移出来るような設定も取り入れ、検索エンジンとの相性を考慮した無限スクロールにカスタマイズしましょう。


www.suzukikenichi.com

digiday.jp

画像を遅延読み込みさせるjQueryプラグイン「Lazy Load」

Lazy Loadとは画像のレイジーローディング(遅延読み込み)を実装する為のjQueryプラグインです。前回やった無限スクロールと同様に画像を遅延読み込みさせる事で転送量の節約、ページの表示速度の向上に繋がります。
一見メリットだらけに思えますが、こういった遅延読み込みはメリット・デメリットがあります。どちらもしっかりと理解したうえで使用しましょう。

http://yachin29.com/lazyload/

メリット
ユーザーが見たい範囲分だけの画像が読み込まれるので、表示速度の向上につながる


デメリット
Googleクロールは必ずしも一番最後までスクロールするとは限らないので、全部のコンテンツがインデックス化されるかどうかは疑問



「Lazy Load」公式サイト
Lazy Load Plugin for jQuery



github」からデータをダウンロードしましょう
github.com



オプション等の解説サイト
syncer.jp