【超初心者向け】jQuery最新版の読み込み・使い方解説2021！初めてでも簡単にアコーディオンメニューが作れるようになります【HTML・CSS コーディング】

[@MH-ce2sh]

コーディングの一環でjQueryを勉強しましたが、全く理解できていないことに気がつき、こちらの動画を見つけました。 とても分かりやすく解説してくださりありがとうございます！ まだ整理できていませんが、使いこなせたら絶対楽しいと思うので引き続き視聴させていただきます✨

[@webgodweb]

ありがとうございます！！ できることが増えるので楽しいし充実感もあると思います、応援しております☺️

[@暁燕陳]

聞く前に「いいね」を押しました。色々助かりました。ありがとうございます。

[@南田-e5r]

jQueryを独学で勉強しようとコードの意味も分からないまま見様見真似でＨＰに落とし込んでいました。単純なコピペだったので、うまくいくはずもなく…。諦めてスクールに通おうかと思っていた矢先、この動画に出会え、今まで意味不明だったところが解決しました。本当にありがとうございます！

[@webgodweb]

お役に立てて良かったです！！こちらこそご視聴ありがとうございます🙇‍♀️🙇‍♀️

[@yasuk4350]

jQueryこれから勉強していく予定で、色々な動画みてましたがチャンネル名通り神レベルで分かりやすかったです！ 40分で眠くならない勉強動画は本当にすごいと感じます。いつも、分かりやすい動画あげていただき感謝しております😄

[@itaru19841111]

jQueryのプロゲート終わってつかみで最初にやるのにバッチリでした！がんばれます！

[@webgodweb]

お役に立てて嬉しい限りです！！✨ 是非、実際に動かして学習してみてください〜！

[@mahmouddabbagh5183]

説明のしかたは易しくて、留学生でもわかりやすいですよ ありがとうございます

[@webgodweb]

嬉しいお言葉をありがとうございます！☺️ 今後ともよろしくお願いします🙇‍♀️

[@ぴぐもん-p1c]

jQueryシリーズもめっちゃ良いですね！他にも頻繁に出てくる動きの解説楽しみにしています！！

[@webgodweb]

コメントありがとうございます！ そう言っていただけてよかったです☺️今後も更新をお待ち頂ければ嬉しいです！

[@okinayt4093]

まじでサイコーです。最近Web系の会社に転職したものです。 ちょうどコピペでアコーディオンやハンバーガーメニューなどを作っていましたが、意味がわかってないため、汎用性がきかないところでした。

[@webgodweb]

コメントありがとうございます！ 最初はコピペでも良いと思いますが、コードの意味と役割を理解していれば自分の思い通りに動かせるようになりますね☺️ お役に立てて嬉しい限りです！

[@Ace07hm]

痒み所に手が届く内容で、説明も穏やかで親切！！！ありがとうございます！

[@webgodweb]

こちらこそご視聴ありがとうございます🙇‍♀️🙇‍♀️

[@aknr7704]

どの動画も本当に説明が分かりやすくて、すごく助かっています😆

[@webgodweb]

ご視聴ありがとうございます😊嬉しいお言葉、励みになります🍀

[@アカ1Google]

初めてこのチャンネルを見ました！ 検証ツールの見方と、そもそもの出し方がわからないのですが、その解説動画も上がってますでしょうか… あれば見てみたいです。

[@SwoN_movie]

先日から長期インターン先でjQueryを使用することになったので勉強させていただきます。元々JavaScriptは使ったいたので分かりやすかったです。

[@小西満利奈]

動画を観ながら動作の確認ができました！とても分かりやすかったです。 jQueryの始め方が分からなくて困っていましたが、これから始められそうです。 とても感謝しております。

[@webgodweb]

コメントありがとうございます！ お役に立てて嬉しい限りです！！🙇‍♀️✨

[@kenchan5273]

ハンバーガーメニューの解説もお願いします。3本を押すと横から出てきて、半透明になっているものもあります。

[@webgodweb]

リクエストありがとうございます😊参考にさせていただきます💡

[@kentaroaso7699]

先日頂いたご依頼で、htmlとcssだけでページを作りました。 jQueryをイチオシにしていた私にとって衝撃でした。 速さ、見やすさ、シンプルを求めるとそうなるのかもしれませんね。

[@webgodweb]

