WebデザインのためのjQuery入門

WebデザインのためのjQuery入門 -スマホサイトのためのjQuery-

第1回:2015年10月10日公開

60min

WebデザインのためのjQuery入門 -スマホサイトのためのjQuery-

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

コース概要

Web制作に欠かせないjQueryの基本を、スマホUIにおけるインタラクションの実装を通じて学んでいきます。

■ jQueryとは

皆さんは、Webサイトの画像がスライドしたり、ページがスムーズにスクロールしたり、画像をクリックしたらライトボックの中に画像が美しく表示されるのをご覧になったことがあると思います。そのようなサイトのインタラクションを実装するためのものとしてjQueryは人気を誇ってきました。

jQueryはJavaScriptのライブラリです。JavaScriptにはブラウザによって動作が異なるという弱点がありましたが、jQueryを使う事によって、IE6等のレガシーブラウザから最新のブラウザまで、ブラウザの違いを気にせずにインタラクションが実装できるようになりました。

■ 事前準備

公式サイトからjQueryをダウンロードしておいてください。
https://code.jquery.com/

【ダウンロード方法】
リンク先の『jQuery 1.x』下にあるminifiedを右クリックしてファイル保存します。
または左クリックをして表示されるscriptタグをHTMLに貼り付けてお使いください。
jQuery 2.x以降はIE6〜8に対応していません。

この授業ではテキストエディタとブラウザを使用します。お手持ちのエディタ、ブラウザで構いませんが、授業では下記を用います。

テキストエディタ
Atom https://atom.io/

Webブラウザ
Google chrome https://www.google.co.jp/chrome/browser/desktop/index.html

担当の先生

パーソナリティ

  • 田原 彩香

    田原 彩香

    スクー放送部

  • 江川 みどり

    江川 みどり

    スクー放送部

参加したい受講生 : 2387

カテゴリー

タグ

サンプルファイル

授業で使用するファイル

ダウンロード後、readme.txtをご一読くださいませ。

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

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

授業リスト

WebデザインのためのjQuery入門 -スマホサイトのためのjQuery-

2015年10月10日公開

60min.

Web制作に欠かせないjQueryの基本を、スマホUIにおけるインタラクションの実装を通じて学んでいきます。
1限目は、jQueryの概要とその使い方について学んでいきましょう。

■ jQueryとは

皆さんは、Webサイトの画像がスライドしたり、ページがスムーズにスクロールしたり、画像をクリックしたらライトボックの中に画像が美しく表示されるのをご覧になったことがあると思います。そのようなサイトのインタラクションを実装するためのものとしてjQueryは人気を誇ってきました。

jQueryはJavaScriptのライブラリです。JavaScriptにはブラウザによって動作が異なるという弱点がありましたが、jQueryを使う事によって、IE6等のレガシーブラウザから最新のブラウザまで、ブラウザの違いを気にせずにインタラクションが実装できるようになりました。

■ 事前準備

公式サイトからjQueryをダウンロードしてください。
https://code.jquery.com/

【ダウンロード方法】
リンク先の『jQuery 1.x』下にあるminifiedを右クリックしてファイル保存します。
または左クリックをして表示されるscriptタグをHTMLに貼り付けてお使いください。
jQuery 2.x以降はIE6〜8に対応していません。

この授業ではテキストエディタとブラウザを使用します。お手持ちのエディタ、ブラウザで構いませんが、授業では下記を用います。

テキストエディタ
Atom https://atom.io/

Webブラウザ
Google chrome https://www.google.co.jp/chrome/browser/desktop/index.html

スライド資料

WebデザインのためのjQuery入門 -スムーズに上にもどるボタンの実装-

2015年10月17日公開

60min.

Web制作に欠かせないjQueryの基本を、スマホUIにおけるインタラクションの実装を通じて学んでいきます。
2限目は、クリックするとスムーズに上に戻ってくれるボタンをjQueryのコードを書いて実装していきます。

