きど
きど
  • 8
  • 106 806
【CSS入門】絶対に理解できるFlexBoxの使い方!
CSSのFlexBoxの使い方を30分で簡潔に解説しました!
🎁コーディング学習用のデザインカンプをプレゼント!🎁
コーディング初学者に役立つデザインカンプと模範解答コードを無料配布中です!
以下のラインから受け取れます!
linne.info/flex
#コーディング学習に役立つデザインカンプを無料配布中!
Переглядів: 620

Відео

【jQuery】スクロールしたら要素がふわっと表示されるアニメーションの作り方!
Переглядів 13 тис.3 роки тому
🎁コーディング学習用のデザインカンプをプレゼント!🎁 コーディング初学者に役立つデザインカンプと模範解答コードを無料配布中です。 以下のラインから受け取れます! linne.info/huwa LPページなどでよく見かけるスクロールしたらふわっと要素が表示されるアニメーションの作り方を解説します。 #コーディング学習に役立つデザインカンプを無料配布中!
【javascript入門】おみくじを作ってみよう!【初心者向け】
Переглядів 4 тис.3 роки тому
🎁コーディング学習用のデザインカンプをプレゼント!🎁 コーディング初学者に役立つデザインカンプと模範解答コードを無料配布中です。 以下のラインから受け取れます! linne.info/omi Javascriptでおみくじを作る方法を解説しました。 #javascript #javascript入門 #コーディング学習に役立つデザインカンプを無料配布中!
【Vue.js入門】Vue.jsでタイピングゲームをつくってみよう!
Переглядів 22 тис.3 роки тому
🎁コーディング学習用のデザインカンプをプレゼント!🎁 コーディング初学者に役立つデザインカンプと模範解答コードを無料配布中です。 以下のラインから受け取れます! linne.info/typ Vue.jsでタイピングゲームを作成する方法を解説しました。 内容が難しいと感じた方は以下の動画を先にみていただくと理解しやすいかと思います! ✅30分でわかるVue.js ua-cam.com/video/JxXtAsHR4K0/v-deo.html #vue.js #vue.js入門 #コーディング学習に役立つデザインカンプを無料配布中!
jQueryを使ったおしゃれなアニメーションの作り方【animate関数】
Переглядів 7 тис.3 роки тому
🎁コーディング学習用のデザインカンプをプレゼント!🎁 コーディング初学者に役立つデザインカンプと模範解答コードを無料配布中です。 以下のラインから受け取れます! linne.info/ani jQueryを使用して線が伸びるおしゃれなアニメーションを作る方法を解説しました。 #javascript #jQuery #コーディング学習に役立つデザインカンプを無料配布中!
たった30分でわかるVue js入門
Переглядів 56 тис.4 роки тому
🎁コーディング学習用のデザインカンプをプレゼント!🎁 コーディング初学者に役立つデザインカンプと模範解答コードを無料配布中です。 以下のラインから受け取れます! linne.info/vue 30分でVue.jsの基礎を解説します。 目次 0:00 概要について 0:21 Vue.js導入の準備 01:52 Vue.jsの導入 08:37 vue devtoolsの導入 11:18 vue methodsの作成 15:50 vue ディレクティブの解説 18:50 v-if 条件分岐 20:50 v-for 繰り返し 23:43 v-bind html属性との連携 26:56 v-on 28:27 v-model 32:38 computed 算出プロパティ #vuejs #vuejs入門 #コーディング学習に役立つデザインカンプを無料配布中!
【GSAP】TweenMaxとTimelineMaxを使ったCSSアニメーション
Переглядів 4,7 тис.4 роки тому
🎁コーディング学習用のデザインカンプをプレゼント!🎁 コーディング初学者に役立つデザインカンプと模範解答コードを無料配布中です。 以下のラインから受け取れます! linne.info/gs 【概要】 この動画ではJavascriptのアニメーション系ライブラリであるGSAPについて解説しています。 GSAPを使うことで柔軟なCSSアニメーションの実現が可能になります。 本動画で使用した素材のダウンロードは以下から可能です。 github.com/manaweb24/gsap_tutorial 【GSAP公式サイト】 greensock.com/gsap/ #gsap #javscript #コーディング学習に役立つデザインカンプを無料配布中!
Emmet(エメット)の使い方|コーディング補完プラグイン
Переглядів 8234 роки тому
🎁コーディング学習用のデザインカンプをプレゼント!🎁 コーディング初学者に役立つデザインカンプと模範解答コードを無料配布中です。 以下のラインから受け取れます! linne.info/em 【概要】 HTMLやCSSを書く際に便利なコーディングツール「Emmet」の使い方の解説をしました。 Emmet チートシート docs.emmet.io/cheat-sheet/ 【目次】 0:36 Emmetの概要・使い方 3:07 EmmetによるDOCTYPEの宣言 4:17 EmmetによるHTMLタグの展開 5:10 Emmetによるidとclassを付与したタグの展開 6:16 Emmetによる入れ子の展開 7:29 グループ化を活用したEmmet展開  8:58 Emmetがうまく動かない場合の対処法 【HTML入門シリーズ】 ・第1回 HTMLとは? www.youtube.co...

