Webページに華やかな表現を! jQueryプラグイン基礎講座(スライドショー編)
4.2 (3 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
21 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Webページに華やかな表現を! jQueryプラグイン基礎講座(スライドショー編) to your Wishlist.

Add to Wishlist

Webページに華やかな表現を! jQueryプラグイン基礎講座(スライドショー編)

Webページにスライドショー表現を適用することができる様々な「 jQueryプラグイン」を使って、Webページを華やかに彩ろう!
4.2 (3 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
21 students enrolled
Last updated 12/2016
Japanese
Learn Fest Sale
Current price: $10 Original price: $20 Discount: 50% off
4 days left at this price!
30-Day Money-Back Guarantee
Includes:
  • 4 hours on-demand video
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • JavaScript や jQuery の基本のキ(概要・記述方法)を理解し、jQueryプラグインを使用した Webサイトへの動きのある表現(スライドショー)を実装することができます。
  • さまざまなタイプのスライドショー表現(3種類)を学習することで、Webサイトに華やかな印象・アクティブな印象を持たせることができるようになります。
View Curriculum
Requirements
  • 本講座は、あくまでも JavaScript / jQuery および jQueryプラグインの基本を学ぶ講座となっています。HTML や CSS の細かな解説などは行なっておりませんので、もし HTML などのスキルをお持ちでない方は 別途 各種講座や書籍などで学習されることをオススメいたします。
  • 本講座では、テキストエディタとして「Brackets」を使用しています。受講に際しては「Sublime Text」や「Atom」、「Coda」や「Dreamweaver」などのさまざまなテキストエディタにて受講いただけますが、ビデオレクチャーと同様の操作を行ないたい場合は、「Brackets」を使用することをオススメいたします。
  • 講座内で使用をする教材( jQuery_plugin_slideshow.zip )は、最初の講義「講座概要と受講準備」でダウンロードしていただけます。
  • 本講座では jQueryの使用に際して CDNという手法(講座内で解説)を使用するため、インターネット環境に接続した状態で動作確認を行なっていただく必要があります。ネット接続がない場合には Webページに設定をした動きが動作しない場合がありますことをご理解ください。
Description

私たちが普段から閲覧しているWebサイトには、その大小の違いこそあれ ほとんどのページに動的な表現が含まれています。

そして、その多くは JavaScriptによって表現されています。JavaScriptはプログラム言語の一つですから、さまざま動きや処理を実現することができます。

ただ、JavaScriptの全てを理解し イチからコードを書いていく作業は「Webデザイナー」や「Webコーダー」という役割でお仕事をされている方や、ご自身の趣味や仲間とのコミュニティー活動の中でWebページを作成している方にとっては、とてもハードルの高いものと言えるでしょう。

JavaScript や jQuery の基本のキを理解し、目的別に部品化・最適化された jQueryプラグインを使用することで、もっとライトに そして 苦手意識を持つことなく Webページの動的表現が行なえるようにと、当講座を作成いたしました。

架空のカフェサイトを作成して行く流れの中で、さまざまなスライドショー表現を実装しながら、「他にも jQueryプラグインを使ってみたい!」「もっと JavaScript自体の理解を深めて、イチからコードを書いて行けるようになりたい!」などといった気持ちを持っていただけると、とても嬉しく思います。

Who is the target audience?
  • 「Webデザイナー」や「Webコーダー」などのお仕事をなさっている方で【 JavaScriptに苦手意識 】をお持ちである皆さんに、教材サイトに楽しく動きをつけてもらうことで苦手意識をなくしていただければと思います。
  • Webページにスライドショー表現を手軽に実装したいと考えていらっしゃる方に、ビデオレクチャーを通して 手早く学んでいただければと思います。
Students Who Viewed This Course Also Viewed
Curriculum For This Course
Expand All 23 Lectures Collapse All 23 Lectures 03:58:36
+
JavaScript / jQuery 基礎パート
6 Lectures 01:02:32
  • あいさつ
  • 講座の概要説明
  • 受講生が知っておくべきことや準備すべきこと
Preview 07:20

  • JavaScriptの特徴
  • JavaScriptの メリット / デメリット
  • オブジェクトについて
  • メソッドについて
  • プロパティについて
  • 参考サイトの紹介
JavaScriptの概要
09:37

  • 素材の確認
  • head要素内のJavaScriptのコードを解説
  • イベントハンドラを解説
JavaScriptのコードを見てみよう
14:49

  • jQueryとは
  • jQueryの使用方法
  • 参考サイトの紹介
jQueryの概要
07:29

  • 素材を開く
  • jQueryコードの解説
jQueryのコードを見てみよう(1)
13:54

  • slideDown()メソッド / slideUp()メソッドについて
  • jQueryコードの修正
  • slideToggle()メソッドについて
jQueryのコードを見てみよう(2)
09:23
+
jQuery 基本記述パート
5 Lectures 57:44
  • 素材の確認
  • CDNによる jQueryの読み込み
  • jQueryのコードを書くための script要素の挿入
jQueryのコードを書いてみよう(1)
10:06

  • ready()メソッドについて
  • 省略構文について
  • 2つの情報パネルの非表示設定
jQueryのコードを書いてみよう(2)
14:33

  • 2つ目のタブをクリックした際の動きを記述(click()メソッド)
  • 3つの情報パネルの 表示 / 非表示 の動きを記述
jQueryのコードを書いてみよう(3)
07:58

  • 3つ目のタブをクリックした際の動きを記述
  • 1つ目のタブをクリックした際の動きを記述
  • コメントの挿入
jQueryのコードを書いてみよう(4)
10:24

  • 3つの情報パネルの jQueryオブジェクトを変数に格納
  • jQuery記述部分を外部JS化
jQueryのコードを書いてみよう(5)
14:43
+
jQueryプラグインパート
12 Lectures 01:58:20
  • jQueryプラグインとは
  • slickの紹介と素材ダウンロード
  • index.htmlの複製
Preview 10:57

  • 素材のプレビュー
  • スライドショー部分の画像挿入(箇条書きリスト)
jQueryプラグインを適用してみよう(slick編・2)
11:04

  • jQueryの読み込み(CDN)
  • slick用CSSファイルの読み込み(2ファイル)
  • slick用JavaScriptファイルの読み込み
jQueryプラグインを適用してみよう(slick編・3)
08:36

  • 動作用JavaScriptの記述
  • ブラウザプレビュー
  • その他のオプションなど
jQueryプラグインを適用してみよう(slick編・4)
09:43

  • widesliderの紹介
  • index.htmlの複製
  • wildesliderフォルダの作成
jQueryプラグインを適用してみよう(wideslider編・1)
05:51

  • 素材の作成(CSSファイル および JSファイル)
  • スライドショー部分の画像挿入
  • ul要素のid属性を削除
  • div要素へclass属性「wideslider」の追加
jQueryプラグインを適用してみよう(wideslider編・2)
12:17

  • jQueryの読み込み(CDN)
  • wideslider用CSSファイルの読み込み
  • wideslider用JavaScriptファイルの読み込み
  • JavaScriptファイルに スライド幅 / 高さ を設定
  • ブラウザープレビュー
  • JavaScriptファイルに ボタン/ページネーション の透明度を設定
jQueryプラグインを適用してみよう(wideslider編・3)
12:49

  • ページネーション および スライドショーの動きのカスタマイズ
  • ブラウザプレビュー
  • その他のオプションなど
jQueryプラグインを適用してみよう(wideslider編・4)
12:31

  • skipprの紹介と素材ダウンロード
  • index.htmlの複製
jQueryプラグインを適用してみよう(skippr編・1)
08:13

  • スライドショー部分の画像挿入(div要素)
jQueryプラグインを適用してみよう(skippr編・2)
08:39

  • jQueryの読み込み(CDN)
  • skippr用CSSファイルの読み込み
  • skippr用JavaScriptファイルの読み込み
jQueryプラグインを適用してみよう(skippr編・3)
07:00

  • 動作用JavaScriptの記述
  • ブラウザプレビュー
  • その他のオプションなど
  • おわりに
jQueryプラグインを適用してみよう(skippr編・4)
10:40
About the Instructor
CCF アカデミー
4.8 Average rating
28 Reviews
85 Students
5 Courses
ウェブデザイン / IT / ソフトウェア

『 Design of CreativeWork 』
 ー クリエイティブワーク( 仕事・人・スキル・ワークフロー )の最適化 ー

クリエイティブセンター福岡(CCF)は、福岡全体で SOHO/フリーランサーや制作会社が 仕事や教育を通じて大きな有機的に繋がっている状態を構築し、クリエイティブワークの最適化を図ります。
そして、CCFアカデミーでは オンライン/オフラインの教育コンテンツにより、クリエイターやマーケター、プランナーの支援をすることで、個人の教育サポート、ひいては クリエイティブ業界全体のサポートを行います。