11/12(Tue)

今日の生放送

jQuery基礎〜Webサイトに動きをつける〜

Webサイトに動きをつける、jQuery概論

第1回:2014年6月24日公開

30min

Webサイトに動きをつける、jQuery概論

おためし受講する(5分)

コース概要

jQueryの基礎を理解する全6回」の授業です。
前回の授業(HTML&CSSの特訓授業〜jQuery(プログラミング)に取り組む前にコーディングの復習〜)で学習したhtmlに、jQueryを実行するスクリプトを書いて行きます。

今回の授業は、「jQueryとはなにか?」という概要の理解です。簡単な説明は以下の通りです。

jQueryとは

ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計された軽量なJavaScriptライブラリです。Webデザインでは、Webサイトに動きをつけたい時などに用います。

このカリキュラムでは、「TOP画像を滑らかに横に動かす表示方法(カルーセル)」と「サムネイル画像をクリックするとホップアップ表示する方法(ライトボックス)」を学んでいきましょう。

jQueryに触れた事の無い方は、下記の授業も参考にして勉強しておきましょう。

レスポンシブなサイトにあっという間にjQueryを実装する
挫折した人のための、初心者速習html+css【JQueryでTOP画像がクルクル動くようにしてみよう編】
挫折した人のための、初心者速習html+css【JQueryで商品画像をポップアップさせよう編】

途中からでも参加できるように、演習課題はそこまでの段階が出来上がった物を配布しています。録画が受講できるようであれば、【WEBデザインのためのPhotoshop】全3回の事前受講をオススメします。

サイト制作の大まかな流れは、下記の様な物になります。

1)クライアント(お客様)へのヒヤリング
2)ターゲット設定
3)サイト設計(ワイヤーフレーム)
4)制作仕様書策定(デザインルール、コーディングルール策定)
5)開発(デザイン&コーディング)
6)ローカルテスト
7)テストサーバーレビュー(クライアントチェック)
8)リリース(本サーバーアップ)
9)ランニング(SEO解析)

この演習では、5番の開発の部分です。
完成した静的ページをユーザーさんのアクションでインタラクティブに動くページにブラッシュアップしていきます。

受講にあたって準備するもの

1)Sublimeのインストール(授業中コードを打つのに使います)
下記のURLからダウンロードしてください。
http://www.sublimetext.com/2
設定は何も必要ありません。インストールして授業が始まる時間に立ち上げられる様にだけしておけば大丈夫です。
※DreamWeaverが慣れている人は、こちらを使用されてもかまいません。

2)解凍ツール (授業中配布する教材の解凍に使います)
授業中にダウンロードしたファイルをすぐに解凍できる様になっていれば大丈夫です。(Mac OSXの場合はダブルクリックで展開します。windows7~の場合は右クリックのコンテキストメニュー「全て展開」を選択でOK)

3)その他のバージョンのOSは、MacであればApp StoreでWinArchiver Lite.appを検索してダウンロードしインストールしておきます。
Wiondwsであれば、下記のURLよりLhaplusをダウンロードし、インストールしておきます。
http://www7a.biglobe.ne.jp/~schezo/

担当の先生

参加したい受講生 : 1030

カテゴリー

タグ

サンプルファイル

授業で使用するファイル

※授業以外での利用は禁止します。

月額980円で、4,600本以上の授業が見放題

授業リスト

Webサイトに動きをつける、jQuery概論

2014年6月24日公開

30min.

jQueryの基礎を理解する全6回」の第1回目の授業です。
前回の授業(HTML&CSSの特訓授業〜jQuery(プログラミング)に取り組む前にコーディングの復習〜)で学習したhtmlに、jQueryを実行するスクリプトを書いて行きます。

今回の授業は、「jQueryとはなにか?」という概要の理解です。簡単な説明は以下の通りです。

 

jQueryとは

ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計された軽量なJavaScriptライブラリです。Webデザインでは、Webサイトに動きをつけたい時などに用います。

