chevron_left

挫折した人のための 初心者速習HTML/CSS基礎

PREMIUM
第5回

挫折した人のための、初心者速習html+css【JQueryで商品画像をポップアップさせよう編】

2014年4月27日 90min

スライド資料

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

1 / 37

授業の概要

※録画授業を受講いただく前にご確認ください

授業内で使用するWordPressプラグインのURLが下記に変更になりました。授業中にスクー教務課が投稿しているプラグインは、現在有料のものになりますので、下記をご利用くださいませ。

▼本授業で使用するWordPressプラグイン
https://github.com/gilbitron/Nivo-Lightbox

また、授業内で配布している演習用素材のURLが開けない、という方はインターネットのセキュリティレベルを変更されるか、こちらのストレージからダウンロードしてください

▼演習用素材
http://bit.ly/13XJPtE


html+cssを挫折した全ての人に贈るシリーズ 全5回

このシリーズは1回で完結していますが、 1回から5回まで同じサイトがどんどん完成して行く形になっています。
1回づつ完結した出来上がり見本付きの演習ファイルがダウンロードできます。

第5回:初心者速習html+css【JQueryで商品画像をポップアップさせよう編】

初めてコーディングを学ぶ人や、本を読んだり参考サイトを見ながらコーディングしても 崩れてしまってうまく行かなかった人のためのJQuery入門です。
今回は商品写真をクリックしたら大きな画像がポップアップするライトボックスの作り方を学びます。

 

■ 必要なもの■

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

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:31
play_arrow
jQueryとは
02:58
play_arrow
jQueryのライブラリとプラグイン
03:17
play_arrow
jQueryプラグインを麻婆豆腐に例える
03:20
play_arrow
jQueryのサイトからプラグインを入手
04:40
play_arrow
jQueryのオススメ参考サイト紹介
00:45
play_arrow
実習前の準備
03:25
play_arrow
sublimeでhtmlファイルを開くための方法
03:50
play_arrow
演習で使うプラグインとデーターをダウンロード
05:15
play_arrow
コードを書いてみよう!
03:11
play_arrow
Nivo-lightboxを演習用フォルダに入れる
03:34
play_arrow
cssファイルをリンクさせる
03:30
play_arrow
javascriptを入れる
04:55
play_arrow
sablime画面でスクリプトタブを指定する
03:55
play_arrow
lightboxの実装時の注意点
02:55
play_arrow
cssで閉じるボタンを付ける
01:55
play_arrow
../で同一階層の別フォルダを参照する
04:20
play_arrow
Play with settingsでエフェクトをつける
03:58
play_arrow
エフェクトを確認する。
03:42
play_arrow
画像の文字の色を変えてみよう!
04:00
play_arrow
Q:面白いので、jQueryをサイトに沢山実装していくと、ソースが重くなりウェブ表示がどんどん遅くなりますか?
02:33
play_arrow
Q:jQueryの相性について
00:43
play_arrow
Q:closeが文字のまま、fadeScalwしたポップアップのバックグラウンドが透明のまま色付けられ、透明度が操作できずです。
01:27
play_arrow
Q:jQueryって使用する注意点は書き換えはいけないところだけでいいですか?
02:02
play_arrow
Q:jQueryの質問ではないのですが、自分で書いたブログをバックアップできる、おすすめソフトはありますか?
01:07
play_arrow
Q:index.htmlとtank.htmlやdps.html、healer.htmlは同じコードの部分(headerやaside)ありますが、共通コード部分を簡単にひとまとめにする方法はないでしょうか?
01:32
play_arrow
Q:chome,ieはOKなのですが、F.Foxでは横に 画像がずれてしまいます。
02:09
play_arrow
Q:ライセンスなどはあるのでしょうか?
03:34
play_arrow
課題発表