Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

WebデザイナのためのjQuery入門。

3,225 views

Published on

Webデザイナーが、初めてJavaScriptを使うために、jQueryの使い方を説明しています。
jQueryプラグインを使用する際の注意点なども記載されています。

他のJSスライドと似たような構成になっています。

Published in: Technology
  • Login to see the comments

WebデザイナのためのjQuery入門。

  1. 1. Webデザイナーのための JavaScript超入門 jQueryを使ってみよう
  2. 2. Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights 2 JavaScriptについて
  3. 3. 最近、動いている Webサイト 多いですよね Copyright Ⓒ Yoshihiro Takahashi 2014 All Rights Reserved. 3
  4. 4. Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved. 4 Webサイトをみてみよう • 虎ノ門ヒルズ – http://toranomonhills.com/ja/ • 新生活に NHK – http://www.nhk.or.jp/haru/ • NURO光 for マンション みんなの応募状況 – https://nuro.jp/mansion/status/ • ブリヂストンの電動アシスト自転車 – http://www.assista.jp/
  5. 5. この動きを 実現しているのが Copyright Ⓒ Yoshihiro Takahashi 2014 All Rights Reserved. 5
  6. 6. JavaScript Copyright Ⓒ Yoshihiro Takahashi 2014 All Rights Reserved. 6
  7. 7. 今、Webデザイナに 求められる技術 Copyright Ⓒ Yoshihiro Takahashi 2014 All Rights Reserved. 7
  8. 8. それが JavaScript Copyright Ⓒ Yoshihiro Takahashi 2014 All Rights Reserved. 8
  9. 9. さて、質問です Copyright Ⓒ Yoshihiro Takahashi 2014 All Rights Reserved. 9
  10. 10. JavaScriptは コピペで使うもの? Copyright Ⓒ Yoshihiro Takahashi 2014 All Rights Reserved. 10
  11. 11. そんな事は ない! 全く無いわけではないです Copyright Ⓒ Yoshihiro Takahashi 2014 All Rights Reserved. 11
  12. 12. JavaScriptの 役割 Copyright Ⓒ Yoshihiro Takahashi 2014 All Rights Reserved. 12
  13. 13. JavaScriptの役割 HTML・CSSの内容を 書き換えること Copyright Ⓒ Yoshihiro Takahashi 2014 All Rights Reserved. 13
  14. 14. HTMLの書き換え <h1>こんにちは</h1> Copyright Ⓒ Yoshihiro Takahashi 2014 All Rights Reserved. 14
  15. 15. HTMLの書き換え <h1>こんにちは</h1> <h1>おはよう</h1> Copyright Ⓒ Yoshihiro Takahashi 2014 All Rights Reserved. 15
  16. 16. HTMLの書き換え <h1>こんにちは</h1> <h1>おはよう</h1> Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved. 16 Webサイトを表示した時刻に合わせて、文字を変更
  17. 17. HTMLの書き換え <img src=“a01.jpg” /> Copyright Ⓒ Yoshihiro Takahashi 2014 All Rights Reserved. 17
  18. 18. HTMLの書き換え <img src=“a01.jpg” /> <img src=“b03.png” /> Copyright Ⓒ Yoshihiro Takahashi 2014 All Rights Reserved. 18
  19. 19. HTMLの書き換え <img src=“a01.jpg” /> <img src=“b03.png” /> Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved. 19 Webサイトを表示ごとに、ランダムに画像を変更
  20. 20. CSSの書き換え こんにちは h1{color:#000; font-size:16px} Copyright Ⓒ Yoshihiro Takahashi 2014 All Rights Reserved. 20
  21. 21. CSSの書き換え こんにちは h1{color:#000; font-size:32px;} こんにちは h1{color:#0f0; font-size:6px;} Copyright Ⓒ Yoshihiro Takahashi 2014 All Rights Reserved. 21
  22. 22. CSSの書き換え こんにちは h1{color:#000; font-size:32px;} こんにちは h1{color:#0f0; font-size:6px;} Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved. 22 見る人の環境に合わせて、文字サイズや文字色を変更
  23. 23. JavaScriptの役割 もう一つ 大切な役割 Copyright Ⓒ Yoshihiro Takahashi 2014 All Rights Reserved. 23
  24. 24. JavaScriptの役割 ユーザ操作を 取得 Copyright Ⓒ Yoshihiro Takahashi 2014 All Rights Reserved. 24
  25. 25. ユーザ操作 • 画像をクリックしたら・・・ Copyright Ⓒ Yoshihiro Takahashi 2014 All Rights Reserved. 25 <img src=“a01.jpg” /> <img src=“b03.png” />
  26. 26. ユーザ操作 • 文字にマウスを重ねたら・・・ Copyright Ⓒ Yoshihiro Takahashi 2014 All Rights Reserved. 26 こんにちは h1{color:#000; font-size:32px;} こんにちは h1{color:#0f0; font-size:6px;}
  27. 27. Copyright Ⓒ Yoshihiro Takahashi 2014 All Rights Reserved. 27 JavaScriptのポイント • HTML要素(タグ)を指定して、下記の作業 を行うことを意識する – 要素の内容(文字)の変更 – 要素の属性値の変更 • alt属性、src属性、id属性 など – 要素に設定されているCSS • color、padding、margin など
  28. 28. Copyright Ⓒ Yoshihiro Takahashi 2014 All Rights Reserved. 28 JavaScriptのポイント • ユーザ操作(イベント)を取得する – 画像をクリックしたら – 文字にマウスを重ねたら – 重ねたマウスを外したら
  29. 29. JavaScriptの 記述場所 Copyright Ⓒ Yoshihiro Takahashi 2014 All Rights Reserved. 29
  30. 30. Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 30 HTMLファイルへの記述 • HTMLファイルに直接JSを記述 • 外部JSファイルの読み込み <script> JavaScriptのコードを記述 </script> <script src=“ファイル名.js”></script>
  31. 31. Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 31 JavaScript記述場所 • HTML要素(タグ)の構造を理解してからJS を実行しないと誤動作する – </body>の直前に記述する • HTML要素を読み込んでからJSを実行させる – window.onloadを利用する • HTML要素や画像ファイルなど全てを読み込んでから実行 – DOMContentLoadedを利用する • 要素の構造を理解してから実行する
  32. 32. Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 32 JavaScript記述場所 • HTML要素(タグ)の構造を理解してからJS を実行しないと誤動作する – </body>の直前に記述する • HTML要素を読み込んでからJSを実行させる – window.onloadを利用する • HTML要素や画像ファイルなど全てを読み込んでから実行 – DOMContentLoadedを利用する • 要素の構造を理解してから実行する 一番分かりやすい
  33. 33. Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 33 JavaScriptの記述 • コメント(メモ書き)の記述 <body> <script> // 一行のみのコメント /* 複数行のコメント */ </script> </body>
  34. 34. JavaScriptの記述の流れ 1. 変更したいHTML要素を指定 2. 指定した要素にCSS / HTMLの変更 Copyright Ⓒ Yoshihiro Takahashi 2014 All Rights Reserved. 34
  35. 35. Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights 35 要素を 指定してみよう
  36. 36. Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights 36 JavaScriptに よる記述
  37. 37. Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 37 タグの指定方法してCSS変更 • <div id=“test”>の文字色を変更 var test = document.getElementsById(‘test’); test.style.color = ‘#ff0000’;
  38. 38. JavaScriptへの 不満 Copyright Ⓒ Yoshihiro Takahashi 2014 All Rights Reserved. 38
  39. 39. Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 39 タグの指定方法してCSS変更 • <div id=“test”>の文字色を変更 var test = document.getElementsById(“test”); test.style.color = “#ff0000”; ちょっと記述が長い
  40. 40. Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 40 そこで ライブラリの利用
  41. 41. Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved. 41 • JavaScriptを利用したコンテンツ制作方法 – JavaScriptのみ • カレーライスだと、各種香辛料・小麦粉からルーを自作して、ゼロか らカレーを作る感じ – ライブラリを利用(例:jQuery) • カレーライスだと、市販のルーを利用し、野菜や肉は自分で調理して、 カレーを作る感じ – ライブラリとプラグインを利用(例:jQuery + lightbox2など) • カレーライスだと、市販のルーを利用し、カット野菜・冷凍シー フードなどを利用して、軽く調理して、カレーを作る感じ JavaScriptの利用について
  42. 42. jQueryの役割 Copyright Ⓒ Yoshihiro Takahashi 2014 All Rights Reserved. 42
  43. 43. JavaScriptの役割 簡単に短い記述で HTML・CSSの内容を 書き換えること Copyright Ⓒ Yoshihiro Takahashi 2014 All Rights Reserved. 43
  44. 44. Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 44 • JavaScriptを簡単に短く記述できる、 JavaScriptの命令集(ライブラリ)です。 • 多くのサイトで、jQueryを普通に利用して います。 jQueryとは
  45. 45. Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 45 • JavaScriptのセレクタ指定を簡単に使用 する var test = document.getElementsById(“test"); test.style.color = “#ff0000"; $(“#test").css("color", "#ff0000"); jQueryの例
  46. 46. Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 46 とっても便利
  47. 47. Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 47 • ダウンロードして外部読み込み – http://jquery.com/ • リンク先を外部読み込み(CDN) – https://developers.google.com/speed/libraries/#jquery jQuery使用方法
  48. 48. Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 48 書き方
  49. 49. Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 49 JavaScript記述場所 • HTML要素(タグ)の構造を理解してから JSを実行しないと誤動作する – </body>の直前に記述する • HTML要素を読み込んでからJSを実行させる – jQueryのreadyメソッドを利用する • HTML要素の構造を理解してから実行する • DOMContentLoadedを利用している
  50. 50. Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved. 50 • 要素(DOM)の構造を理解して実行 $(function() { // ここに実行したい内容を記述 }); jQueryのreadyメソッド $(function(){ //実行内容 }); $(document).ready(function(){ //実行内容}); jQuery(function(){ //実行内容 });
  51. 51. Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved. 51 • jQueryの記述の流れ 1. HTML要素(タグ)を指定する →「セレクタ」と呼びます 2. セレクタの後に、「.やりたい事」と記述する →やりたい事() メソッドと呼びます →やりたい事 プロパティと呼びます jQueryの記述方法
  52. 52. Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved. 52 • セレクタの指定 → $(‘要素’)と記述 $(‘div’) タグ名を選択 $(‘#id’) id名を選択 $(‘.class’) クラス名を選択 $(‘p a’) 子孫要素を選択 $(‘p, ul, div’) 複数要素の選択 $(‘dt+dd’) 隣接要素の選択 $(‘img[alt=“abc”] ’) 属性指定によるの選択 $(‘dt’).next() 隣接要素の選択 $(‘li:eq(0) ’) ○番目の選択 など・・・ CSSのセレクタ と同じ jQuery用セレクタ まず要素(タグ)を選択
  53. 53. Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved. 53 jQueryの記述方法 • 次にやりたい事(メソッド)を指定 セレクタ.メソッド(引数);
  54. 54. Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 54 jQueryの記述方法 • 次にやりたい事をたくさん指定 セレクタ.メソッド(引数).メソッ ド(引数).メソッド(引数)
  55. 55. Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights 55 基本はCSSの 変更
  56. 56. Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved. 56 jQueryの記述方法 • CSSの設定/変更 セレクタ.css(‘color’, ‘#ff0000’);
  57. 57. Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved. 57 jQueryの記述方法 • 複数のCSSを設定する場合 セレクタ.css({ ‘color‘ : ‘#ff0000‘, ‘font-size‘ : ‘24px‘ }); 複数の内容を設定する記述 {プロパティ:値 , プロパティ:値, プロパティ:値}
  58. 58. Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved. 58 HTMLも基本
  59. 59. Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved. 59 jQueryの記述方法 • 属性の変更 attr $(‘img’).attr(‘src’, ‘test.png’); <img src= "test.png" />;
  60. 60. Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved. 60 jQueryの記述方法 • 複数の属性も設定できる セレクタ.attr({ ‘src’ : ‘abc.jpg’, ‘title’ : ‘abc’ }); {プロパティ:値 , プロパティ:値, プロパティ:値}
  61. 61. Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved. 61 jQueryの記述方法 • タグ内にタグを追加 html $(‘div’).html(‘<p>よろしく</p>’); <div><p>よろしく</p></div>
  62. 62. Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved. 62 jQueryの記述方法 • タグ内に文字を設定 text $(‘div’).text(‘よろしく’); <div>よろしく</div>
  63. 63. Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 63 イベントも 大事
  64. 64. Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 64 • クリックした場合 セレクタ.on(‘click’, function(){ //実行したいことを記述 }); ユーザ操作などのイベント
  65. 65. Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 65 • 主なイベント – click() クリック – dblclick() ダブルクリック – mouseover() 要素上にマウスが乗った – mouseenter() 要素上にマウスが乗った (子要素に影響なし) – mouseout() 要素上にあるマウスが離れた – mouseleave() 要素上にあるマウスが離れた (子要素に影響なし) – mousedown() マウスボタン押した – mouseup() マウスボタンを離した – mousemove() マウスが動いた ユーザ操作などのイベント
  66. 66. Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 66 • イベントの場合によくある記述 – 実行したセレクタ → $(this) セレクタ.on(‘click’, function(){ $(this).css(‘color’, ‘#ff0000’); }); ユーザ操作などのイベント
  67. 67. Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 67 • クリックしたらclassを追加 セレクタ.on(‘click’, function(){ セレクタ.toggleClass (‘クラス名’); }); ユーザ操作などのイベント クラスが有る場合はクラスを削除し、無い場合はクラスを追加
  68. 68. Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 68 セレクタ.on({ 'mouseenter':function(){ 実行したい内容; }, 'mouseleave':function(){ 実行したい内容; } }); 複数のイベント設定
  69. 69. 画像系の プラグインを 使おう Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved. 69
  70. 70. jQuery 224 で検索 Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved. 70
  71. 71. Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved. 71 • HTML/CSSの理解は必須 – ファイル構造・要素の構成などを考えながら、 作業を行う • 最低限のjQueryの知識が必要 – jQueryセレクタ、メソッド設定などの理解が 必要 • 英語でも頑張る プラグイン使用時の注意
  72. 72. Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved. 72 1. プラグインをダウンロード – ファイルの中身を確認する 2. CSS / jQuery /プラグインの 読み込みを入力 – ダウンロードしたファイル構造を確認しながら入力 – 必ずjQueryを指定する – jQueryは複数指定しない 3. HTML要素をコピペ – 要素の種類、属性などを確認しながらコピペ 4. jQueryの記述をコピペ – セレクタを意識しながらコピペ – オプション設定時は、複数設定 { プロパティ:値, プロパティ:値} プラグイン使用時の手順
  73. 73. Lightbox系 プラグインを 使おう Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved. 73
  74. 74. Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved. 74 Lightbox系ライブラリ • lightbox2 – 写真が拡大するライブラリ全般をLightbox系 と呼ぶくらい有名 • fancyBox – 表示方法やアニメーションを変更できる • Nivo Lightbox – WebサイトやYoutubeも表示できる
  75. 75. スライド系 プラグインを 使おう Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved. 75
  76. 76. Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved. 76 スライド系ライブラリ • Basic jQuery Slider – fadeとslideのみのベーシックなスライド • Unslider – 容量が軽く、カスタマイズが出来る • Galleria – 多機能なスライダー • bxSlider – 設置が簡単でシンプル
  77. 77. jQueryを もう一度 (Pluginもいいけど、自作もね) Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved. 77
  78. 78. jQueryだけで アニメしながら トップに戻る Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved. 78
  79. 79. Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved. 79 アニメしながらトップに戻る • jQueryはやっぱり便利 – animateだけ、CSSに「scrollTop」プロパティが使 用できる – ブラウザ上端から縦ピクセル距離を指定してスク ロール移動することが出来る – トップに移動する場合には、距離を0 セレクタ.animate(scrollTop, 距離);
  80. 80. ページ内リンクを アニメーション移動 Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved. 80
  81. 81. Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved. 81 アニメしながらページ内リンク • 要素の位置を調べる – ページ内リンク <a href=“#abc”> → <div id=“abc”> – 考え方 • a要素をクリック • hrefのidを取得 → #で値を区切る → split(‘#’) • idが指定された要素の位置を調べる→offset() • offset()のtop値を距離として、animateで移動
  82. 82. ページスクロールに よるコンテンツ変化 (パララックス的な) Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved. 82
  83. 83. Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved. 83 ページスクロールイベント • ページスクロールしたら処理を実行 – jQuery の scroll()メソッド • ページのブラウザ表示最上部位置を調べる – jQuery の scrollTop()メソッド $(window).scroll(function(){ //ページスクロールした var py = $(this).scrollTop(); //ページトップ位置 console.log(‘py:’+py);//確認用 その他実行したい処理; });

×