このカリキュラムでは、「TOP画像を滑らかに横に動かす表示方法(カルーセル)」と「サムネイル画像をクリックするとホップアップ表示する方法(ライトボックス)」を学んでいきましょう。 

jQueryに触れた事の無い方は、下記の授業も参考にして勉強しておきましょう。

レスポンシブなサイトにあっという間にjQueryを実装する
挫折した人のための、初心者速習html+css【JQueryでTOP画像がクルクル動くようにしてみよう編】
挫折した人のための、初心者速習html+css【JQueryで商品画像をポップアップさせよう編】

途中からでも参加できるように、演習課題はそこまでの段階が出来上がった物を配布しています。録画が受講できるようであれば、【WEBデザインのためのPhotoshop】全3回の事前受講をオススメします。

サイト制作の大まかな流れは、下記の様な物になります。

1)クライアント(お客様)へのヒヤリング
2)ターゲット設定
3)サイト設計(ワイヤーフレーム)
4)制作仕様書策定(デザインルール、コーディングルール策定)
5)開発(デザイン&コーディング)
6)ローカルテスト
7)テストサーバーレビュー(クライアントチェック)
8)リリース(本サーバーアップ)
9)ランニング(SEO解析)
 
この演習では、5番の開発の部分です。
完成した静的ページをユーザーさんのアクションでインタラクティブに動くページにブラッシュアップしていきます。

受講にあたって準備するもの

1)Sublimeのインストール(授業中コードを打つのに使います)
下記のURLからダウンロードしてください。
http://www.sublimetext.com/2
設定は何も必要ありません。インストールして授業が始まる時間に立ち上げられる様にだけしておけば大丈夫です。
※DreamWeaverが慣れている人は、こちらを使用されてもかまいません。

2)解凍ツール (授業中配布する教材の解凍に使います)
授業中にダウンロードしたファイルをすぐに解凍できる様になっていれば大丈夫です。(Mac OSXの場合はダブルクリックで展開します。windows7~の場合は右クリックのコンテキストメニュー「全て展開」を選択でOK)

3)その他のバージョンのOSは、MacであればApp StoreでWinArchiver Lite.appを検索してダウンロードしインストールしておきます。
Wiondwsであれば、下記のURLよりLhaplusをダウンロードし、インストールしておきます。
http://www7a.biglobe.ne.jp/~schezo/

スライド資料

jQueryプラグインを設置するための環境構築

2014年6月26日公開

30min.

jQueryの基礎を理解する全6回」の第2回目の授業です。
jQueryプラグインの設置に必要なhtmlとcssの知識で学習したjQueryを読み込んだhtmlに、jQueryを実行するスクリプトを書いて行きます。

今回は、jQueryを設置していく際にしておくべきPCの設定方法について学びます。

簡単なjQueryについては以下。

jQueryとは

ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計された軽量なJavaScriptライブラリです。Webデザインでは、Webサイトに動きをつけたい時などに用います。

このカリキュラムでは、「TOP画像を滑らかに横に動かす表示方法(カルーセル)」と「サムネイル画像をクリックするとホップアップ表示する方法(ライトボックス)」を学んでいきましょう。 

jQueryに触れた事の無い方は、下記の授業も参考にして勉強しておきましょう。

レスポンシブなサイトにあっという間にjQueryを実装する
挫折した人のための、初心者速習html+css【JQueryでTOP画像がクルクル動くようにしてみよう編】
挫折した人のための、初心者速習html+css【JQueryで商品画像をポップアップさせよう編】

途中からでも参加できるように、演習課題はそこまでの段階が出来上がった物を配布しています。録画が受講できるようであれば、【WEBデザインのためのPhotoshop】全3回の事前受講をオススメします。

サイト制作の大まかな流れは、下記の様な物になります。

