おためし受講中

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

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

授業内で使用する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/

 

学生代表

  • 未定

    未定

【ノート機能】
授業内容や覚えておきたいポイントなど、ノートに自由に残せます

再生位置挿入 資料挿入
筆記アシスト
ONOFF
    【チャプター機能】
    授業内容をピンポイントでおさえながら
    ご自身のペースで進めることができます
    【前半】授業
    自己紹介&アジェンダ
    03:31  (00:14 ~ )
    jQueryとは
    02:58  (03:45 ~ )
    jQueryのライブラリとプラグイン
    03:17  (06:43 ~ )
    jQueryプラグインを麻婆豆腐に例える
    03:20  (10:00 ~ )
    jQueryのサイトからプラグインを入手
    04:40  (13:20 ~ )
    jQueryのオススメ参考サイト紹介
    00:45  (18:00 ~ )
    実習前の準備
    03:25  (18:45 ~ )
    sublimeでhtmlファイルを開くための方法
    03:50  (22:10 ~ )
    演習で使うプラグインとデーターをダウンロード
    05:15  (26:00 ~ )
    コードを書いてみよう!
    03:11  (31:15 ~ )
    Nivo-lightboxを演習用フォルダに入れる
    03:34  (34:26 ~ )
    cssファイルをリンクさせる
    03:30  (38:00 ~ )
    javascriptを入れる
    04:55  (41:30 ~ )
    sablime画面でスクリプトタブを指定する
    03:55  (46:25 ~ )
    lightboxの実装時の注意点
    02:55  (50:20 ~ )
    cssで閉じるボタンを付ける
    01:55  (53:15 ~ )
    ../で同一階層の別フォルダを参照する
    04:20  (55:10 ~ )
    Play with settingsでエフェクトをつける
    03:58  (59:30 ~ )
    エフェクトを確認する。
    03:42  (1:03:28 ~ )
    画像の文字の色を変えてみよう!
    04:00  (1:07:10 ~ )
    【後半】質疑応答
    Q:面白いので、jQueryをサイトに沢山実装していくと、ソースが重くなりウェブ表示がどんどん遅くなりますか?
    02:33  (1:12:27 ~ )
    Q:jQueryの相性について
    00:43  (1:15:00 ~ )
    Q:closeが文字のまま、fadeScalwしたポップアップのバックグラウンドが透明のまま色付けられ、透明度が操作できずです。
    01:27  (1:15:43 ~ )
    Q:jQueryって使用する注意点は書き換えはいけないところだけでいいですか?
    02:02  (1:17:10 ~ )
    Q:jQueryの質問ではないのですが、自分で書いたブログをバックアップできる、おすすめソフトはありますか?
    01:07  (1:19:12 ~ )
    Q:index.htmlとtank.htmlやdps.html、healer.htmlは同じコードの部分(headerやaside)ありますが、共通コード部分を簡単にひとまとめにする方法はないでしょうか?
    01:32  (1:20:19 ~ )
    Q:chome,ieはOKなのですが、F.Foxでは横に 画像がずれてしまいます。
    02:09  (1:21:51 ~ )
    Q:ライセンスなどはあるのでしょうか?
    03:34  (1:24:00 ~ )
    課題発表
      (1:27:34 ~ )