Recommandé
Contenu connexe
Tendances
Tendances (19)
Similaire à いまさら聞けないjQuery入門for デザイナー
Similaire à いまさら聞けないjQuery入門for デザイナー (20)
Dernier
Dernier (8)
いまさら聞けないjQuery入門for デザイナー
- 2. #いまさらjQuery 自己紹介 小林 明日香 @ashley_gcm • マークアップエンジニア（元デザイナー） • 株式会社アルタ（名古屋）で 新人教育＆コーディングをしてます • HTMLとCSSが大好きです！ • JavaScriptはちょっと苦手 • VTuberもやっています @ashley_frontier
- 4. #いまさらjQuery このセミナーをやろうと思った理由 Web・ITの領域：いまや生活に欠かせない領域 Webに一歩足を踏み入れたデザイナーさんには • HTML • CSS • jQuery が、わかると強く生きられる、そんな気がしています
- 7. #いまさらjQuery このセミナーは… 今回は、入門者向けのセミナーを目指して • HTMLとCSSはおおよそ読める・書ける • JavaScriptよくわからない • jQueryを使えるようになりたい そんな人のための内容にしました
- 10. #いまさらjQuery 本日の流れ • jQueryやJavaScriptってなんなのか • jQueryを使うための準備ややり方とは • [演習]かんたんな動きをつけてみる • jQueryのためのJavaScriptの基本 • [演習]（時間あれば）自力で動きを書いてみる • jQueryの学習方法・jQueryを学ぶためのサイトの紹介
- 12. #いまさらjQuery jQueryとは • JavaScriptを使いやすくしたもの • CSSに慣れている人に、使いやすい • といっても、中身はじつはJavaScript
- 13. #いまさらjQuery JavaScriptとは • Webサイトを表示するブラウザ上で動くプログラム • たとえばこんなことをするために使われる • スライドショー • ページトップに戻るボタン • モーダルウィンドウ（ライトボックス） • アコーディオンメニュー • ページ内の情報を書き換える • ページの再読み込みなしで別の内容を開く などなどなど
- 16. #いまさらjQuery jQueryのいいところ CSSが分かっていると、意味が分かりやすい！ 例えば $(“.button").css("background", "red"); .button の background を red にする
- 17. #いまさらjQuery jQueryのいいところ 長い英語を覚えなくて（書かなくて）よくて分かりやすい！ 例えば jQuery⇒ $(“.button").css("background", "red"); JavaScript ⇒ document.getElementsByClassName('button').style.backgroundColor = 'red';
- 21. #いまさらjQuery 本日の流れ • jQueryやJavaScriptってなんなのか • jQueryを使うための準備ややり方とは • [演習]かんたんな動きをつけてみる • jQueryのためのJavaScriptの基本 • [演習]（時間あれば）自力で動きを書いてみる • jQueryの学習方法・jQueryを学ぶためのサイトの紹介
- 23. #いまさらjQuery jQueryを使うまでの基本の流れ 1. jQueryのファイルをダウンロードする 2. jQueryで書かれたJavaScriptファイルを準備 （自分で書いたり、ダウンロードしたり） 3. HTMLファイル側で、 JavaScriptファイルを読み込む 4. HTMLファイルをブラウザで開く
- 28. #いまさらjQuery jQueryのプラグインとは • jQueryでつくられた 設置するだけで機能が動くようになる プログラムのファイル • たとえばこんな機能 • スライドショー • ライトボックス（モーダルウィンドウ）
- 29. #いまさらjQuery たとえばこんなプラグインがあります • スライドショー • モーダルウィンドウ https://kenwheeler.github.io/slick/ https://appleple.github.io/SmartPhoto/
- 33. #いまさらjQuery jQueryの超基本の書き方 $(".button").css("background", "red"); なにを どうしたいか どうしたいか のもっと具体的なやつ $("クラス名とか").やりたいこと(詳細設定);
- 36. #いまさらjQuery jQueryの超基本の書き方 $(".button").css("background", "red"); なにを どうしたいか どうしたいか のもっと具体的なやつ $("クラス名とか").やりたいこと(詳細設定);
- 39. #いまさらjQuery 本日の流れ • jQueryやJavaScriptってなんなのか • jQueryを使うための準備ややり方とは • [演習]かんたんな動きをつけてみる • jQueryのためのJavaScriptの基本 • [演習]（時間あれば）自力で動きを書いてみる • jQueryの学習方法・jQueryを学ぶためのサイトの紹介
- 42. #いまさらjQuery project01を使います • project01フォルダを使います • 中身のファイルは⇒ 1. jQuery公式からjQueryをダウンロード 2. index.htmlでダウンロードした ファイルを読み込み 3. scripts.jsにjQueryのコードを追記
- 45. #いまさらjQuery jQueryの読み込む順番 <script src="./js/jquery-3.5.1.min.js" defer></script> <script src="./js/scripts.js" defer></script> </body> </html> jQueryの元ファイルが上 jQueryで書いたファイルは下
- 46. #いまさらjQuery jQueryの読み込む順番 <script src="./js/jquery-3.5.1.min.js" defer></script> <script src="./js/scripts.js" defer></script> </body> </html> jQueryのパワーをつかうので最初に読み込む 読み込まれたjQueryのちからで、 このファイルの中身を動かす 上 か ら 順 番 に 読 み 込 ま れ ま す よ
- 47. #いまさらjQuery scripts.jsにjQueryのコードを書き足す $("#totop").click(function(){ $('body, html').animate({ scrollTop: 0 }, 500); }) id=“totop”をクリックしたら bodyとhtml要素を500ミリ秒でアニメーションしつつページの上までスクロール
- 50. #いまさらjQuery project02を使います • project02フォルダを使います • 中身のファイルは⇒ 1. スライドショープラグインを ダウンロード 2. プラグインのcss＆jsファイルを index.htmlで読み込み 3. scripts.jsにプラグインの起動コード を追記
- 51. #いまさらjQuery スライドショーのプラグインの ファイルをダウンロード 1. slickで検索 2. get it now をクリック 3. Download Nowから ダウンロード
- 52. #いまさらjQuery 必要なcss＆jsファイルを index.htmlで読み込み１ ダウンロードしたデータの 「slick」フォルダにある 3つのファイルを使います • slick.css • slick-theme.css (スライドショーっぽいレイアウトのCSSが初めから入っているもの) • slick.min.js
- 53. #いまさらjQuery 必要なcss＆jsファイルを index.htmlで読み込み２ style.cssより前に • slick.css • slick-theme.css jQueryのあと、scripts.jsの前に • slick.min.js を、それぞれ書いてください
- 54. #いまさらjQuery jQueryの読み込む順番 <script src="./js/jquery-3.5.1.min.js" defer></script> <script src="./js/slick.min.js" defer></script> <script src="./js/scripts.js" defer></script> </body> </html> jQueryのパワーをつかうので最初に読み込む 読み込まれたプラグインを使うための コードを書いたファイルを読み込む jQueryのパワーで動くプラグインを読み込む
- 57. #いまさらjQuery プラグインを起動するコードを書く２ スライドショーなので画像が何枚かあったほうがいいですね index.htmlを編集して画像を増やしましょう <div class="mv"> <img src="./img/slide01.jpg" alt="スライド"> <img src="./img/slide02.jpg" alt="スライド"> <img src="./img/slide03.jpg" alt="スライド"> </div> ⇒
- 59. #いまさらjQuery チャレンジ！ スライドショーの設定変更！ 下記の設定を試してみましょう • 自動で画像が変わる • 切り替えはフェード • スライドの下に 「・・・」の形の ページャーを表示 https://kenwheeler.github.io/slick/ やり方はslick公式のページに書いてあるので 探してみよう！！
- 62. #いまさらjQuery 本日の流れ • jQueryやJavaScriptってなんなのか • jQueryを使うための準備ややり方とは • [演習]かんたんな動きをつけてみる • jQueryのためのJavaScriptの基本 • [演習]（時間あれば）自力で動きを書いてみる • jQueryの学習方法・jQueryを学ぶためのサイトの紹介
- 64. #いまさらjQuery jQueryを使いこなすには やっぱりJavaScriptの基本も必要… ということで、これ以上の 説明するには避けて通れない用語を説明します！！ • 変数 • if • イベント • コンソール
- 65. #いまさらjQuery 用語説明：変数 • プログラミングでよく出てくるやつ • データをとっておく箱 なんども $(‘長いクラス名’) を書くと、 書き間違えたりして大変なので、 同じものを何度もつかうときは 箱A みたいな名前の「変数」に入れて使います。 $(‘.content’) 箱
- 66. #いまさらjQuery 用語説明：変数 var hako = $(‘content’) hako.css(‘background’,’red’); これは $(‘content’).css(‘background’,’red’); これと同じ意味！ 調べながら書こうとすると絶対出てくるやつ $(‘.content’) 箱 var の代わりに let を使うときもあります
- 69. #いまさらjQuery 用語説明：if こんな時によく使います • ○○の要素が存在したら～ • 画面の横幅が○○pxだったら～ • ○○のclassがついていたら～
- 72. #いまさらjQuery 用語説明：コンソール • 困ったらこれを見ます • Google Chromeについて いるやつ使ってます ※デベロッパーツールとか 開発者ツールとか 呼ばれるものについています win : F12 mac: option + command + i
- 73. #いまさらjQuery 用語説明：コンソール • 何かエラーが出てないか • 変数に入ってほしいものが入ったか • イベントが発火しているのか を、確認できるので「動かない…」てなったらみる！ ➡ 今週実際に仕事中に使いました！
- 78. #いまさらjQuery 本日の流れ • jQueryやJavaScriptってなんなのか • jQueryを使うための準備ややり方とは • [演習]かんたんな動きをつけてみる • jQueryのためのJavaScriptの基本 • [演習]（時間あれば）自力で動きを書いてみる • jQueryの学習方法・jQueryを学ぶためのサイトの紹介
- 80. #いまさらjQuery project03を使います • project03フォルダを使います • 中身のファイルは⇒ 今回は 1. ボタンを押すと開いたり閉じたり （アコーディオン） 2. 文字サイズ変更ボタン の2つを作ってみましょう！
- 83. #いまさらjQuery 文字サイズ変更ボタン • scripts.js を編集して #font-max をクリックしたときbodyのfont-sizeを20pxに #font-normalをクリックしたときbodyのfont-sizeを16pxに #font-min をクリックしたときbodyのfont-sizeを12pxに というコードを書いてみましょう！ .css('プロパティ','値')
- 85. #いまさらjQuery 本日の流れ • jQueryやJavaScriptってなんなのか • jQueryを使うための準備ややり方とは • [演習]かんたんな動きをつけてみる • jQueryのためのJavaScriptの基本 • [演習]（時間あれば）自力で動きを書いてみる • jQueryの学習方法・jQueryを学ぶためのサイトの紹介
- 87. #いまさらjQuery jQueryを使えるようになるために • とにかくたくさん書いて、動かして、直してみる • 動かないときはChromeのconsoleを見てみる • エラーが起きたらとりあえず検索 • 困ったら、console.log()で何が起きているか見てみる • たくさん動かないのを経験してもめげない • ときどきJavaScriptの基礎に立ち返る
- 95. #いまさらjQuery おすすめサイト • progate https://prog-8.com/languages/jquery 基礎固めにおススメ。JavaScriptコースもあるので、 全般的な基礎固めや、おさらいに。 • ドットインストール https://dotinstall.com/lessons/basic_jquery_v2 この内容が分かるようになれば、あとはヒラメキと 検索力で、きっとがんばれるはず……！
- 96. おわりに
- 97. #いまさらjQuery 今日はこんなことをやりました • jQueryやJavaScriptってなんなのか • jQueryを使うための準備ややり方とは • [演習]かんたんな動きをつけてみる • jQueryのためのJavaScriptの基本 • [演習]（時間あれば）自力で動きを書いてみる • jQueryの学習方法・jQueryを学ぶためのサイトの紹介