サイトに動きをつけてくれる「JavaScript」。

ここでは簡単な基本を理解しつつ、ポートフォリオサイトにJavaScript（jQuery）を追加していきましょう。

[imgad]

目次

ポートフォリオサイトのJavaScript（jQuery）の基本

前記事、前々記事のHTML・CSSを元に制作していきます。

デモサイト

まず上記のボタンからデモサイトを見てください。

下にスクロールしていくと、画像などがふわっと表示されますよね。

これはこの記事で紹介するJavaScript（jQuery）を使っています。

他にも様々なことができるのですが、まずは基本を抑えつつ、実際に手を動かしてみてください。

JavaScript（jQuery）の基本紹介

デモサイトはjQueryを使用している

JavaScriptやjQueryとなんなの？という状態ですよね。

簡単に言うと、「JavaScriptを簡単に記述できるようにしたものがjQuery」と覚えておいてください。

どこに書く？

書く場所は２パターンあります。

1.HTMLに書く場合

まず１つ目はこの記事で紹介するやり方です。

書く場所は＜/body＞のすぐ上に書くことがポイントです。

HTML


<!DOCTYPE html>
<html lang="ja">
<head>
	<title>Sample</title>
</head>
<body>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$('.wrap div,.wrap h2').css("opacity","0");
			$(window).scroll(function (){
				$(".wrap").each(function(){
					var imgPos = $(this).offset().top;    
					var scroll = $(window).scrollTop();
					var windowHeight = $(window).height();
					if (scroll > imgPos - windowHeight + windowHeight/5){
						$("div,h2",this).css("opacity","1" );
					} else {
						$("div,h2",this).css("opacity","0" );
					}
				});
			});
			$('#nav-open').on('click', function () {
				$('#nav-open, .nav').toggleClass('show');
			});
		});
	</script>
</body>
</html>
2.外部のファイルに書く場合
js

画像のように新しく「js」というフォルダを作ります。

script

その中に「script.js」という名前で新しくファイルを追加しました。（名前はなんでも大丈夫です）

上記の準備ができたら、HTMLを少し書き換えます。そして「script.js」にHTMLに書いていたjQueryをコピペします。

これだけで同じ処理になります。

HTML


<!DOCTYPE html>
<html lang="ja">
<head>
	<title>Sample</title>
</head>
<body>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script type="text/javascript" src="js/script.js"></script>←ここを変えました
</body>
</html>
jQuery


$(function(){
	$('.wrap div,.wrap h2').css("opacity","0");
	$(window).scroll(function (){
		$(".wrap").each(function(){
			var imgPos = $(this).offset().top;    
			var scroll = $(window).scrollTop();
			var windowHeight = $(window).height();
			if (scroll > imgPos - windowHeight + windowHeight/5){
				$("div,h2",this).css("opacity","1" );
			} else {
				$("div,h2",this).css("opacity","0" );
			}
		});
	});
});

実践：ポートフォリオサイトにjQueryを追加していく

ここからは実際にデモサイトでも使用しているjQueryを解説していきます。

かなりややこしいので、分解して解説していきますので、ポイントを抑ええつつ、サイトに動きをつけていきましょう。

jQueryを読み込む・書く場所を設置

HTML


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript"></script>

jQueryは、HTMLやCSSと違い、普通に書くだけでは画面に反映されません。

とはいえ、コピペでOKなので、記述していきましょう。

jQueryを読み込む

HTML


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

このコードはjQuery 3.xといってjQueryの最新バージョンとなっています。

書く場所はHTMLのhead内かbody内に書くのですが、今回はbodyタグの</body>のすぐ上に書いてください。

HTML


<!DOCTYPE html>
<html lang="ja">
<head>
	<title>Sample</title>
</head>
<body>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
↑ここのすぐ上
</body>
</html>

書く場所を設置

HTML


<script type="text/javascript"></script>

このコードは「ここにJavaScriptのコードを書くよ」という意味です。

実際にここに書いていきますが、内容に関しては次で解説していきます。

書く場所は、「jQueryを読み込むコード」の下に設置してください。

コードの細部を解説

jQuery


<script type="text/javascript">
	$(function(){
		$('.wrap div,.wrap h2').css("opacity","0");
		$(window).scroll(function (){
			$(".wrap").each(function(){
				var imgPos = $(this).offset().top;    
				var scroll = $(window).scrollTop();
				var windowHeight = $(window).height();
				if (scroll > imgPos - windowHeight + windowHeight/5){
					$("div,h2",this).css("opacity","1" );
				} else {
					$("div,h2",this).css("opacity","0" );
				}
			});
		});
		$('#nav-open').on('click', function () {
			$('#nav-open, .nav').toggleClass('show');
		});
	});
</script>

functionを省いてもいい

ここではfunctionというものを書いていますが、HTML側に書く場合省くことができます。つまり下記のようなことができるということです

jQuery


<script type="text/javascript">
	$('.wrap div,.wrap h2').css("opacity","0");
	$(window).scroll(function (){
		$(".wrap").each(function(){
			var imgPos = $(this).offset().top;    
			var scroll = $(window).scrollTop();
			var windowHeight = $(window).height();
			if (scroll > imgPos - windowHeight + windowHeight/5){
				$("div,h2",this).css("opacity","1" );
			} else {
				$("div,h2",this).css("opacity","0" );
			}
		});
	});
	$('#nav-open').on('click', function () {
		$('#nav-open, .nav').toggleClass('show');
	});
</script>

ここはDOMというものがわかると理解しやすいのですが、「DOMが構築されてから実行するよ」という意味になります。

今回は$(function(){});を消してください。

cssの透明度を変更

jQuery


