即実践 手を動かして6時間でjQueryをマスターしよう。知識、経験ゼロからjQueryを使いこなそう
3.9 (170 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
1,280 students enrolled

即実践 手を動かして6時間でjQueryをマスターしよう。知識、経験ゼロからjQueryを使いこなそう

WEBページ制作の花形技術jQueryを楽々マスター。デザイン力、プログラミング力を確実にランクアップさせます。
3.9 (170 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
1,280 students enrolled
Created by 村守 康
Last updated 8/2018
Japanese
Current price: $41.99 Original price: $59.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 6 hours on-demand video
  • 1 downloadable resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • このコースを終了するとjQueryを使ってホームページサイトに画像の自動入れ替えやドロップダウンメニューなど最新の機能を実装でき、WEB業界の現場で通用する即戦力が身につきます。
  • ウエブサイトに劇的な効果を実装できる技術
  • javascriptの入門講座にもなり、javascriptの基礎が学習できます。
  • 本コースはさらに続編が随時公開されます。コース受講者は続編を無料で受講できます。
Requirements
  • 特に経験は必要有りませんが、htmlとCSSについての知識があればより理解しやすくなります。
  • 学習を始める前に練習素材をダウンロードしてください。練習素材はレクチャー1の画面左上の「リソースが利用可能です」の表示部分をクリックするとダウンロードできます。zipファイルに圧縮されているので解凍してお使いください。
  • このコースではプログラミング用のテキストエディターとしてAdobe社の「Brackets」を使っています。他のエディターでももちろん大丈夫ですが、Bracketsをお使いいただくとより受講が楽になります。BracketsはAdobe社のサイトから無料でダウンロードできます。
Description

 このコースはjQueryを学ぶためのわかりやすい講座です。このコースを終了するとjQueryを使ってホームページサイトに画像の自動入れ替えやドロップダウンメニューなど最新の機能を実装できるスキルを身に付けることができます。全編を手を動かして作品を制作しながら解説しているので、理論や機能を単独で学ぶ講座に比べ、飽きることがありません。

jQueryでホームページサイトを劇的に変える力を身に付けよう

・jQueryについて必要な知識はすべて基本からていねいに分かりやすく説明しているので、これだけでライブラリやプラグインを使う力が身につきます。
・「実際に手を動かしてコードを書き」、実践的な指導で即戦力がつきます。
・解説はすべて動画で行い、現役のデザイナーがページを制作する過程をマウスの動きひとつまで収録しています。
・ナレーション付きでわかりやすく解説しています。
・必要な画像素材など作業に必要な素材はすべて添付されています。
・javascriptとCSS3についても丁寧に解説しています。

WEB業界で活躍できるjQueryのスキルを確実に身につけます

このコースを終了するとjQueryを使ってホームページサイトに画像の自動入れ替えやドロップダウンメニューなど最新の機能を実装できるスキルを身に付けることができます。

ホームページ編集ソフトなど準備するものは何もありません。インターネットにつながったパソコンがあればそれだけで大丈夫です。 

学習内容

8つのセクション、63本のビデオ、合計6時間の講座で集中して学べます。

Who this course is for:
  • jQueryを学習してhtmlとCSSではできない効果をサイトページに実装したい方
  • 速修でjQueryを学びたい方
  • 最新のサイト制作スキルを身に付けたい方
  • HTML5とCSS3だけでは限界を感じている方
Course content
Expand all 63 lectures 05:50:45
+ はじめに
4 lectures 20:49

jQueryを使えばサイトページに大きな魅力を加えることができます。このレクチャーではjQueryでどんなことができるかや学習に入る前に必要な準備について説明しています。

学習に入る前に、このコースの学習に必要な素材ファイルをダウンロードをしておいてください。素材集はこのページの左上に表示されている「リソースが利用可能です」というボタンをクリックしてダウンロードします。ダウンロードしたファイルはzip形式で圧縮されているので、これをダブルクリックして解凍し、できあがった「sozai」というフォルダが素材ファイル集です。これをデスクトップに置いて学習を始めましょう。

Preview 02:38

jQueryはjavascriptのライブラリ集です。このレクチャーではjQueryを使って実現した2つの効果を実際に表示して見せて説明しています。

jQueryとは
03:24

jQueryはサイトページのHTMLではどのように書かれているのでしょう。このレクチャーでは実際のページのHTMLコードをエディターで表示して、その中でjQueryがどこにどんな風に書かれているかを見ます。

jQuery実装のしくみ
06:57

jQueryをページに実装するにはどんな作業をしなければいけないのでしょう。このレクチャーでは実際にページに「プルダウンメニュー」と「画像のスライド」を実装する様子を簡単に動画でお見せして概要を理解します。

Preview 07:50
+ jQuery 最初に押さえておくこと
6 lectures 25:03

jQueryがjavascriptのライブラリ集であること。jQueryを使えばjavascriptを使って複雑で長いコードで実装していたしくみを簡単に実装できることを説明しています。

jQueryとjavascriptの関係
03:14

jQueryをページに実装するために最初にしなければいけないこととしてjQueryライブラリのページへの読み込みがあります。この方法をこのレクチャーでは説明しています。

最初にやるべきことは
03:21

jQueryライブラリをhtmlページに読み込むための命令を実際に書いて練習します。

jQuery ライブラリの読み込み
05:36

さきほど記述したスクリプトについて解説します。

読み込みスクリプトの解説
04:34

先ほど読み込みのスクリプトが書かれたhtmlページをブラウザでプレビューして実際にjQueryが読み込まれているかどうかを確認してみましょう。このためにAlertというjQueryのスクリプトをもうひとつページに記述してプレビューします。

Preview 05:09

さきほど書いたAlertのスクリプトについて、その構文を解説します。

jQueryスクリプトの説明
03:09
+ jQuery文法の基礎
12 lectures 01:05:25

このセクションからいよいよjQueryの文法についての学習をはじめます。まずhtml文書をひとつよういして、簡単なテキストを表示し、それをjQueryで変化させるスクリプトを書いてみます。

簡単なjQueryを書いてみよう
07:22

jQuery構文のなかで最も基礎的な要素「セレクタ「と「メソッド」について、先のレクチャーで書いたスクリプトを例に説明します。

Preview 08:19

先のレクチャーで書いたhtmlページを使って、さらにセレクタとメソッドの応用的な使い方を練習をします。このレクチャーでは特にセレクタがCSSのセレクタの指定と書き方が共通していることを理解します。

セレクタとメソッドの応用練習
04:47

引き続きセレクタについて練習します。このレクチャーではセレクタの子要素の指定について学びます。

セレクタの詳細
04:44

ここからメソッドについて学びます。このレクチャーではcssというメソッドを使って、jQueryでcssスタイルシートの内容を書き替えてみます。この例でもjQueryとCSSの書き方が似ていることが理解できます。

メソッドの詳細
03:24

ひとつのメソッドで複数の指定をする場合、複数の指定を一行にまとめて書くことができます。このレクチャーではメソッドを効率的に短く書く方法を紹介します。

メソッドの効率的な書き方
05:47

数多くあるメソッドの中からcssを例に説明してきましたが、このレクチャーではその他に2つのメソッドtestとremoveを使ってみます。

その他のメソッド
07:25

メソッドをひとつのセレクタに対して複数記述する場合、メソッドチェーンという方法を使えば複数行にわたる指定も一行で書くことができます。このレクチャーではjQueryを劇的に短く、効果的に書けるメソッドチェーンについて解説します。

メソッドチェーン
03:35

このレクチャーではセレクタとメソッドにつづいて「イベント」について学習します。イベントとは「いつ、どこで、何を」の「いつ」に当たる部分の指定方法です。ここではまずhtmlファイルを書いて準備します。

イベント(1)
03:55

ひきつづきイベントについての学習です。クリックをすると要素の背景色が変化するという簡単なスクリプトを書いて、「クリックする」ことで変化を生じさせるイベントを理解します。

イベント(2)
05:45

新しいイベントの書き方、onイベントについて学習します。新しいバージョンのjQueryではイベントはonイベントを使って書くことが標準の書き方になります。このレクチャーではonイベントを使ったイベントの書き方、複数のイベントの登録方法を学びます。

onイベント
07:12

さきほどのonイベントにつづいて、このレクチャーではその逆のoffイベントについて学びます。このレクチャーでjQuery文法の基礎は終わりです。

offイベント
03:10
+ 実践的なjQuery文法
15 lectures 01:30:38

jQueryで動画ができるanimateというメソッドを学びます。最初に正円が左から右に動くだけの簡単なスクリプトを書いてみます。このレクチャーではjQueryのスクリプトを書く前にhtmlとcssの設定を行います。

Preview 06:45

このレクチャーでは先のレクチャーで書いたhtmlページにいよいよanimateを使ったjQueryスクリプトを書いて実行し、解説します。

jQueryの動画 animate(2)
07:55

このレクチャーでは先のhtmlページのjQueryに更に様々な変化をつけてanimateメソッドの応用を学びます。

animateの応用(1)
04:11

このレクチャーでもanimateメソッドの応用を学びます。ここではアニメーションの時間を指定する方法を学びます。

animateの応用(2)
05:25

jQueryではhtml文書のhtmlコードを直接編集して操作することもできます。ここではその例としてhideとshowという2つのメソッドを使ったスクリプトを学びます。このレクチャーではhtmlページをひとつつくってhtmlとcssのコードを書き次のレクチャーで行うhideメソッドのjQueryの練習のための準備をします。

htmlを直接操作するメソッド
06:32

まずhideメソッドを使った簡単なjQueryスクリプトを書いて、hideメソッドの使い方を学びます。

hideメソッド
07:18

同じようにして今度はshowメソッドを使って見ます。

showメソッド
02:57

ここでは先ほど学んだhideとshowメソッドの他に簡単なメソッドを追加して、簡単なアコーディオンメニューをjQueryで作ってみます。初めての本格的で実用に使えるjQueryスクリプトの記述です。このレクチャーではまず、html部分を書きます。

Preview 05:37

このレクチャーでは先ほどのhtml文書にcssスタイルシートを書いて、jQueryスクリプトを書く前の段階にまで仕上げます。

アコーディオン(2)
05:21

htmlとcssができたので次はいよいよアコーディオンのjQueryスクリプトを書きます。このレクチャーではhideとslideUpメソッドを使ったスクリプトを書きます。

アコーディオン(3)
07:23

最後にslideDownメソッドを使ってアコーディオンを完成させます。

アコーディオン(4)
05:31

同じ処理を何度も行う場合、その処理を関数に登録することで2回目以降の処理はその関数を呼び出すだけで実行できます。このレクチャーは関数の概要を説明し、次のレクチャーで行う関数の練習のためにhtml ページを準備します。

関数の概要
03:38

このレクチャーでは関数のスクリプトを書くために簡単なhtmlページを作ります。htmlページにhtmlとcssのコードを書きます。

関数の使い方(1)
06:30

このレクチャーでは関数を使わずに同じ処理を3回繰り返すjQueryスクリプトを書きます。

関数の使い方(2)
06:23

最後に関数を使ってjQueryを書き直します。このレクチャーでjQuery文法の説明が終わりです。

関数の使い方(3)
09:12
+ カルーセル
5 lectures 30:37

このセクションでは画像をスライドさせる機能、「カルーセル」の例として”Bxslider”というプラグインをサンプルページに実装します。まずBxsliderの機能をサンプルで確認し、次にBxsliderのサイトページで実装の手順を確認します。

Preview 05:27

Bxsliderのサイトページから必要なファイルをダウンロードし、コンピュータ内のサイトに保存しておきます。

ファイルのダウンロード
07:41

jQueryのライブラリを読み込むスクリプトを書き、サイトに保存したcssファイルへのリンクを行います。

jQueryライブラリの読み込み
06:13

htmlページにナビゲーション部分のhtmlとカルーセルを実現するjQueryをBxsliderからコピーペーストし完成です。

htmlとjQueryの記述
06:03

Bxsliderの豊富なオプションを使ってみます。表示の時間や画像のスライドの方法など100種類近くのオプションの設定方法をみます。

オプションの設定
05:13
+ プルダウンメニュー
8 lectures 48:46

サンプルを見てプルダウンメニューの概要を確認し、jQueryを実装するhtmlページを準備します。

htmlページの準備
05:06

準備したページにプルダウンメニュー用のhtmlを書きます。3段の孫メニューまで用意しましょう。

html部分の編集(1)
07:31

引き続きhtml部分の編集を行います。

html部分の編集(2)
06:18

つづいてCSSスタイルシートの設定を行います。レスポンシブWEBデザインに対応させるため、幅をパーセントで指定していることに注意してください。

CSSスタイルシートの設定(1)
06:41

さらにCSSスタイルシートを設定します。

CSSスタイルシートの設定(2)
07:14

スクリプトを書く前に処理の手順を確認しておきます。ひとつひとつの処理を分解して、jQueryでどのようにスクリプトを書くか考えながら処理を箇条書きにしておきます。

処理の手順確認
04:33

このレクチャーでjQueryスクリプトを記述します。手順を確認しながら間違いのないように書きましょう。

jQueryスクリプトの記述
06:52

プレビューしてみて動作を確認し、不満のある部分は修正します。

プレビューと修正
04:31
+ Back-to-top
3 lectures 20:57

ページのトップに戻るボタンを配置するjQueryです。アンカー要素を配置しただけのボタンと違って、下部へのスクロールがないときは表示されず、スクロールしても常に同じ位置にボタンが表示されるback-to-topボタンの動作をサンプルで確認します。

Back-to-topの概要
06:58

このレクチャーではjQueryライブラリの読み込み設定とback-to-topボタンを配置するhtmlを書き込みます。

jQueryライブラリの読み込みとボタンの配置
06:06

jQueryスクリプトとCSSの設定をback-to-topのサイトページからコピーペーストし完成させます。CSSでは初期状態では表示させないようにdisplay: noneの設定を忘れないように行います。保存して、プレビューで確認し、修正をして完成させます。

jQueryスクリプトとCSS
07:53
+ Lightbox
10 lectures 48:30

Lightboxとはどんな機能か。サンプルを見てLightboxの概要を理解します。

Lightboxの概要
02:50

まずLightboxを組み込むhtmlファイルの準備をします。htmlファイルを用意し、Lightboxで使用する画像4枚をhtmlページに配置します。

htmlに画像の配置
07:42

配置した画像は単にhtmlページ内に置かれただけなので大きさも位置も整っていません。CSSスタイルシートを設定して、4枚の画像を横1列に均等に配置させます。

Preview 06:13

画像の間に間隔をとります。CSSで1番目の要素のみ設定を変える方法を学びます。

CSSの設定(2)
04:58

上下の要素との間にoverflow: hiddenを使ってpaddingで正しく間隔を空ける方法を学びます。

CSSの設定(3)
03:42

Lightboxの公式ページを開いて、実装の方法を確認します。

Lightbox実装の手順
03:28

Lightboxを実装するために必要なファイルを公式ページからダウンロードし、サイト内に置きます。

必要なファイルの読み込み
04:00

サイト内に置かれたcssファイルとjsファイルへのリンクをhtmlページのheadタグ内に書き、さらにjQueryライブラリが読み込まれているか確認します。

実行のスクリプトを記述
03:33

htmlファイルの画像にリンクを設定し、Lightboxが正しく動作するようにa要素内にrelを書きます。

リンクの設定
07:21

実装されたLightboxにオプションを設定し、表示の時間や画像のサイズをカスタマイズしてみます。

オプションの設定
04:43