1)クライアント(お客様)へのヒヤリング
2)ターゲット設定
3)サイト設計(ワイヤーフレーム)
4)制作仕様書策定(デザインルール、コーディングルール策定)
5)開発(デザイン&コーディング)
6)ローカルテスト
7)テストサーバーレビュー(クライアントチェック)
8)リリース(本サーバーアップ)
9)ランニング(SEO解析)
 
この演習では、5番の開発の部分です。
完成した静的ページをユーザーさんのアクションでインタラクティブに動くページにブラッシュアップしていきます。

受講にあたって準備するもの

1)Sublimeのインストール(授業中コードを打つのに使います)
下記のURLからダウンロードしてください。
http://www.sublimetext.com/2
設定は何も必要ありません。インストールして授業が始まる時間に立ち上げられる様にだけしておけば大丈夫です。
※DreamWeaverが慣れている人は、こちらを使用されてもかまいません。

2)解凍ツール (授業中配布する教材の解凍に使います)
授業中にダウンロードしたファイルをすぐに解凍できる様になっていれば大丈夫です。(Mac OSXの場合はダブルクリックで展開します。windows7~の場合は右クリックのコンテキストメニュー「全て展開」を選択でOK)

3)その他のバージョンのOSは、MacであればApp StoreでWinArchiver Lite.appを検索してダウンロードしインストールしておきます。
Wiondwsであれば、下記のURLよりLhaplusをダウンロードし、インストールしておきます。
http://www7a.biglobe.ne.jp/~schezo/

スライド資料

Webサイトに動きをつける、jQueryプラグインの設置方法

2014年7月1日公開

30min.

jQueryの基礎を理解する全6回」の第3回目の授業です。
jQueryプラグインの設置に必要なhtmlとcssの知識で学習したjQueryを読み込んだhtmlに、jQueryを実行するスクリプトを書いて行きます。

カルーセル/ライトボックスという2つのjQueryを実行するスクリプトを書いていきましょう。

jQueryに触れた事の無い方は、下記の授業も参考にして勉強しておきましょう。

レスポンシブなサイトにあっという間にjQueryを実装する
挫折した人のための、初心者速習html+css【JQueryでTOP画像がクルクル動くようにしてみよう編】
挫折した人のための、初心者速習html+css【JQueryで商品画像をポップアップさせよう編】

途中からでも参加できるように、演習課題はそこまでの段階が出来上がった物を配布しています。録画が受講できるようであれば、【WEBデザインのためのPhotoshop】全3回の事前受講をオススメします。

サイト制作の大まかな流れは、下記の様な物になります。

1)クライアント(お客様)へのヒヤリング
2)ターゲット設定
3)サイト設計(ワイヤーフレーム)
4)制作仕様書策定(デザインルール、コーディングルール策定)
5)開発(デザイン&コーディング)
6)ローカルテスト
7)テストサーバーレビュー(クライアントチェック)
8)リリース(本サーバーアップ)
9)ランニング(SEO解析)
 
この演習では、5番の開発の部分です。
完成した静的ページをユーザーさんのアクションでインタラクティブに動くページにブラッシュアップしていきます。

受講にあたって準備するもの

1)Sublimeのインストール(授業中コードを打つのに使います)
下記のURLからダウンロードしてください。
http://www.sublimetext.com/2
設定は何も必要ありません。インストールして授業が始まる時間に立ち上げられる様にだけしておけば大丈夫です。
※DreamWeaverが慣れている人は、こちらを使用されてもかまいません。

2)解凍ツール (授業中配布する教材の解凍に使います)
授業中にダウンロードしたファイルをすぐに解凍できる様になっていれば大丈夫です。(Mac OSXの場合はダブルクリックで展開します。windows7~の場合は右クリックのコンテキストメニュー「全て展開」を選択でOK)

3)その他のバージョンのOSは、MacであればApp StoreでWinArchiver Lite.appを検索してダウンロードしインストールしておきます。
Wiondwsであれば、下記のURLよりLhaplusをダウンロードし、インストールしておきます。
http://www7a.biglobe.ne.jp/~schezo/

スライド資料

