読者です 読者をやめる 読者になる 読者になる

WEBサイト制作の勉強|フェリカテクニカルアカデミー

WEBサイト制作の勉強の為の解説ブログ。東京池袋のフェリカテクニカルアカデミーでは求職者支援訓練の一環として、WEBサイト制作を学ぶことができます。

ユーザビリティーを考えたjQuery

Webサイト制作

Webサイトを作る際には、ユーザーが迷うこと無く目的地に辿り着けるようなレイアウトや導線をしっかり考えます。
ユーザーがストレスを感じないように、ナビゲーションボタンの位置などにも気を配り、必要ならjQueryなどの動きをつけましょう。

今回の場合は

  • スライドをbxsliderで動かす。
  • ページ内リンクをスムーススクロールで動かす。
  • ナビゲーションがある程度スクロールすると固定になる。

の機能をつけます。

デモページ

スムーススクロール



index.html

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>スムーススクロール</title>
<link rel="stylesheet" href="css/jquery.bxslider.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/jquery.bxslider.js"></script>
<script>
$(document).ready(function(){
 $('.bxslider').bxSlider({
  auto: true,
  autoControls: true
});
});
</script>
<script>
//スムーススクロール
$(function(){
	$('a[href^=#]').click(function(){
		var speed = 500;
		var href= $(this).attr("href");
		var target = $(href == "#" || href == "" ? 'html' : href);
		var position = target.offset().top;
		$("html, body").animate({scrollTop:position}, speed, "swing");
		return false;
	});
});
</script>
<script>
//ナビゲーションがスクロールすると固定になる
$(function() {
 var nav = $('#nav'),
 offset = nav.offset();
$(window).scroll(function () {
  if($(window).scrollTop() > offset.top - 0) {
    nav.addClass('fixed');
  } else {
    nav.removeClass('fixed');
  }
    });
});
</script>
<style>
/* CSSリセット */
html, body, div, h1, h2, h3, h4, h5, h6,p, blockquote, pre,
address,ul, ol, li, dl, dt, dd,table, th, td, form, fieldset {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
  "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
ul, ol {
  list-style: none; /* マーカーを消す */
}
a {
  text-decoration: none; /* 下線を消す */
}
img {
  border: 0;
  vertical-align: bottom;  /* 画像の下の隙間を無くす */
}


/*ページのスタイル*/
body {
  /* 画像ファイルの指定 */
  background-image: url(img/bg.png);
   
  /* 画像を常に天地左右の中央に配置 */
  background-position: center center;
   
  /* 画像をタイル状に繰り返し表示しない */
  background-repeat: no-repeat;
   
  /* コンテンツの高さが画像の高さより大きい時、動かないように固定 */
  background-attachment: fixed;
   
  /* 表示するコンテナの大きさに基づいて、背景画像を調整 */
  background-size: cover;
   
  /* 背景画像が読み込まれる前に表示される背景のカラー */
  background-color: #464646;
}
#container {
  width: 800px;
  margin: 0 auto;
}
#box1 {
  width: 800px;
  height: 500px;
  background: rgba(240, 96, 96, 0.7);
}
#box2 {
  width: 800px;
  height: 500px;
  background: rgba(243, 181, 98, 0.7);
  padding-top: 70px;
}
#box3 {
  width: 800px;
  height: 500px;
  background: rgba(242, 235, 191, 0.7);
   padding-top: 70px;
}
#box4 {
  width: 800px;
  height: 500px;
  background: rgba(140, 190, 178, 0.7);
  padding-top: 70px;
  margin-bottom: 100px;
}
p {
  position: fixed;
  bottom: 50px;
  right: 100px;
}
ul#nav {
  width: 800px;
  overflow: hidden;
  height: 50px;
  list-style: none;
  border-top: 5px solid #FFF;
   border-bottom: 5px solid #FFF;
}
#nav li {
  width: 200px;
  float: left;
}
#nav li a {
  display: block;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-right: 5px solid #FFF;
  font-size: 24px;
  color: #FFF;
}
#nav li.top a {
  border-left:  5px solid #FFF;
}
.fixed {
  position: fixed;
  top: 0;
}
</style>
</head>
<body id="top">
<div id="container">
<div id="header">
<ul class="bxslider">
  <li><img src="img/01.png"></li>
  <li><img src="img/02.png" /></li>
  <li><img src="img/03.png" /></li>
</ul>
</div>
<ul id="nav">
<li class="top"><a href="#box1">box1</a></li>
<li><a href="#box2">box2</a></li>
<li><a href="#box3">box3</a></li>
<li><a href="#box4">box4</a></li>
</ul>
<div id="box1">box1</div>
<div id="box2">box2</div>
<div id="box3">box3</div>
<div id="box4">box4</div>
</div>
<p><a href="#top">TOPに戻る</a></p>
</body>
</html>