■ jQueryとは

皆さんは、Webサイトの画像がスライドしたり、ページがスムーズにスクロールしたり、画像をクリックしたらライトボックの中に画像が美しく表示されるのをご覧になったことがあると思います。そのようなサイトのインタラクションを実装するためのものとしてjQueryは人気を誇ってきました。

jQueryはJavaScriptのライブラリです。JavaScriptにはブラウザによって動作が異なるという弱点がありましたが、jQueryを使う事によって、IE6等のレガシーブラウザから最新のブラウザまで、ブラウザの違いを気にせずにインタラクションが実装できるようになりました。

■ 事前準備

公式サイトからjQueryをダウンロードしておいてください。
https://code.jquery.com/

【ダウンロード方法】
リンク先の『jQuery 1.x』下にあるminifiedを右クリックしてファイル保存します。
または左クリックをして表示されるscriptタグをHTMLに貼り付けてお使いください。
jQuery 2.x以降はIE6〜8に対応していません。

この授業ではテキストエディタとブラウザを使用します。お手持ちのエディタ、ブラウザで構いませんが、授業では下記を用います。

テキストエディタ
Atom https://atom.io/

Webブラウザ
Google chrome https://www.google.co.jp/chrome/browser/desktop/index.html

スライド資料

WebデザインのためのjQuery入門 -ドロワーメニューの実装-

2015年10月24日公開

60min.

Web制作に欠かせないjQueryの基本を、スマホUIにおけるインタラクションの実装を通じて学んでいきます。
3限目は、ドロワーメニューのコードをjQueryで書いていきます。

■ jQueryとは

皆さんは、Webサイトの画像がスライドしたり、ページがスムーズにスクロールしたり、画像をクリックしたらライトボックの中に画像が美しく表示されるのをご覧になったことがあると思います。そのようなサイトのインタラクションを実装するためのものとしてjQueryは人気を誇ってきました。

jQueryはJavaScriptのライブラリです。JavaScriptにはブラウザによって動作が異なるという弱点がありましたが、jQueryを使う事によって、IE6等のレガシーブラウザから最新のブラウザまで、ブラウザの違いを気にせずにインタラクションが実装できるようになりました。

■ 事前準備

公式サイトからjQueryをダウンロードしておいてください。
https://code.jquery.com/

【ダウンロード方法】
リンク先の『jQuery 1.x』下にあるminifiedを右クリックしてファイル保存します。
または左クリックをして表示されるscriptタグをHTMLに貼り付けてお使いください。
jQuery 2.x以降はIE6〜8に対応していません。

この授業ではテキストエディタとブラウザを使用します。お手持ちのエディタ、ブラウザで構いませんが、授業では下記を用います。

テキストエディタ
Atom https://atom.io/

Webブラウザ
Google chrome https://www.google.co.jp/chrome/browser/desktop/index.html

スライド資料

WebデザインのためのjQuery入門 -アコーディオンの実装-

2015年10月31日公開

60min.

Web制作に欠かせないjQueryの基本を、スマホUIにおけるインタラクションの実装を通じて学んでいきます。4限目は、クリックすると畳まれている内容が表示される、アコーディオンのようなUIをjQueryのコードを書いて実装していきます。

■ jQueryとは

皆さんは、Webサイトの画像がスライドしたり、ページがスムーズにスクロールしたり、画像をクリックしたらライトボックの中に画像が美しく表示されるのをご覧になったことがあると思います。そのようなサイトのインタラクションを実装するためのものとしてjQueryは人気を誇ってきました。

jQueryはJavaScriptのライブラリです。JavaScriptにはブラウザによって動作が異なるという弱点がありましたが、jQueryを使う事によって、IE6等のレガシーブラウザから最新のブラウザまで、ブラウザの違いを気にせずにインタラクションが実装できるようになりました。

■ 事前準備

公式サイトからjQueryをダウンロードしておいてください。
https://code.jquery.com/