TOP画像をスライドさせるjQueryプラグインをカスタマイズする

2014年7月3日公開

30min.

jQueryの基礎を理解する全6回」の第4回目の授業です。

前回の授業(Webサイトに動きをつける、jQueryプラグインの設置方法)でjQueryプラグインをhtmlに呼び込む事ができました。
今回は、呼び込んだカルーセルのプラグインをカスタマイズして、スタイリッシュなものにブラッシュアップしていきます。
jQueryに触れた事の無い方は、下記の授業で勉強しましょう。

レスポンシブなサイトにあっという間にjQueryを実装する
挫折した人のための、初心者速習html+css【JQueryでTOP画像がクルクル動くようにしてみよう編】
挫折した人のための、初心者速習html+css【JQueryで商品画像をポップアップさせよう編】

途中からでも参加できるように、演習課題はそこまでの段階が出来上がった物を配布しています。録画が受講できるようであれば、【WEBデザインのためのPhotoshop】全3回の事前受講をオススメします。

サイト制作の大まかな流れは、下記の様な物になります。

1)クライアント(お客様)へのヒヤリング
2)ターゲット設定
3)サイト設計(ワイヤーフレーム)
4)制作仕様書策定(デザインルール、コーディングルール策定)
5)開発(デザイン&コーディング)
6)ローカルテスト
7)テストサーバーレビュー(クライアントチェック)
8)リリース(本サーバーアップ)
9)ランニング(SEO解析)
 
この演習では、5番の開発の部分です。
完成した静的ページをユーザーさんのアクションでインタラクティブに動くページにブラッシュアップしていきます。

受講にあたって準備するもの

1)Sublimeのインストール(授業中コードを打つのに使います)
下記のURLからダウンロードしてください。
http://www.sublimetext.com/2
設定は何も必要ありません。インストールして授業が始まる時間に立ち上げられる様にだけしておけば大丈夫です。
※DreamWeaverが慣れている人は、こちらを使用されてもかまいません。

2)解凍ツール (授業中配布する教材の解凍に使います)
授業中にダウンロードしたファイルをすぐに解凍できる様になっていれば大丈夫です。(Mac OSXの場合はダブルクリックで展開します。windows7~の場合は右クリックのコンテキストメニュー「全て展開」を選択でOK)

3)その他のバージョンのOSは、MacであればApp StoreでWinArchiver Lite.appを検索してダウンロードしインストールしておきます。
Wiondwsであれば、下記のURLよりLhaplusをダウンロードし、インストールしておきます。
http://www7a.biglobe.ne.jp/~schezo/

  • 自己紹介&アジェンダ
  • 03:46
  • プロジェクトを読み込んでみよう
  • 01:44
  • ResponsiveSlides.js-master/demo/demo.htmlの中の<ーー Slideshow 4 ーー>以下の文字列をコピーしよう
  • 01:36
  • index.htmlのビルボードのimgタグの下にペースト。貼付けたら呼び出すイメージの名前をリネームしよう
  • 01:07
  • headタグの中に前回に作ったCallback.cssへのlinkタグを設定しよう
  • 01:18
  • bodyの終了タグの上に書いたscriptタグの内、jQueryのライブラリ読み込みタグの下に続けて、プラグインの読み込みタグを書いてみよう
  • 02:02
  • Callback.cssの中に書かれている、スライドさせるための左右クリックボタン用の画像themes.gifのパスを正しいパスに変更しよう
  • 01:08
  • Callback.cssから2行目〜17行目迄の不要な部分を削除しよう
  • 00:36
  • index.htmlのヘッド内にあるビルボードのimgタグは必要ないので削除しよう
  • 02:12
  • Topボタンがカルーセルの下にもぐるので、style.cssのセレクタ、.gototopにz-indexに大きな数値をいれて重ね順を一番上にしよう
  • 03:12
  • Q:z-indexは結構いつも適当な値いれるけど、先生の中でルールてきなのありますか?
  • 01:37
  • Q:おすすめのjqueryスライダーはなんですか?
  • 01:20
  • Q:サイトを公開したあとjQueryのバージョンが上がったりした場合随時更新しますか? プラグインによっては動作が変わったりすることもあり、メンテナンスが大変ですが何か指針のようなものはありますか。
  • 01:07
  • Q:z-indexの上限値は約21億だそうですが、先生は実務でどの程度の数字を上限で使用されていますか?
  • 01:25
  • Q:プラグイン同士がコンフリクトしたときは、どのように解決していくといいですか?
  • 01:23
  • レポート課題発表