コメントありがとうございます！jQueryは重いと言われていて、jQueryを読むか読まないかで、ページの読み込み速度が大きく変わるのは事実です。jQuery・JavaScriptが要らない簡単なアニメーションなどは、CSSで実装できるのがベストだとは思います🙇‍♀️

[@Admin-wt9iq]

言葉使いや表現がとても丁寧で 大変聞きやすいです！

[@webgodweb]

ご視聴ありがとうございます😊そう言って頂けると励みになります♪

[@ken2470]

jQueryのthisの意味がよく分かりました。初めは意味不明でした。やはり動画は分かりやすい。ありがとうございます！

[@webgodweb]

こちらこそご視聴ありがとうございます！ 一度意味がわかれば腑に落ちますよね🙏解決してよかったです！

[@kenjijinke]

isaraで解説してくれるのはありがたいです! 勉強になりました!

[@webgodweb]

ご視聴ありがとうございます✨ そう言っていただけてよかったです！🙇‍♀️

[@BunnySenpaiii]

いつも楽しく拝見してます！ 基本的なアコーディオンメニュー、ローディング、スクロールアニメーション、モーダルウィンド、ハンバーガーメニュー、タブをJavaScript で実装できるんですが、web制作会社に勤めるためにはJqueryで実装できるように学ぶべきですか？Jqueryは全くわかりません、、

[@HTacticalMartialArts]

すみません、このソースはどこで見れますか？ 特にのところがみたいです。

[@まえかわとよのぶ]

ソースコード教えて頂きたいです。

[@963_89]

こんにちは。 初心者にはとてもお役になっております。 jQueryの動画拝見致しました♡

[@webgodweb]

ご視聴ありがとうございます🙇‍♀️ そう言っていただけると嬉しい限りです…！

[@muu2956]

大変分かりやすかったです。ありがとうございました。

[@webgodweb]

こちらこそご視聴ありがとうございます！🙇‍♀️

[@石丸大明]

やばい位わかりやすく有難かったです🙏jQuery、web制作で丁度つまずいていたのでよかったです！web制作でよく使うjQueryシリーズでみたいです！ご検討よろしくお願い致します🙇‍♂️🙇‍♂️

[@webgodweb]

お役に立てて良かったです！！ リクエストもありがとうございます！今後の動画テーマの参考にさせていただきます☺️

[@石丸大明]

@@webgodweb さん お返事いただきありがとうございます！！私も学習頑張ります！！ありがとうございます

[@楠木セキト]

現在専門学生でJqeryに興味があって見ましたほんとに必殺技見たいで凄いですね！この動画もすごく分かりやすかったです。あと、 可愛い

[@enen1076]

jquery解説参考になります！ただ説明を聞いてるだけじゃなくて一緒に進めていくハンズオン形式の方が良いと思います。

[@webgodweb]

ご視聴、リクエストありがとうございます😊今後の参考にさせていただきます🍀

[@kyoukyou1022]

アコーディオンメニューの解説ありがとうございました。とても勉強になりました！おかげさまでiSARA模写を疑問点なく完結させることができました！ メインビジュアルのスライダーやハンバガーメニューの作り方なども、結局どのように作るのが良いのか知りたいです。

[@webgodweb]

お役に立てて良かったです！近日中に、jQueryで作るハンバーガーメニューをテーマにした動画を更新予定なので、お待ちいただければ嬉しいです🙇‍♀️

[@岩室汰一]

いつも参考にさせていただいています。 ありがとうございます！ １つ質問があるのですが、僕はこれまでhtmlとは別にjQuery用のファイルを作成し、それをhtmlで読み込んでいました。 jQueryを書いていくファイルはhtmlファイル内に書くのが一般的なのでしょうか？ ご回答いただければ幸いです。 よろしくお願いいたします。

[@webgodweb]

コメントありがとうございます！ 動画内では、簡単なコードのみであるのと、初心者向けにわかりやすいのでHTML内に直書きしていますが、記述量が多くなってきたり、わかりやすいコードにしたい場合は別ファイルにjQueryやJavaScriptのコードを記載するのがおすすめです！

[@岩室汰一]

@@webgodweb そうなんですね。 ありがとうございました！ jQueryを使って動きがつくと、今まで以上に楽しくなってきたので、また他のメソッドも紹介していただけると嬉しいです😊

[@yutateenu]

すみません、元のhtmlファイルはどこからダウンロードすればいいでしょうか。もしくは、jQuery講座を見る前に模写をやって完成させないといけないでしょうか？

[@keitant40]

jQueryは、今でも使われているのですか？