$('.wrap div,.wrap h2').css("opacity","0");

これを日本語に訳すと以下になります。

（.wrapのdiv と .wrapのh2）のcssを（透明度を０にする）;

HTMLで言うと「ここの部分」になります

HTML


<section class="wrap about cf">
	<h2 class="title">About</h2><!-- ←ここのh2 -->
	<div class="profile-backimg"><!-- ←ここのdiv -->
		<img src="images/profile-img.jpg">
		<div class="name">氏名　太朗</div><!-- ←ここのdiv -->
		<div class="sns"><!-- ←ここのdiv -->
			<a href="#"><i class="fab fa-twitter"></i></a>
			<a href="3"><i class="fab fa-instagram"></i></a>
		</div>
	</div>
	<div class="profile"><!-- ←ここのdiv -->
		<ul class="career">
			<li>WEBサイト制作・デザイン</li>
			<li>イラストレーター</li>
			<li>写真家</li>
		</ul>
	</div>
</section>

スクロールした時の動き

jQuery


$(window).scroll(function (){
	$(".wrap").each(function(){
		var imgPos = $(this).offset().top;    
		var scroll = $(window).scrollTop();
		var windowHeight = $(window).height();
		if (scroll > imgPos - windowHeight + windowHeight/5){
			$("div,h2",this).css("opacity","1" );
		} else {
			$("div,h2",this).css("opacity","0" );
		}
	});
});

スクロールしてふわっと表示させているのがここです。

特に下記の部分に色々とCSSを追加すると、一風変わったWEBサイトに変身しますよ！

jQuery


if (scroll > imgPos - windowHeight + windowHeight/5){
		$("div,h2",this).css("opacity","1" );
	} else {
		$("div,h2",this).css("opacity","0" );
}

ハンバーガーメニュー

jQuery


$('#nav-open').on('click', function () {
	$('#nav-open, .nav').toggleClass('show');
});

on click

jQuery


$('#nav-open').on('click', function () {});
（#nav-open）をクリックしたら…

上記のような意味になります。

classを追加

jQuery


$('#nav-open, .nav').toggleClass('show');
（#nav-open と .nav）にclass名（show）を追加

jQueryはclassを追加することができます。

追記：動きをさらに追加

わかりにくいかもしれませんが、下にスクロールすると「要素」がふわっと下から表示されます。

コードに大きな変更はありませんが、下記をご覧ください

jQuery


<script type="text/javascript">
	$(function(){
		$('.wrap div,.wrap h2').css({
			"opacity":"0",
			"transform":"translateY(50%)",
			"-ms-transform":"translateY(50%)"
		});
		$(window).scroll(function (){
			$(".wrap").each(function(){
				var imgPos = $(this).offset().top;    
				var scroll = $(window).scrollTop();
				var windowHeight = $(window).height();
				if (scroll > imgPos - windowHeight + windowHeight/2){
					$("div,h2",this).css({
						"opacity":"1",
						"transform":"translateY(0)",
						"-ms-transform":"translateY(0)"
					});
				} else {
					$("div,h2",this).css("opacity","0" );
				}
			});
		});
	});
</script>

「jQuery」でCSSを追加しました

要素の初期値をCSSで設定
jQuery


$('.wrap div,.wrap h2').css({
	"opacity":"0",
	"transform":"translateY(50%)",
	"-ms-transform":"translateY(50%)"
});

.wrap divと.wrap h2のCSSを変更しています。

transform

jQuery


"transform":"translateY(50%)",
"-ms-transform":"translateY(50%)"

イメージとしては、本来要素が表示される場所（初期位置）より50％下にあるという認識でOKです。説明が難しいので下記をご覧ください

transform

特に注意すべきところはtranslateYのYの部分です。

Yは縦方向に対して、ここをXに変えれば横方向に要素が動きます。

色々触ってみてください。

もう１つのtransform

jQuery


$("div,h2",this).css({
	"opacity":"1",
	"transform":"translateY(0)",
	"-ms-transform":"translateY(0)"
});

こちらのtransformのtranslateYには”0″が指定されています。

初期位置を50%下にしているので、スクロールすることによって0に戻ります。

これは「元の位置＝０位置に戻す」という認識でOK。

注意ポイント

もしうまく動作しない場合は、下記の注意ポイントを確認してみてください。

  • $〜.css({});の{}が抜けている
  • 「;」がどこか抜けている
  • 「,」が抜けている
    ※jQueryで連続してCSSを書く場合は、必ず「,」を記入しましょう
  • CSSが間違っている

まとめ：JavaScript（jQuery）を使うと色々なサイトが作れます

jQueryを覚えると動きのあるサイトが作れるので、ぜひこの際に勉強してみてください。

デモサイトで使っているjQuery
HTML


<!DOCTYPE html>
<html lang="ja">
<head>
	<title>Sample</title>
</head>
<body>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script type="text/javascript">
		$('.wrap div,.wrap h2').css("opacity","0");
		$(window).scroll(function (){
			$(".wrap").each(function(){
				var imgPos = $(this).offset().top;    
				var scroll = $(window).scrollTop();
				var windowHeight = $(window).height();
				if (scroll > imgPos - windowHeight + windowHeight/5){
					$("div,h2",this).css("opacity","1" );
				} else {
					$("div,h2",this).css("opacity","0" );
				}
			});
		});
		$('#nav-open').on('click', function () {
			$('#nav-open, .nav').toggleClass('show');
		});
	</script>
</body>
</html>
ポートフォリオサイトまとめへ
あわせて読みたい記事
『いつかは仕事を辞めたい』なら今すぐやっておくべきたった1つのこと
あなたに向いてる仕事がすぐにわかるたった1つの方法
SHARE