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

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

PREMIUM
第6回

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

2014年7月10日 30min

会員登録して、全てのスライドを見よう

1 / 4

授業の概要

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/

チャプター

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