【ダウンロード方法】
リンク先の『jQuery 1.x』下にあるminifiedを右クリックしてファイル保存します。
または左クリックをして表示されるscriptタグをHTMLに貼り付けてお使いください。
jQuery 2.x以降はIE6〜8に対応していません。

この授業ではテキストエディタとブラウザを使用します。お手持ちのエディタ、ブラウザで構いませんが、授業では下記を用います。

テキストエディタ
Atom https://atom.io/

Webブラウザ
Google chrome https://www.google.co.jp/chrome/browser/desktop/index.html

スライド資料

WebデザインのためのjQuery入門 -モーダルウィンドウの実装-

2015年11月7日公開

60min.

Web制作に欠かせないjQueryの基本を、スマホUIにおけるインタラクションの実装を通じて学んでいきます。5限目は、サムネイル画像やボタンをクリックしたらポップアップするモーダルウィンドウをjQueryのコードを書いて実装していきます。

■ jQueryとは

皆さんは、Webサイトの画像がスライドしたり、ページがスムーズにスクロールしたり、画像をクリックしたらライトボックの中に画像が美しく表示されるのをご覧になったことがあると思います。そのようなサイトのインタラクションを実装するためのものとしてjQueryは人気を誇ってきました。

jQueryはJavaScriptのライブラリです。JavaScriptにはブラウザによって動作が異なるという弱点がありましたが、jQueryを使う事によって、IE6等のレガシーブラウザから最新のブラウザまで、ブラウザの違いを気にせずにインタラクションが実装できるようになりました。

■ 事前準備

公式サイトからjQueryをダウンロードしておいてください。
https://code.jquery.com/

【ダウンロード方法】
リンク先の『jQuery 1.x』下にあるminifiedを右クリックしてファイル保存します。
または左クリックをして表示されるscriptタグをHTMLに貼り付けてお使いください。
jQuery 2.x以降はIE6〜8に対応していません。

この授業ではテキストエディタとブラウザを使用します。お手持ちのエディタ、ブラウザで構いませんが、授業では下記を用います。

テキストエディタ
Atom https://atom.io/

Webブラウザ
Google chrome https://www.google.co.jp/chrome/browser/desktop/index.html

スライド資料

WebデザインのためのjQuery入門 -フォーム入力チェックの実装-

2015年11月14日公開

60min.

Web制作に欠かせないjQueryの基本を、スマホUIにおけるインタラクションの実装を通じて学んでいきます。最終回はフォームで入力漏れがあった場合に送信できない仕組みをjQueryで実装していきます。

■ jQueryとは

皆さんは、Webサイトの画像がスライドしたり、ページがスムーズにスクロールしたり、画像をクリックしたらライトボックの中に画像が美しく表示されるのをご覧になったことがあると思います。そのようなサイトのインタラクションを実装するためのものとしてjQueryは人気を誇ってきました。

jQueryはJavaScriptのライブラリです。JavaScriptにはブラウザによって動作が異なるという弱点がありましたが、jQueryを使う事によって、IE6等のレガシーブラウザから最新のブラウザまで、ブラウザの違いを気にせずにインタラクションが実装できるようになりました。

■ 事前準備

公式サイトからjQueryをダウンロードしておいてください。
https://code.jquery.com/

【ダウンロード方法】
リンク先の『jQuery 1.x』下にあるminifiedを右クリックしてファイル保存します。
または左クリックをして表示されるscriptタグをHTMLに貼り付けてお使いください。
jQuery 2.x以降はIE6〜8に対応していません。

この授業ではテキストエディタとブラウザを使用します。お手持ちのエディタ、ブラウザで構いませんが、授業では下記を用います。

テキストエディタ
Atom https://atom.io/

Webブラウザ
Google chrome https://www.google.co.jp/chrome/browser/desktop/index.html

スライド資料

関連授業

人気の生放送授業

もっと見る

新着の生放送授業

もっと見る

アクティビティ