スライド資料

クリックするとポップアップするjQueryプラグインをカスタマイズする

2014年7月8日公開

30min.

jQueryの基礎を理解する全6回」の5回目の授業です。
前々回の授業(jQueryプラグインをカスタマイズしよう!(カルーセル編))まででjQueryプラグインをhtmlに呼び込む事ができました。
前回のカルーセルのカスタマイズに続きまして、クリックすると画像がポップアップするプラグイン「ライトボックス」もスタイリッシュなものにブラッシュアップしていきます。

jQueryに触れた事の無い方は、下記の授業で勉強しておくとより理解が深まります。

レスポンシブなサイトにあっという間にjQueryを実装する
挫折した人のための、初心者速習html+css【JQueryでTOP画像がクルクル動くようにしてみよう編】
挫折した人のための、初心者速習html+css【JQueryで商品画像をポップアップさせよう編】

途中からでも参加できるように、演習課題はそこまでの段階が出来上がった物を配布しています。録画が受講できるようであれば、【WEBデザインのためのPhotoshop】全3回の事前受講をオススメします。

サイト制作の大まかな流れは、下記の様な物になります。

1)クライアント(お客様)へのヒヤリング
2)ターゲット設定
3)サイト設計(ワイヤーフレーム)
4)制作仕様書策定(デザインルール、コーディングルール策定)
5)開発(デザイン&コーディング)
6)ローカルテスト
7)テストサーバーレビュー(クライアントチェック)
8)リリース(本サーバーアップ)
9)ランニング(SEO解析)
 
この演習では、5番の開発の部分です。
完成した静的ページをユーザーさんのアクションでインタラクティブに動くページにブラッシュアップしていきます。

受講にあたって準備するもの

1)Sublimeのインストール(授業中コードを打つのに使います)
下記のURLからダウンロードしてください。
http://www.sublimetext.com/2
設定は何も必要ありません。インストールして授業が始まる時間に立ち上げられる様にだけしておけば大丈夫です。
※DreamWeaverが慣れている人は、こちらを使用されてもかまいません。

2)解凍ツール (授業中配布する教材の解凍に使います)
授業中にダウンロードしたファイルをすぐに解凍できる様になっていれば大丈夫です。(Mac OSXの場合はダブルクリックで展開します。windows7~の場合は右クリックのコンテキストメニュー「全て展開」を選択でOK)

3)その他のバージョンのOSは、MacであればApp StoreでWinArchiver Lite.appを検索してダウンロードしインストールしておきます。
Wiondwsであれば、下記のURLよりLhaplusをダウンロードし、インストールしておきます。
http://www7a.biglobe.ne.jp/~schezo/

スライド資料

WEBサイトの完成と、総復習と質疑応答

2014年7月10日公開

30min.

jQueryの基礎を理解する全6回」の最終回です。
前回の授業(クリックするとポップアップするjQueryプラグインをカスタマイズする)まででjQueryプラグイン2つをhtmlに設置し、ブラッシュアップしていきました。今回は総復習と質疑応答回です。
本日完了したwebページを提出して下さい。来週の「HTMLとCSSを使って、150分で簡単なWEBサイト制作」最終回にて、優秀作品の発表がありますので、巧く行かない点や疑問点をクリアーにしましょう。

jQueryに触れた事の無い方は、下記の授業で勉強しましょう。