КОМЕНТАРІ

  • @redanntube
    @redanntube 3 місяці тому

    Angularがオワコンになる訳だ。 とても参考になりました。

  • @tktktk8529
    @tktktk8529 5 місяців тому

    めっちゃわかりやすかったです。。動画作成大変感謝です。

  • @user-tv1qy1hr4w
    @user-tv1qy1hr4w 6 місяців тому

    無料なのが勿体無いくらいわかりやすく素晴らしい!助かりました!!

  • @user-zw6xr7fu2t
    @user-zw6xr7fu2t 10 місяців тому

    Good

  • @user-co4zw6xb7r
    @user-co4zw6xb7r Рік тому

    scssで記述した場合どうなるかも知りたいです

  • @user-co4zw6xb7r
    @user-co4zw6xb7r Рік тому

    scriptのコードがどこにあるかわからないです... 概要欄にはないですよね...?

  • @dontbothermeidiot
    @dontbothermeidiot Рік тому

    Reactで色々やるより、Vueの方が直観的でわかりやすいですね

  • @mohammadumar443
    @mohammadumar443 Рік тому

    how can we convert this animations to css animations any idea ?

  • @aryis7041
    @aryis7041 Рік тому

    computedがよくわからんだけど分かりやすい!

  • @milktea9103
    @milktea9103 Рік тому

    Udemyで何回見てもわからなかった内容がやっと理解できました…ありがとうございます!

  • @TEKKEN534
    @TEKKEN534 Рік тому

    めちゃくちゃわかりやすいです。 いろんな動画を見てきましたが、有料動画よりはるかにわかりやすいです。

    • @TEKKEN534
      @TEKKEN534 Рік тому

      弟子入りさせていただきたいです。

  • @user-dn7lp4hm6q
    @user-dn7lp4hm6q Рік тому

    20:44

  • @hana-nichijo-peki
    @hana-nichijo-peki Рік тому

    とっても、分かりやすかったです!ありがとうございます! 作れましたー! vsコードの環境がない人に、このアプリを使ってもらうには、どーしたらいいですかー?

  • @ybsaito
    @ybsaito Рік тому

    とても参考になりました!mountedでやってることが、gameStartでも良いような気がして、いまいち存在意義がわからなかったのですが、mountedって、methodsより先に動いてるんですね。きっと、そこに働きどころがあるのだろうと思いました。いろいろ知れてよかったです。ありがとうございます。

  • @KentaroxKondo
    @KentaroxKondo Рік тому

    これ以上ない最高の説明でした。ありがとうございます!LINE登録しました。

  • @user-bv3ms4wm5w
    @user-bv3ms4wm5w Рік тому

    初心者なのであまり分からないのですが、文字をランダム表示させる場合にはどうすれば良いのでしょうか?

  • @user-px1uv1vk9s
    @user-px1uv1vk9s Рік тому

    楽しく作れました。分かり易かったです。

  • @sa0noji
    @sa0noji Рік тому

    大変勉強になりました。

  • @akirasakamoto4103
    @akirasakamoto4103 Рік тому

    こんにちは。わかりやすい動画、ありがとうございます。動画の通りに記述したのですが、.lineの線がどうしても左の始点のほうに縮むのが改善できません。どうしたら良いでしょうか。$(".line").css("right",0)の部分です。他のアニメーションは上手くいきます。

    • @akirasakamoto4103
      @akirasakamoto4103 Рік тому

      問題解決しました。こちらのミスで CSSファイルの方に初めにleft :0を設定していましたのでこれを削除したら、正常に動作しました。

  • @user-ok1is6tc9d
    @user-ok1is6tc9d Рік тому

    文字だけの参考書を読んでいても難しくてよくわからなかったことが、こちらの動画でとてもよくわかりました!ありがとうございます^^

  • @kuroishi320
    @kuroishi320 Рік тому

    イケメンでどきどきしてる

  • @mayuy
    @mayuy Рік тому

    自分用のメモ 16:35~ Vue.jsの説明

  • @koala_li
    @koala_li Рік тому

    18:33 innerHTML >> textContent v-text works by setting the element's textContent property v-html updates the element's innerHTML.

  • @NYANG0R0
    @NYANG0R0 Рік тому

    作ってて楽しかったです!

  • @shinya2256
    @shinya2256 Рік тому

    とても分かりやすい解説でした。ありがとうございます。

  • @user-pj2km4es2v
    @user-pj2km4es2v 2 роки тому

    個人的に感じたこと: ・細かいことですが、クラス名は基本キャメルケース( *_startButton_* ) ではなくケバブケース( *_start-button_* )を使います( BEM記法を使うため ) ・dataプロパティにスネークケース( *_current_question_* )は違和感があります これこそキャメルケースを使ったほうがいいと思います ・プロパティでの: の後ろやfunction() などの後ろに半角スペースがほしいです ・条件式は基本 === (完全一致)を使います ・タグの中が複雑になっているので属性ごとに改行すると見やすくなると思います ```HTML <button v-if="!isGameStart" class="start-button mb-20" @click="changeStartFlg">START </button> ↓ <button v-if="!isGameStart" class="start-button mb-20" @click="changeStartFlg" > START </button> ``` ・v-if="startFlg != true" は *_!startFlg_* でも可 ・v-if="startFlg" は *_v-else_* でも可 ・v-bind: は省略して : のみでも可 ・styleObjectでif (...counts == 5)としていたが、動的に対応するよう、=== *_this.questionCounts_* とするべき ・ゲームクリアしたらテキストボックスは不要なので消しましょう

    • @cristiankobayashi
      @cristiankobayashi Рік тому

      watch に追加した関数の引数e はちょっとわかりにくいのでvalueなどがいいかと 確か引数に$event が渡せるので、その際にeを使うのが良いと思いますね

  • @user-lu2nf1jm3t
    @user-lu2nf1jm3t 2 роки тому

    自分用 20:49

  • @dm_99
    @dm_99 2 роки тому

    32:43 ブィイヒュwww

  • @y.e.8928
    @y.e.8928 2 роки тому

    とても面白かったですし、勉強になりました!ありがとうございました! 打ち込んだ最後の文字が表示される前に、次の問題が表示されるのが、なんか嫌だったので、watchのところをいじってみました。 watch:{ typeBox:function(e){ if(e==this.current_question){ setTimeout(()=>{ this.quetions.splice(0,1) this.current_question=this.quetions[0] this.typeBox="" this.current_question_counts=this.current_question_counts+1 }, 200) } } }

  • @fworks2
    @fworks2 2 роки тому

    とてもわかりやすいです、ありがとうございます

  • @sion00000
    @sion00000 2 роки тому

    めちゃめちゃいい動画でした!感謝

  • @sagarbharati1438
    @sagarbharati1438 2 роки тому

    Waaaaw!! Thanks for such precious information.. waiting for more gsap animation and j query animation ❤️

  • @sandongnin
    @sandongnin 2 роки тому

    Script のコードはどこにありますか

  • @user-mu6mv8zn5x
    @user-mu6mv8zn5x 2 роки тому

    Vue.jsはインストールから持ってきましたが、使えないようです。考えられる要因はなんでしょう?

  • @yanunu
    @yanunu 2 роки тому

    たすかりました

  • @ItigoMomomiya
    @ItigoMomomiya 2 роки тому

    Comme tu es mignon🥰

  • @SEITETUKAN
    @SEITETUKAN 2 роки тому

    とてもわかりやすい。👍

  • @eleven3418
    @eleven3418 2 роки тому

    分かりやすいです。 ありがとうございます。

  • @kochimatsu5520
    @kochimatsu5520 2 роки тому

    本当に神!コールバック関数ってこういうことかと体でわかりました。

  • @user-yn9zg6ic5s
    @user-yn9zg6ic5s 2 роки тому

    🎁コーディング学習用のデザインカンプをプレゼント!🎁 コーディング初学者に役立つデザインカンプと模範解答コードを無料配布中です。 以下のラインから受け取れます! linne.info/flex

  • @mfs__mi22
    @mfs__mi22 2 роки тому

    わかりやすくてすごくありがたい動画です!

  • @user-yn9zg6ic5s
    @user-yn9zg6ic5s 2 роки тому

    🎁コーディング学習用のデザインカンプをプレゼント!🎁 コーディング初学者に役立つデザインカンプと模範解答コードを無料配布中です。 以下のラインから受け取れます! linne.info/gs

  • @user-yn9zg6ic5s
    @user-yn9zg6ic5s 2 роки тому

    🎁コーディング学習用のデザインカンプをプレゼント!🎁 コーディング初学者に役立つデザインカンプと模範解答コードを無料配布中です。 以下のラインから受け取れます! linne.info/vue

  • @user-yn9zg6ic5s
    @user-yn9zg6ic5s 2 роки тому

    🎁コーディング学習用のデザインカンプをプレゼント!🎁 コーディング初学者に役立つデザインカンプと模範解答コードを無料配布中です。 以下のラインから受け取れます! linne.info/ani

  • @user-yn9zg6ic5s
    @user-yn9zg6ic5s 2 роки тому

    🎁コーディング学習用のデザインカンプをプレゼント!🎁 コーディング初学者に役立つデザインカンプと模範解答コードを無料配布中です。 以下のラインから受け取れます! linne.info/typ

  • @user-yn9zg6ic5s
    @user-yn9zg6ic5s 2 роки тому

    🎁コーディング学習用のデザインカンプをプレゼント!🎁 コーディング初学者に役立つデザインカンプと模範解答コードを無料配布中です。 以下のラインから受け取れます! linne.info/omi

  • @user-yn9zg6ic5s
    @user-yn9zg6ic5s 2 роки тому

    🎁コーディング学習用のデザインカンプをプレゼント!🎁 コーディング初学者に役立つデザインカンプと模範解答コードを無料配布中です。 以下のラインから受け取れます! linne.info/huwa

  • @user-yn9zg6ic5s
    @user-yn9zg6ic5s 2 роки тому

    🎁コーディング学習用のデザインカンプをプレゼント!🎁 コーディング初学者に役立つデザインカンプと模範解答コードを無料配布中です。 以下のラインから受け取れます! linne.info/em

  • @ssakaguchi4996
    @ssakaguchi4996 2 роки тому

    とてもわかりやすくて勉強になります! ありがとうございます! ちなみに、Google chromeでFacebook icon をダウンロードしてドラッグした際にボックスが立ち上がっていますがプラグインでしょうか?

  • @ruti566
    @ruti566 2 роки тому

    reactでも同じようなのをお願いします。とてもわかりやすい。