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

Поделиться
HTML-код
  • Опубликовано: 21 окт 2024

Комментарии • 76

  • @暁燕陳
    @暁燕陳 Год назад +1

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

  • @MH-ce2sh
    @MH-ce2sh Год назад +4

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

    • @webgodweb
      @webgodweb  Год назад +1

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

  • @南田-e5r
    @南田-e5r 2 года назад +1

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

    • @webgodweb
      @webgodweb  2 года назад +1

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

  • @アカ1Google
    @アカ1Google 2 года назад +1

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

  • @itaru19841111
    @itaru19841111 3 года назад +3

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

    • @webgodweb
      @webgodweb  3 года назад +1

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

  • @yasuk4350
    @yasuk4350 2 года назад +6

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

  • @mahmouddabbagh5183
    @mahmouddabbagh5183 2 года назад +2

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

    • @webgodweb
      @webgodweb  2 года назад +2

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

  • @okinayt4093
    @okinayt4093 3 года назад +1

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

    • @webgodweb
      @webgodweb  3 года назад +2

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

  • @kenchan5273
    @kenchan5273 3 года назад +5

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

    • @webgodweb
      @webgodweb  3 года назад +1

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

  • @SwoN_movie
    @SwoN_movie 2 года назад

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

  • @Ace07hm
    @Ace07hm Год назад +1

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

    • @webgodweb
      @webgodweb  Год назад

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

  • @ぴぐもん-p1c
    @ぴぐもん-p1c 3 года назад +3

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

    • @webgodweb
      @webgodweb  3 года назад +1

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

  • @ken2470
    @ken2470 3 года назад +1

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

    • @webgodweb
      @webgodweb  3 года назад +1

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

  • @小西満利奈
    @小西満利奈 2 года назад +1

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

    • @webgodweb
      @webgodweb  2 года назад +1

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

  • @kentaroaso7699
    @kentaroaso7699 3 года назад +1

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

    • @webgodweb
      @webgodweb  3 года назад +4

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

  • @aknr7704
    @aknr7704 3 года назад +3

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

    • @webgodweb
      @webgodweb  3 года назад +1

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

  • @HTacticalMartialArts
    @HTacticalMartialArts 2 года назад

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

  • @BunnySenpaiii
    @BunnySenpaiii 2 года назад +1

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

  • @Admin-wt9iq
    @Admin-wt9iq 2 года назад +1

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

    • @webgodweb
      @webgodweb  2 года назад

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

  • @kenjijinke
    @kenjijinke 3 года назад +1

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

    • @webgodweb
      @webgodweb  3 года назад +2

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

  • @まえかわとよのぶ
    @まえかわとよのぶ Год назад +1

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

  • @楠木セキト
    @楠木セキト 2 года назад +1

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

  • @963_89
    @963_89 3 года назад +1

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

    • @webgodweb
      @webgodweb  3 года назад +1

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

  • @岩室汰一
    @岩室汰一 3 года назад +2

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

    • @webgodweb
      @webgodweb  3 года назад +3

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

    • @岩室汰一
      @岩室汰一 3 года назад +2

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

  • @kyoukyou1022
    @kyoukyou1022 3 года назад +1

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

    • @webgodweb
      @webgodweb  3 года назад +2

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

  • @石丸大明
    @石丸大明 3 года назад +1

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

    • @webgodweb
      @webgodweb  3 года назад +2

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

    • @石丸大明
      @石丸大明 3 года назад +1

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

  • @muu2956
    @muu2956 2 года назад

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

    • @webgodweb
      @webgodweb  2 года назад

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

  • @yutateenu
    @yutateenu Год назад

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

  • @enen1076
    @enen1076 3 года назад +3

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

    • @webgodweb
      @webgodweb  3 года назад +2

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

  • @keitant40
    @keitant40 3 года назад +4

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

    • @webgodweb
      @webgodweb  3 года назад +3

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

  • @oiyuk526
    @oiyuk526 2 года назад

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

    • @webgodweb
      @webgodweb  2 года назад

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

    • @oiyuk526
      @oiyuk526 2 года назад

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

  • @Azurite00F
    @Azurite00F Год назад

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

    • @webgodweb
      @webgodweb  Год назад +1

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

  • @ともやま-z8z
    @ともやま-z8z 3 года назад +11

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

    • @webgodweb
      @webgodweb  3 года назад +3

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

  • @けちょん-k7g
    @けちょん-k7g 2 года назад

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

  • @けちょん-k7g
    @けちょん-k7g 2 года назад

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

  • @AK-cg7vn
    @AK-cg7vn Год назад

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

    • @webgodweb
      @webgodweb  Год назад

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

    • @user-cc8yq7cg4y
      @user-cc8yq7cg4y 9 месяцев назад

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

  • @misora6727
    @misora6727 2 года назад

    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
      @feeeeen 2 года назад

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

    • @misora6727
      @misora6727 2 года назад

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

    • @misora6727
      @misora6727 2 года назад

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

    • @feeeeen
      @feeeeen 2 года назад

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

  • @naga4127
    @naga4127 6 месяцев назад

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

  • @カルー純一
    @カルー純一 3 года назад

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