レスポンシブなサイトにあっという間にjQueryを実装する
挫折した人のための、初心者速習html+css【JQueryでTOP画像がクルクル動くようにしてみよう編】
挫折した人のための、初心者速習html+css【JQueryで商品画像をポップアップさせよう編】

途中からでも参加できるように、演習課題はそこまでの段階が出来上がった物を配布しています。録画が受講できるようであれば、【WEBデザインのためのPhotoshop】全3回の事前受講をオススメします。

サイト制作の大まかな流れは、下記の様な物になります。

1)クライアント(お客様)へのヒヤリング
2)ターゲット設定
3)サイト設計(ワイヤーフレーム)
4)制作仕様書策定(デザインルール、コーディングルール策定)
5)開発(デザイン&コーディング)
6)ローカルテスト
7)テストサーバーレビュー(クライアントチェック)
8)リリース(本サーバーアップ)
9)ランニング(SEO解析)
 
この演習では、5番の開発の部分です。
完成した静的ページをユーザーさんのアクションでインタラクティブに動くページにブラッシュアップしていきます。

受講にあたって準備するもの

1)Sublimeのインストール(授業中コードを打つのに使います)
下記のURLからダウンロードしてください。
http://www.sublimetext.com/2
設定は何も必要ありません。インストールして授業が始まる時間に立ち上げられる様にだけしておけば大丈夫です。
※DreamWeaverが慣れている人は、こちらを使用されてもかまいません。

2)解凍ツール (授業中配布する教材の解凍に使います)
授業中にダウンロードしたファイルをすぐに解凍できる様になっていれば大丈夫です。(Mac OSXの場合はダブルクリックで展開します。windows7~の場合は右クリックのコンテキストメニュー「全て展開」を選択でOK)

3)その他のバージョンのOSは、MacであればApp StoreでWinArchiver Lite.appを検索してダウンロードしインストールしておきます。
Wiondwsであれば、下記のURLよりLhaplusをダウンロードし、インストールしておきます。
http://www7a.biglobe.ne.jp/~schezo/

  • 自己紹介&アジェンダ
  • 03:14
  • 復習:これまでの作業のおさらい
  • 02:26
  • 復習:スクリプトタブとjQueryのVer.のおさらい
  • 02:38
  • Q:今回の制作手順では、ロゴその他のデザインを決める前に、先に各要素のpixel単位まで決めてコーディングしましたが、後からデザイン的にサイズがしっくりこないということはないですか。又そういうことがないように空白やロゴ他要素のサイズを決めるコツはありますか。
  • 02:50
  • 復習:jQueryのプラグインについて
  • 02:22
  • Q:「$ is not defined」とエラーがでることがあります。考え得るうっかりミスはどんなものがあやますか?(自分のミスを探す上でどんなことから考えていけばミスをみつけやすいかな、とと思いました)
  • 02:58
  • Q:jQueryの読み込みについて、いろいろな本を見ているとhead内に読み込むのも見られ、jQueryの記述を別のjsファイルにして読み込んでいるのも見られたりしますが、場合によって読み込み方法を変えたりとかするのですか?
  • 02:53
  • Q:別の人が作成したHPを修正、更新するのに注意する点はなんですか?
  • 02:27
  • 復習:sublimeを使う際のプロジェクトの設定について
  • 03:18
  • Q:logoとnavの位置がビルボードのカルーセル(スライド画像)からずれ、上に表示されてしまうのですが、考えられる原因は何でしょうか?</div>の閉じタグの位置がおかしいのかと思い、見本サイトのコードと比較したのですが、コードに間違いはなかったようなのですが。
  • 01:59
  • Q:HTMLにCSSを外部から読み込むとき多くのCSSを読み込ませるほうより、@importを使用したほうが早いのでしょうか?
  • 01:19
  • レポート課題発表

スライド資料

プレミアム生放送

関連授業

人気の生放送授業

もっと見る

新着の生放送授業

もっと見る

アクティビティ