- 663
- 430 653
Code Tips
Japan
เข้าร่วมเมื่อ 24 พ.ค. 2020
こんにちは！Code Tipsでは初学者向けのプログラミングに特化した動画を公開しています。
HTML、CSS、JavaScriptからReactまで、幅広い分野を取り扱っています。
超入門の内容からスクールや学習教材ではなかなか紹介されない実践的なテクニックまで、視聴者の皆さんが知りたい情報を幅広くカバーしています。
当チャンネルは以下のような方には特に親和性が高いですので、該当される方はぜひご覧ください。
「コーディングを身につけて単価を上げたいWebデザイナー」
「プログラミングを学習して個人開発やポートフォリオを作っている初学者」
「周りにメンターがいない駆け出しフリーランス」
Code Tipsはプログラミング初心者の方々が、より効率的かつ効果的な学習を行い、スキルアップにつなげるお手伝いができるよう、心をこめて動画を制作しています。
あなたもプログラミングの世界に飛び込み、スキルアップを目指しましょう！
HTML、CSS、JavaScriptからReactまで、幅広い分野を取り扱っています。
超入門の内容からスクールや学習教材ではなかなか紹介されない実践的なテクニックまで、視聴者の皆さんが知りたい情報を幅広くカバーしています。
当チャンネルは以下のような方には特に親和性が高いですので、該当される方はぜひご覧ください。
「コーディングを身につけて単価を上げたいWebデザイナー」
「プログラミングを学習して個人開発やポートフォリオを作っている初学者」
「周りにメンターがいない駆け出しフリーランス」
Code Tipsはプログラミング初心者の方々が、より効率的かつ効果的な学習を行い、スキルアップにつなげるお手伝いができるよう、心をこめて動画を制作しています。
あなたもプログラミングの世界に飛び込み、スキルアップを目指しましょう！
【頻出Webデザイン】ウェーブアニメーションを作ってみよう
画像素材と完成版のコードはこちら↓
drive.google.com/drive/folders/1Addnz4XCSlKRC3fg2aYGmXceFI2xIiF-?usp=drive_link
関連動画はこちら↓
keyframesの使い方：th-cam.com/video/HUIlFHJ04cg/w-d-xo.html
初心者でも簡単に実装できるウェーブアニメーションの作り方をステップバイステップで解説します。
HTMLとCSSの基礎的な知識さえあれば、複雑なライブラリに頼ることなく、独自のウェーブアニメーションを作成することが可能です。
この動画はReact初心者のWebデザイナーが勉強したことや初めて知ったことを復習と共有を目的に投稿します。
学習教材のような動画ではありませんが、Reactでのコーディング、Reduxでの状態管理など、多くのことを学びますので一緒にハンズオンで作業して頂く形で視聴していただくことができると思います。
また僕自身がreactの予備知識は必要ありませんので、
同じような初心者の方はもちろん、
「Web制作でコーディングは出来るけどReactもやってみたい」という方に見て頂けると嬉しいです。
ブログ：lorem-co-ltd.com/
引用元：th-cam.com/video/EsZmmK9Zszk/w-d-xo.htmlsi=WijXxXTCdrHE3-1C
Twitter： rubyprogram
#頻出Webデザイン #css
#web制作 #webデザイン #webデザイナー #javascript #コーディング
drive.google.com/drive/folders/1Addnz4XCSlKRC3fg2aYGmXceFI2xIiF-?usp=drive_link
関連動画はこちら↓
keyframesの使い方：th-cam.com/video/HUIlFHJ04cg/w-d-xo.html
初心者でも簡単に実装できるウェーブアニメーションの作り方をステップバイステップで解説します。
HTMLとCSSの基礎的な知識さえあれば、複雑なライブラリに頼ることなく、独自のウェーブアニメーションを作成することが可能です。
この動画はReact初心者のWebデザイナーが勉強したことや初めて知ったことを復習と共有を目的に投稿します。
学習教材のような動画ではありませんが、Reactでのコーディング、Reduxでの状態管理など、多くのことを学びますので一緒にハンズオンで作業して頂く形で視聴していただくことができると思います。
また僕自身がreactの予備知識は必要ありませんので、
同じような初心者の方はもちろん、
「Web制作でコーディングは出来るけどReactもやってみたい」という方に見て頂けると嬉しいです。
ブログ：lorem-co-ltd.com/
引用元：th-cam.com/video/EsZmmK9Zszk/w-d-xo.htmlsi=WijXxXTCdrHE3-1C
Twitter： rubyprogram
#頻出Webデザイン #css
#web制作 #webデザイン #webデザイナー #javascript #コーディング
มุมมอง: 714
วีดีโอ
【頻出Webデザイン】カードのホバーエフェクトを作ってみよう【mix-blend-mode】
มุมมอง 387หลายเดือนก่อน
画像素材と完成版のコードはこちら↓ drive.google.com/drive/folders/1z4Wc5PYorezh67IrPHd6OFrOIcgoA9Pu?usp=drive_link 関連動画はこちら↓ translateについて：th-cam.com/video/4XEETeDW_WI/w-d-xo.html WebサイトやアプリのUIデザインにおいて、カードレイアウトは頻繁に使用されるパターンの一つです。 そのカードに動きを加える「ホバーエフェクト」は、ユーザーエクスペリエンスを向上させ、デザインに魅力とインタラクティブ性をプラスします。 今回はそんなカードデザインに個性を持たせるための「ホバーエフェクト」を、CSSのmix-blend-modeプロパティを使って実装する方法を解説します。 この動画はReact初心者のWebデザイナーが勉強したことや初めて知ったことを...
Next.js14で外部APIからデータ取得するときのローディング画面とエラー画面
มุมมอง 216หลายเดือนก่อน
関連動画はこちら↓ 外部APIからデータ取得する方法：th-cam.com/video/rjHeu2yqVUg/w-d-xo.html loading.tsxについて：th-cam.com/video/4Dhi_-A6_RQ/w-d-xo.html error.tsxについて：th-cam.com/video/KA9aqfl2JQQ/w-d-xo.html Next.js 14で外部APIからデータを取得する際に、ユーザーにとって分かりやすく、ストレスのないローディング画面とエラー画面をどのように実装するかを解説します。 サーバーコンポーネントを活用したエラーハンドリングまで、実践的なアプローチをステップバイステップで紹介します。 この動画はReact初心者のWebデザイナーが勉強したことや初めて知ったことを復習と共有を目的に投稿します。 学習教材のような動画ではありませんが、Rea...
Next.js14における外部APIからデータ取得のやり方
มุมมอง 329หลายเดือนก่อน
関連動画はこちら↓ async,awaitについて：th-cam.com/video/9PbVjm7FkHw/w-d-xo.html mapについて：th-cam.com/video/6OtDnwc9CIY/w-d-xo.html 今回は魅力的なWebデザインに欠かせない「いいね！ボタン」のアニメーションをコーディングする方法を解説します。 keyframesとanimationを使った動きの作り方、JavaScriptを使ったクリック制御を学びながら、ユーザーのインタラクティブな体験を向上させる方法をご紹介します。 最新バージョンのNext.js 14ではサーバーサイドでのデータフェッチやAPIのキャッシング、クライアントサイドでのデータ取得がより直感的かつ効率的に行えるようになっています。 JavaScriptの基本的な文法を使って外部APIからデータ取得する方法を見ていきましょ...
GSAPの基本文法スクロールトリガー(scrollTrigger)とは？④
มุมมอง 220หลายเดือนก่อน
画像素材と完成版のコードはこちら↓ drive.google.com/drive/folders/13dxIkPzJMyqhgQWKUr9JrG-8MGgx73U5?usp=drive_link 関連動画はこちら↓ 前回の動画：th-cam.com/video/TpisW2bKJ-k/w-d-xo.html GSAPの使い方：th-cam.com/video/95tSXhXs7Zw/w-d-xo.html Webアニメーションを効率的に実装できるライブラリとして、多くの開発者に支持されているGSAP（GreenSock Animation Platform）。 その中でも「scrollTrigger」は、スクロールに応じたアニメーションを簡単に制御できる強力な機能です。 ページスクロール時に要素が動いたり、フェードイン・フェードアウトしたりするようなインタラクティブな演出を作成する際...
GSAPの基本文法スクロールトリガー(scrollTrigger)とは？③
มุมมอง 195หลายเดือนก่อน
画像素材と完成版のコードはこちら↓ drive.google.com/drive/folders/1QNLA0X4uXikIKFLm57EXI4-2C6ssA-ok?usp=drive_link 関連動画はこちら↓ 前回の動画：th-cam.com/video/558ptgxv0W8/w-d-xo.html GSAPの使い方：th-cam.com/video/95tSXhXs7Zw/w-d-xo.html Webアニメーションを効率的に実装できるライブラリとして、多くの開発者に支持されているGSAP（GreenSock Animation Platform）。 その中でも「scrollTrigger」は、スクロールに応じたアニメーションを簡単に制御できる強力な機能です。 ページスクロール時に要素が動いたり、フェードイン・フェードアウトしたりするようなインタラクティブな演出を作成する際...
Next.js14におけるuse clientの注意点
มุมมอง 186หลายเดือนก่อน
関連動画はこちら↓ use clientとは？：th-cam.com/video/1aAxmu_atC0/w-d-xo.html Next.js 14における"use client"の仕組みや効果的な使い方、そして開発者が陥りがちなミスやパフォーマンスへの影響について詳しく解説します。 新しいアーキテクチャを取り入れスムーズな開発体験を得るためには、このディレクティブの特性をしっかり理解しておくことが重要です。 Next.js 14での"use client"を使いこなすためのポイントを一緒に見ていきましょう。 この動画はReact初心者のWebデザイナーが勉強したことや初めて知ったことを復習と共有を目的に投稿します。 学習教材のような動画ではありませんが、Reactでのコーディング、Reduxでの状態管理など、多くのことを学びますので一緒にハンズオンで作業して頂く形で視聴していただ...
Next.js14でclient-onlyを使ってみよう
มุมมอง 103หลายเดือนก่อน
関連動画はこちら↓ server-onlyについて：th-cam.com/video/FxiTKQ5GlKY/w-d-xo.html Next.js 14の新機能「client-only」に興味をお持ちですか？ この機能は、クライアントサイドでのみレンダリングされるコンポーネントを簡単に管理できる、非常に便利なツールです。 従来Next.jsはサーバーサイドレンダリング（SSR）を中心としたフレームワークでしたが、クライアントサイドでの柔軟なレンダリング制御が求められるシーンが増えています。 そこで登場したのが「client-only」機能です。 この動画はReact初心者のWebデザイナーが勉強したことや初めて知ったことを復習と共有を目的に投稿します。 学習教材のような動画ではありませんが、Reactでのコーディング、Reduxでの状態管理など、多くのことを学びますので一緒にハンズ...
ReactでCSS書く基本の方法を知らないとライブラリで詰まるよね
มุมมอง 475หลายเดือนก่อน
関連動画はこちら↓ styles-componentsの使い方：th-cam.com/video/BEMqJV71TaI/w-d-xo.html tailwindcssの使い方：th-cam.com/video/ZcJFM-cS0pc/w-d-xo.html Reactでの開発を進めていくうちに、UIのデザインやスタイルを整えるためのCSSの扱いに戸惑ったことはありませんか？ 実はReactでのCSSの基本を理解していないと、便利なUIライブラリやスタイル関連のパッケージを導入した際に、意外なところで詰まってしまうことがあります。 この動画はReact初心者のWebデザイナーが勉強したことや初めて知ったことを復習と共有を目的に投稿します。 学習教材のような動画ではありませんが、Reactでのコーディング、Reduxでの状態管理など、多くのことを学びますので一緒にハンズオンで作業して頂...
Reactでローディングを表示するreact-spinnersを使ってみよう
มุมมอง 146หลายเดือนก่อน
関連動画はこちら↓ propsについて：th-cam.com/video/uSYEF8cllw0/w-d-xo.html Reactアプリケーションで簡単にローディングアニメーションを実装できる人気ライブラリ react-spinners を紹介します。 このライブラリを使えば、さまざまなスタイルのスピナーを簡単に導入できビジュアル的にも洗練されたローディング表示を行うことが可能です。 この動画はReact初心者のWebデザイナーが勉強したことや初めて知ったことを復習と共有を目的に投稿します。 学習教材のような動画ではありませんが、Reactでのコーディング、Reduxでの状態管理など、多くのことを学びますので一緒にハンズオンで作業して頂く形で視聴していただくことができると思います。 また僕自身がreactの予備知識は必要ありませんので、 同じような初心者の方はもちろん、 「Web制...
GSAPの基本文法スクロールトリガー(scrollTrigger)とは？②
มุมมอง 221หลายเดือนก่อน
画像素材と完成版のコードはこちら↓ drive.google.com/drive/folders/1PbC-EWpc7FkX6RAjXoUv1PTd8NlcrV8t?usp=drive_link 関連動画はこちら↓ 前回の動画：th-cam.com/video/7M5C50TFvWg/w-d-xo.html GSAPの使い方：th-cam.com/video/95tSXhXs7Zw/w-d-xo.html Webアニメーションを効率的に実装できるライブラリとして、多くの開発者に支持されているGSAP（GreenSock Animation Platform）。 その中でも「scrollTrigger」は、スクロールに応じたアニメーションを簡単に制御できる強力な機能です。 ページスクロール時に要素が動いたり、フェードイン・フェードアウトしたりするようなインタラクティブな演出を作成する際...
GSAPの基本文法スクロールトリガー(scrollTrigger)とは？①
มุมมอง 236หลายเดือนก่อน
画像素材と完成版のコードはこちら↓ drive.google.com/drive/folders/1eHTGWGLM1vm3UCUQtzPHKKx85Vovr7Xj?usp=drive_link 関連動画はこちら↓ GSAPの使い方：th-cam.com/video/95tSXhXs7Zw/w-d-xo.html Webアニメーションを効率的に実装できるライブラリとして、多くの開発者に支持されているGSAP（GreenSock Animation Platform）。 その中でも「scrollTrigger」は、スクロールに応じたアニメーションを簡単に制御できる強力な機能です。 ページスクロール時に要素が動いたり、フェードイン・フェードアウトしたりするようなインタラクティブな演出を作成する際に、欠かせないツールとなっています。 この動画はReact初心者のWebデザイナーが勉強したこ...
GSAPの基本文法タイムライン(timeline)とは？
มุมมอง 225หลายเดือนก่อน
画像素材と完成版のコードはこちら↓ drive.google.com/drive/folders/1-QD5eNpBSBE7izh6qH5IdNaDpVTAs567?usp=drive_link 関連動画はこちら↓ delayについて：th-cam.com/video/95tSXhXs7Zw/w-d-xo.html staggerについて：th-cam.com/video/M6JZ9oC_0v8/w-d-xo.html アニメーションを手軽に、かつ強力に制御できるJavaScriptライブラリ「GSAP（GreenSock Animation Platform）」は、Webアニメーションを作成する際に非常に人気です。 その中でも複雑なアニメーションシーケンスを管理するために欠かせないのが タイムライン（timeline）機能です。 この動画はReact初心者のWebデザイナーが勉強し...
Next.js14でreact-slickを使ってみよう
มุมมอง 153หลายเดือนก่อน
関連動画はこちら↓ Next.jsのレンダリング：th-cam.com/video/R8eN1zSecqw/w-d-xo.html Next.js 14環境でreact-slickを簡単に導入し、カスタマイズ可能なスライダーを作成する方法をわかりやすく解説します。 スライダーは製品紹介や画像ギャラリーなど、視覚的にインパクトのある要素を作るのに最適です。 この動画はReact初心者のWebデザイナーが勉強したことや初めて知ったことを復習と共有を目的に投稿します。 学習教材のような動画ではありませんが、Reactでのコーディング、Reduxでの状態管理など、多くのことを学びますので一緒にハンズオンで作業して頂く形で視聴していただくことができると思います。 また僕自身がreactの予備知識は必要ありませんので、 同じような初心者の方はもちろん、 「Web制作でコーディングは出来るけどRe...
Next.js14でserver-onlyを使ってみよう
มุมมอง 206หลายเดือนก่อน
関連動画はこちら↓ Next.jsのレンダリング：th-cam.com/video/R8eN1zSecqw/w-d-xo.html 「server-onlyって具体的に何ができるの？」という方も多いかもしれません。 今回はserver-onlyの基本的な使い方と、そのメリットについて詳しく解説します。 Next.js 14を活用して、クライアントに不要なコードを排除し、サーバーサイド処理を最適化する方法を一緒に学びましょう。 この動画はReact初心者のWebデザイナーが勉強したことや初めて知ったことを復習と共有を目的に投稿します。 学習教材のような動画ではありませんが、Reactでのコーディング、Reduxでの状態管理など、多くのことを学びますので一緒にハンズオンで作業して頂く形で視聴していただくことができると思います。 また僕自身がreactの予備知識は必要ありませんので、 同じ...
Reactでカレンダーを表示するreact-datepickerを使ってみよう
มุมมอง 2752 หลายเดือนก่อน
Reactでカレンダーを表示するreact-datepickerを使ってみよう
Reactでクレカ風UIを表示するreact-credit-cardsを使ってみよう
มุมมอง 2882 หลายเดือนก่อน
Reactでクレカ風UIを表示するreact-credit-cardsを使ってみよう
Reactでカウントアップを表示するreact-countupを使ってみよう
มุมมอง 1322 หลายเดือนก่อน
Reactでカウントアップを表示するreact-countupを使ってみよう
Reactでホバー時の吹き出しを作るtippyjs-reactを使ってみよう
มุมมอง 2052 หลายเดือนก่อน
Reactでホバー時の吹き出しを作るtippyjs-reactを使ってみよう
そのG発音しないですね。
type="module"と属性をつけたのですがsrc=".js"のファイルパスを書くとエラーになる原因はなんでしょうか？
とても丁寧な解説ありがとうございます。 ちょうど背景画像をスクロールしたかったので助かりました😊 何かありましたら他の動画も視聴させていただきます！
いつも役に立つ動画をありがとうございます。もう投稿は終わってしまったのでしょうか?
サムネのセンスがいつも好きです（return文に、オマエ誰やねんというツッコミw）
もう更新は終わってしまったのでしょうか…？
5:39のところ、左辺や右辺と 表現されていますが、投稿主さんの 関数では 〇〇 = a || b という形をとっているので 左辺と言ってしまうと〇〇を通常は差します。 私含め混乱される方もいると 思いますから｢||の左側、右側｣と 表現されると良いと思います。
bodyにflexをかけたのは、どういう意図でしょう？
JavaScript初心者です。 append childの所でエラーが出てしまい、どうしたらいいのかわかりません😢 主さんのコードを何度も見直して全く同じにしてもエラーが出てしまいます。
変数名を変更したら無事に動きました！
なかなかJSが覚えられないアラフィフのおばさんです。とても丁寧な説明でわかりやすいです。すぐ忘れてしまうので、何回も見返しています。
わかりやすいですまじで、、、
一味違ったtableの紹介で斬新に思いました。例えばcolspanを後からつけるとセルが伸びるのって面白いですね。ありがとうございました。
主観での感想だと思いますけど、あなたの効率が悪すぎるだけですね。 自分の考えが世の中の考えのように語るのはやめたほうがいいと思います。 私はUdemyだけ何個か買いました。副業なので就職は目指していませんが完全独学で400万稼ぎました。 有料スクールにも通って自社サイトがWPの無料テーマでお問い合わせフォームがGoogleフォームってどうかと思う。 それだけで信頼性ないですよ。
実際は、独学が向いている人と、スクールに習うのが向いている人が両方いる、というのが解なのに、 「独学は絶対だめ」とか「スクールは意味ない」とか、とんでも二元論にするから、おかしな論争になる そもそも二元論じゃないよね、というのが結論かと。
初学者にとってどこが理解しづらいのかをしっかり理解されているようで、本当に分かりやすいです。感謝の気持ちだけでもお伝えさせていただきます!!! このシリーズ全部見させて頂きます☺
ありがとうございます。いつもわかりやすいです。
すごくわかりやすいです。有難うございます。
初学者が何をわからないのかわかってないなぁ
教えていただき感謝です！
gsapの動画待ってました！最高です！もっとお願いします！
とりあえず公式ドキュメントでよくね？とりあえず成果物作ってその後長期インターンとかエンジニアバイトで実践的なものを習えばいいと思う
非常にわかりやすく勉強になりました。ありがとうございます。
頭が悪くて理解力や忍耐力がないならプログラミング志さないほうがよくない・・・？
冒頭で言っている「プログラミングスクールとか、有料の学習サービスを使うことが必須条件」というのは絶対間違い。 必須条件ではない。 できるエンジニアで独学の人全然いる。
プログラミングに限らず、何かの技術を習得したいとき、分かっている人に習うのが一番手っ取り早いのは間違いない でも、それはただの成功例であり、成功しない例も数多にあり、実際は、教える側のスキルに相当依存する おそらく教えることが下手くそな講師に出会う確率は相当高い 確かに、何も知らない初学者が、スクールを選ぶのはひとつだと思うが、だからといって、独学という選択肢を消す理由などどこにもない また、プログラミングにおいては、学習の終わりは存在しない Webで情報を得つづけるという独学力は絶対に必要になる
元々のチェックボックスのサイズが小さいため、疑似要素で作成したチェックボックスの右下部分をクリックしなければcheckedとなりません。疑似要素のどこをクリックしてもcheckedとなるようにする方法はありますか？
「アシンク」ではなく「エイシンク」ですよー😅 語源「asynchronous」なので…
情報学部に行っても誰も手取り足取り教えてくれないので、情報学部卒でもプログラミングが出来ない人いたりします。
私は今まさにその状況にいます（笑）。学部では数学とか理論のことばっかりしか教わらないのでUdemy講座とか見て独学しないと厳しいです。
@@chickensniper2463 結果として、「できる人」を抽出すると、「独学している人」ってことになっちゃいそうですね
8:04
4:55
保守性、型安全性みたいなts的なチーム制作のサポート機能の側面がある一方、プロパティのアニメーションをcssで書けるというところが目に見えるcss新機能らしいメリットではないでしょうか
めちゃくちゃ分かりやすい。神動画に出会ってしまった。目から鱗。
frontend/vue.js3、backend/flaskでプロジェクトを作成中です。大変参考になりました。flaskからフロントエンドを呼び出したとき、.then()メソ ッドを使用して、catch.error()内のcosole.error()を消せ、というお叱りを何度も受けました。backendの処理内容によっては、catch.error()でscript内処理が止まってしまうのかな? と思ってしまいます。結果的に叱られた通りに変更すると、上手くいくのですが。難しです。でも為になる内容でした。ありがとうございます。