[@webgodweb]

ご質問ありがとうございます！🙏 昨今のエンジニア界隈では、今からあえてjQueryを使う必要はないと言われていますが、WordPressでは今でもjQueryを標準で読み込んでいたりするので、すぐに全く使われなくなるということはないと思います。既存のサイトの改修作業などでも、未だjQueryを使うのが最適だったりするシーンがちらほらあります。

[@けちょん-k7g]

HTMLファイルではなくてindex phpなのですがどうすればいですか？

[@oiyuk526]

すごく分かりやすい説明ですね。すっきり頭に入りました。即チャンネル登録！ 私のチャンネル運営にも参考になります。

[@webgodweb]

とても嬉しいお言葉ありがとうございます！！🙇‍♀️🙇‍♀️

[@oiyuk526]

@@webgodweb どうやってシナリオを作っているかとても興味があります。

[@Azurite00F]

ddにdisplay:noneを付けましたが、openの時にdisplay:blockにする記述はなくてもいいのですか？

[@webgodweb]

jQueryのslideToggleが、メニューの表示非表示を切り替える際に、勝手にCSSの指定までしてくれるので不要です！（試しに、検証ツールを開いた状態で、アコーディオンメニューを開いたり閉じたりしてみてください。） あらかじめ「display: none;」を指定したのは、ページ読み込み時の、最初の状態ではアコーディオンメニューが折り畳まれた状態にしたかったためです。

[@けちょん-k7g]

7：07このときのファイルはどこにありますか？

[@AK-cg7vn]

scriptタグは基本的にbodyの閉じタグの前にとのことですが、昨日上司に「基本的にscriptはheadの中にまとめといて！」と言われました。でもKZbinに上がってる、他の方の動画でもscriptはbodyの閉じタグ前なことがほとんどな気がします………。どちらがいいんでしょうか？😅

[@webgodweb]

一般的に、JavaScriptによってHTML要素などを操作したいケースが多いため、読み込み順としてはすべてのHTML要素の後がいい（不具合が起こりにくい）という考えのもと、bodyの閉じタグ直前に配置するようにと案内している方が多いと思います。 たとえばページをリダイレクトさせるなど、処理の内容によっては、なるべく早い段階で動作させたほうがいいような場合もあり、あえてhead内に設置することもあり得ます。（解析タグ等も、仕様によってベストプラクティスはまちまちです） まずは上司さんの言う通り設置してみて、動作不良やコンソールエラーなどが起きないか確認・検証されてみてはいかがでしょうか？🤔

[@user-cc8yq7cg4y]

普通にheadタグ内でファイル読み込んで、defer属性つければよくね？

[@ともやま-z8z]

だめだ、可愛すぎる。集中できん

[@webgodweb]

ご視聴ありがとうございます😂ぜひ、何度か見て理解を深めてみてください…！

[@misora6727]

jQueryの説明ありがとうございます！iSARA模写の動画を知らずこちらの動画を見たので、自分なりに近い形でコーディングしたのですが、矢印が切り替わりません。もし宜しければどこに問題があるのか教えてもらえると嬉しいです…💦 ※HTMLにかいたjsの記述 $(function(){ $(".textbox dt").on("click", function(){ $(this).next().slideToggle(); $(this).toggleClass("open"); }); }); ※CSS .textbox dt::after{ content: url(/images/icon_top.png); float: right; } /* jQueryで.openのクラスをついたときに切り替わる */ .textbox dt .open::after{ content: url(/images/icon_ander.png); } .textbox dd{ text-align: left; display: none; } 検証ツールで見るとdtをクリックすると.openのクラスは付与されており、display:none;で消したddの文章もクリックするとスライドで表示され、アイコンだけ切り替わらない状態です。 お手すきの際で良いので解答もらえるととても助かります。よろしくお願いします。

[@feeeeen]

anderじゃなくてunderじゃないですか？

[@misora6727]

png画像の名称にスペルミスがありましたね、ご指摘ありがとうございます。 ただこれが直接の原因ではなかったです。

[@misora6727]

解決しました、お騒がせしました。どうやらdt.open::afterのdtと.openの間にスペースが入っていたことが問題だったようです。

[@feeeeen]

@@misora6727 解決できて良かったです。

[@naga4127]

JQuery、、、オワコンなのか？　開発も終了してるみたいだし、、、

[@カルー純一]

西村博之が刑事罰をくらうことはない!!法の不遡及で！！