有料会員限定の動画リスト
-
14:53移動後のページにデータを渡せる、URL「パラメーター」について解説！後編
前編の動画はこちらhttps://factory-programming-mv.com/video/p9lwT_0oHo4/この動画では、検索システムなどでよく使われる、WebサイトのURLに含まれ…
-
11:14GSAPでパララックス（視差効果。parallax）の実装をする方法！後編
前編の動画はこちらhttps://factory-programming-mv.com/video/W28JudaswI0/GSAP（JavaScriptのアニメーションライブラリ）の再生リストはこ…
-
13:44コンテンツを一定の幅で固定する効率的な方法！後編
前編の動画はこちらhttps://factory-programming-mv.com/video/XydJmNOogeQ/動画内で説明していた、mixinについてはこちらhttps://facto…
-
12:48入れ子のレイアウトがもっと楽に！subgrid（サブグリッド）解説。CSS Gridの新機能を使いましょう。後編
動画内で説明していた、CSSのカウンター（counter）の動画はこちらhttps://factory-programming-mv.com/video/G3kvmKeJsl8/前編の動画はこちらh…
-
06:37Web Animations APIでアニメーション再生時の前後の状態を制御する「fill（フィル）」について解説！
この動画では、アニメーション再生時の前後の状態に関するオプションに焦点を当てて説明しています。オプションとして、アニメーション再生前後の状態を調整するために「fill」オプションを紹介しています。初…
-
06:19Web Animations APIでアニメーションの再生方向を制御することができる、direction（ディレクション）について解説！
この動画は、アニメーションの再生方向（ディレクション、direction）について紹介しています。動画内では、ボックスが画面上でどのように動くか（例えば、右に移動し、元に戻る動き）をJavaScri…
-
05:48Web Animations APIでアニメーションの繰り返しを指定できる、iterations（イテレーション）とiterationStartについて
この動画では、Web アニメーションAPI (Web Animations API) の一部であるアニメーションの繰り返し（イテレーション）に焦点を当てています。このプロパティにより、アニメーション…
-
06:49アニメーションの流れを細かくコントロールする「offset（オフセット）」について。Web Animation s API で細かい調整をしましょう。
この動画では、Web アニメーションAPI (Web Animations API) のオフセット機能について解説しています。オフセットは、アニメーションの各段階をカスタマイズするために使用されます…
-
06:54Web Animations API でkeyframes（キーフレーム）を使って、任意の順番でアニメーションさせてみましょう！
この動画は、Webのフロントエンド技術に関する内容で、特にWeb Animations API（バーションAPI）のキーフレームに焦点を当てています。キーフレームは、アニメーションの進行状況や状態を…
-
11:33Web Animations APIでイージング（easing）を指定する方法と、それぞれのパターンと動き方を解説
CSSのイージングについての動画はこちらhttps://factory-programming-mv.com/video//イージングをカスタマイズできるツールはこちらhttps://front-e…
-
04:40macの開発を助けるコマンドラインツールのセット、Command Line Tools（CLT）について解説しています。
この動画では、Macを使った開発作業に不可欠な「コマンドラインツール(Command Line Tools、CLT)」について解説しています。このツールは、ソフトウェア開発をする際に必要なプログラム…
-
09:01GSAPを使って、途中のコンテンツを横スクロールにする方法！後編
前編の動画はこちらhttps://factory-programming-mv.com/video/-6d0mTnhcLE/この動画では、GSAP（GreenSock Animation Platf…
ダウンロード有 -
27:37階層が深い、ドロップダウン「多階層ドロップダウンメニュー」を実装する方法！WordPress（ワードプレス）のカスタムメニューにも対応！後編
前編の動画はこちらhttps://factory-programming-mv.com/video/bma-7TabXCc/JSのfindメソッドについてはこちらhttps://factory-pr…
ダウンロード有 -
23:17モーダルウィンドウを実装する最新のタグ、「dialog（ダイアログ）タグ」を活用した実装！全２回 後編
前編の動画はこちらhttps://factory-programming-mv.com/video//前回の動画に続き、モーダル画面を作成しています。モバイルウィンドウの開閉とアニメーションに焦点を…
ダウンロード有 -
47:36【JavaScriptで戦闘ゲーム制作 #6】 攻撃のログを分かりやすく加工して出してみよう！
第６回目の動画では、攻撃などの内容をログ画面に動的に生成する処理を書くことによって、処理の内容を分かりやすくし、デバッグなどを楽にします。このシリーズの動画再生リストは以下です。活用してください！h…
-
14:21【JavaScriptで戦闘ゲーム制作 #7】 クリティカルヒットを実装してみましょう！
第７回目の動画では、クリティカルヒットという概念を作ります。クリティカルヒット率を設定し、敵も見方もランダムにクリティカルヒットが入るようにし、ダメージを操作します。このシリーズの動画再生リストは以…
-
01:01:03【JavaScriptで戦闘ゲーム制作 #8】討伐数を実装して、より複雑なゲームを作っていきましょう！
第８回目の動画では、敵の討伐数を実装してさらにゲームを複雑化していきます。今どのくらい敵を倒したのか？どのくらい敵を倒せばクリアするのか？を数値として出していきましょう！また、次の敵とエンカウントす…
-
22:55jQueryのslideUp, slideDown, slideToggleについてと、JSでの書き換え 後編
※お知らせとお詫び動画内で、Web Animation APIの説明で、ease: 'ease-in-out'と紹介している部分がありますが。正しくはeasing: '…
ダウンロード有 -
21:32jQueryで簡単にフェードイン・フェードアウトができる、fadeIn・fadeOut・fadeToggleとJSでの書き換え 後編
前半の動画はこちらですhttps://factory-programming-mv.com/video/mKlK9jy8Ieo/この動画では、前回の続編として、フェードイン・フェードアウト・フェード…
-
12:16JSでお知らせなどの日付が、◯日以内のものに自動でNEWをつける方法！ 後編
この動画では、time属性のdatetimeから日付のテキストを取得し、それをJS側で処理することによって、指定した日付以内の日付かどうかを判断する処理を実装していきます。実際に指定した日数以内であ…
-
09:01Vue3 の Composition API における、ライフサイクル（Lifecycle）メソッドについて
動画内で説明していた、Vue3 の公式ドキュメントはこちらhttps://ja.vuejs.org/api/composition-api-lifecycle.htmlVue.js（ビュージェイエス…
-
09:26Composition APIにおける、WatchとWatchEffectについて解説！
この動画では、Vue.jsの「コンポジション API(Composition API)」における「ウォッチ(Watch)」と「ウォッチエフェクト(WatchEffect)」について、初心者向けにわか…
-
06:12Vue3でComposition APIにおける、Computed の定義と呼び出しについて
Vue3の新しいComposition APIを活用したComputed（コンピューティッド/計算プロパティ）の定義とその呼び出し方法について詳しく解説します。前回の動画では、Composition…
-
10:43Vue3でref, reactiveで定義したデータにアクセスし、データを書き換える方法
Vue3において、Composition APIを使用して、refやreactiveを用いて定義したデータを操作する方法について説明します。Composition APIの利用: Vue3ではCom…
-
16:17Vue jsでドロップダウン・アコーディオンメニューを実装する方法 後編
この動画では、Vueの基礎的な技術を活用したよくあるWebサイトの機能を実装していきます。今回はドロップダウン・アコーディオンメニューを実装していきますが、実装方法としては色々な形があるので、今回の…
-
11:31Vue jsのライフサイクルフックについて解説！適切なタイミングで処理させる方法
この動画では、Vue jsのライフサイクルフックについて説明しています。以下動画で説明している内容の概要です。・beforeCreate: これは、Vueコンポーネントがまだ作られていない時点で実行…
-
17:31無限にアニメーションし続ける円。重なった時に反対色になる実装と組み合わせて、表現の幅を広げましょう！後編
GSAPを使ったアニメーション作品のシリーズです。最初、テキストを１文字ずつアニメーションさせながら表示させた後、円をぼかした状態と透明な状態から、通常の円の状態に戻します。それから、CSSを使って…
ダウンロード有 -
15:13データの変更を監視して処理する watch について解説！設定可能な引数やオプションも
この動画では、dataなどの変更に基づいて別の処理をすることができるwatchについて解説しています。また、引数に設定できる・newValue・oldValueについてや、deepやimmediat…
-
22:26HTMLのcheckbox, radio, select をv-modelで管理！活用する方法も
この動画ではHTMLのチェックボックス(checkbox)、ラジオボタン(radio)、セレクトボックス(select)をv-modelでどのように管理し、実際にどう活用するのかを解説します。動画シ…
-
08:57v-forの中でv-forを回す方法！配列やオブジェクトに含まれる配列などをどのように処理すればいいかを解説
配列やオブジェクトの中に配列などが含まれているデータ形式はよく存在します。こういった場合にどのように処理すればいいのか、実際の挙動を確認しながら解説しています。複雑なデータ形式の外部APIや変数など…
-
18:21GSAPで、丸とテキストを効果的にアニメーションさせて、簡単なモーショングラフィックスを作ってみましょう！後編
今回は全２回の動画で、GSAPを用いたアニメーションの作例を紹介しています。縁取りやストライプの円をランダムに配置し、イージングを工夫することで効果的なモーショングラフィックスを展開します。前半の動…
ダウンロード有 -
10:36Vue.jsのcomputedについて解説！methodsの違いとは？キャッシュしてくれるとは？
この動画では、初心者がなかなか理解しにくいcomputedについて説明しています。一見するとmethodsとほとんど変わりないように見えますが、処理結果を保持（キャッシュ）してくれるというメリットが…
-
15:29【Vue.js実践！】Vueのmethodsとdataを使って、メニューの切り替えをしてみましょう！
Vueのmethodsやdataを学んでも、なかなか活用の仕方が分からないという声をいただきます。そんな方の為に、どのようにどうやったら活用できるのかを実践形式で紹介しています。今回はよくあるメニュ…
-
23:50任意のスクロール位置にユーザーを誘導することができる snap（スナップ） について解説！ GSAP ScrollTrigger #6
この動画では、GSAPのScrollTriggerのオプションである、snap（スナップ）について解説しています。任意のスクロール位置にユーザーを移動させることができます。snapには様々なオプショ…
-
06:33スクロールに紐づいたアニメーション実践編！GSAP ScrollTriggerのscrubとTimelineを使ってみましょう！ 全２回（第２回目）GSAP ScrollTrigger #5
2022/10/15追記視聴者の方からのご指摘で、mainコンテンツ部分のCSSが抜けていることに気づきました。すみません。つきましては、コメント欄に該当コードを記載しておきますので、そちらを参照し…
-
12:24ワードプレスの投稿一覧ページなどで、ページネーションを自動生成する方法！後編（全２回）
この動画では、アーカイブページやカテゴリーに紐づく一覧ページなどで、ページネーションを自動生成する方法を紹介しています。意外と複雑な関数などを使う為、初心者がつまづきやすいポイントなのでこの動画でし…
-
05:12数値を変化させるアニメーションをGSAPで簡単に実装する方法！
たまにサイトで見かける、グラフなどと共に変化していく数値のアニメーションのやり方を紹介しています。
-
04:44CSS Grid 実践！メディアサイトのようなレイアウトを組んでみましょう！レスポンシブにも対応！ 全２回（第２回目）
この動画では、CSS Gridを活用した実践的な内容を紹介しています。いくつかの記事が並ぶようなサイトを想定したコーディングをしながら、レスポンシブ対応を考慮した上で２回に分けて解説していきます。１…
-
16:38サイトに雪を降らせるアニメーションをGSAPを使って実装してみましょう！ 全２回（第２回目）
今回は、GSAP（アニメーションライブラリ）を使って、雪を降らせるアニメーションを作ってみます。画像を使わずに、背景と雪をそれぞれCSSで生成し、GSAPを使ってより自然な動きになるようにしてみまし…
ダウンロード有 -
06:29下にスクロールでヘッダーを隠し、上にスクロールでヘッダー表示させる機能を実装してみましょう！全２回（第２回目）
この動画では、JavaScriptとCSSを使ってページの途中でスクロールを上下にした際に、ヘッダーの表示を切り替えるアニメーションを実装していきます。
-
25:47クリックすると、たくさんの箱が集まってできていくようなグローバルメニューをGSAPで作ってみましょう！ 全２回（第２回目）
今回の動画では、画面のサイズに応じてJavaScriptで箱を作り、それをメニューを開く際にランダムに表示させることで面白い動きをしたアニメーションを作ってみます。さらに、今回はメニュー内の文字も下…
ダウンロード有 -
22:14クリックしたら、星が散りばめられる「クリックエフェクト」をGSAPで実装してみましょう！全２回（第２回目）
この動画では、クリックした座標をJSで取得し、そこを中心にアイコンを外側に広がるように表示させてみます。第１回目の動画はこちらhttps://factory-programming-mv.com/v…
ダウンロード有 -
35:33自動で円形にメニューを並べて、順番にアニメーションさせる方法！ 全２回（第２回目）
この動画ではJavaScriptのアニメーションライブラリ「GSAP」を使って、開閉するメニューを実装します。sin（サイン）やcos（コサイン）を使って、円周上にアイコンを並べて、それをGSAPの…
ダウンロード有 -
14:59テキストアニメーション実装！GSAPで一文字ずつ色や位置をランダムに配置して、その後アニメーションしながらフェードアウトする！ 全２回（第２回目）
この動画では第１回目に引き続き、一文字ずつアニメーションさせる実装をしていきます。特にeaseにこだわって、それぞれのアニメーションをブラッシュアップしていきます。１回目の動画はこちらhttps:/…
ダウンロード有 -
15:38丸をJSで生成して、テキストと一緒にアニメーションさせてみましょう！ 全２回（第２回目）
前半の動画に引き続き、GSAPでアニメーションを実装していきます。第１回目の動画はこちらhttps://factory-programming-mv.com/video/CY2boZqUzdU/
ダウンロード有 -
11:14GSAPでよく使うアニメーションを管理できるEffects（エフェクト）解説 GSAP #16
GSAPにはアニメーションを管理することができる、registerEffectメソッドがあります。この動画では基本的な使い方と、Timeline内での使い方や- name- effect- defa…
-
09:58クリックした所から広がるようにGSAPでアニメーションしてみましょう！ 全２回（第２回目） GSAP #15
この動画は全２回の動画の２回目です。第１回目で実装した基本的な要素の配置と、tweenの設定に、さらにずらしてアニメーションさせる実装をしていきます。こちらの動画は会員専用です。以下から登録すること…
-
08:30GSAPで、簡単に複数の要素をズラしてアニメーションさせる方法を学びましょう！全２回（第２回目） GSAP #5
こちらは会員専用の動画です！登録は以下から出来ます。https://factory-programming-mv.com/subscription/registerSubscription/今回はG…
-
07:22郵便番号から住所自動入力を実装する方法を紹介 2/2
前回に引き続き、郵便番号から住所を自動入力する実装をしていきます。JSでフォーム周りの実装はなかなかとっつきにくいと思いますが、この動画で是非やってみていただければと思います。今後他の外部APIなど…
-
10:17Googleリスティング広告の登録の流れと、各項目について解説！
この動画では、Google広告を出すための方法を紹介しています。なかなか各項目が難しいというお声を聞くので、詳しく説明していますが、動画内でも説明している通りUIが変わりやすいので、その場合は画面の…
-
19:09Google広告を出すことによるメリット！データの分析について紹介！
Google広告を出した際の分析データは、Webマーケティングをしていくのにかなり役立つ情報です！今回は実際のデータと、どのように見ていけばいいのかを解説していきます！Google広告の登録の方法は…
-
22:12Googleキーワードプランナーの使い方と、検索ボリュームの考え方などについて
キーワード選定をするのに必須なキーワードプランナーの使い方や考え方について説明しています。ただ単に検索ボリュームなどを見て満足していませんか？きちんと書き出して比較することによって、どんなキーワード…
-
14:16画像の利用の最適化について！画像ファイルの取り扱いや画像を表示する際の注意点とは？
SEO視点で考える、画像の利用最適化について考えます。ディレクトリ構造などのファイル管理はどうすれば良いのか？alt属性をどのように考えれば良いのか？などを解説しています。動画内で説明していた、Wo…
-
12:27SEOから考える、「リンク」について解説！適切なアンカーテキスト設定とは？
サイトで何気なく使っている「リンク」ですが、きちんと設計を考えてあげることでユーザービリティを高め、検索エンジンにもユーザーにも優しいサイトにしましょう！
-
22:26SEO対策に大きく関わるコンテンツ！「質の高いコンテンツ」とは？Googleが考える質の良さとは何かを見ていきます。
動画内で言及していた、hタグの動画はこちらhttps://factory-programming-mv.com/video/iPAEjnWnBPA/
-
34:57SEO対策から考える、サイト内のメニューやパンくずメニューなどのナビゲーションについて
今回の動画では、グローバルメニューやサイドバーのメニュー・パンくずリスト・サイトマップなど、ユーザーを誘導するナビゲーションのお話をしています。正しくユーザーを誘導することで、ユーザーにも検索エンジ…
-
19:30SEO対策の目線で考える適切なURL構造について！
SEO対策を考えるとき、実はURLの構造やパス名も大事になってきます。この動画では、初心者がつまづきやすいURLの考え方やワードプレスなどにおける、設定の方法についてお話しています。
-
21:06SEO対策の基本とも言える、title（タイトル）タグとdescription（ディスクリプション）タグについて解説！
今回は、SEO対策の基礎中の基礎であるタイトルタグと（meta）ディスクリプションタグについて解説しています。そもそもどこに設定するのか？HTMLでコーディングしている場合とワードプレスの場合。適切…
-
12:10SEO基礎！何をやったら良いのかわからない、具体的にどうしたら良いかわからない方必見！Googleが公式で出しているSEOマニュアル解説！
SEO対策と１口に言っても項目は多岐に渡り、初心者にとってはなかなか難しいことも多いと思います。また、SEOが変わっていく部分と変わっていかない部分があったりして混乱することもあるかと思いますが、公…
-
12:25マウスの座標をJavaScriptで取得する方法と、マウスを変更・編集する方法 2/2
JavaScriptでマウス座標を取得する方法はいくつかありますが、今回はその中でも・offset (X/Y)・client (X/Y)・page (X/Y)とそれぞれの特徴について、説明していきた…
-
05:55WordPressでグローバルな変数・関数を定義する方法。サイト全体で共通して呼び出したいデータをまとめて、管理しましょう！
Wordpressに限らずですが、サイト制作をおこなっているとサイト全体で共通して扱いたいグローバルな変数や関数を定義したい場合があります。そういった場合に使えるのが、このグローバル変数・グローバル…
-
04:40長くなってしまいがちな、functions phpを分割して、読み込ませる方法！
Wordpressの開発をしていると、どうしてもfunctions.phpのファイルは長くなりがちになってしまいます。ただし、この動画で説明している方法を使えば分割して、読み込ませることができますの…
-
09:58カスタム投稿の一覧ページ・アーカイブページを作る方法！
今回の動画では、カスタム投稿のアーカイブページ・一覧ページの作成方法について詳しく解説します。カスタム投稿:「ニュース」というカスタム投稿を追加して、これをもとに一覧ページやアーカイブページを作成し…
-
14:41【JavaScriptで数を当てるゲーム #6】ゲームの難易度を設定して、最後にゲームを完成させましょう！
このシリーズ最後の動画です！easy / normal / hard を選択して、その際にゲームの難易度が設定できるように実装して、ゲームを完成させましょう！最後までお疲れ様でした！この動画シリーズ…
-
16:17【JavaScriptで数を当てるゲーム #5】自動的に問題を次に移行して、最後に正答数と回答数を表示してみましょう！
引き続きゲームの実装を進めていきます。今回は、一番大きいと思われるパネルをクリックした際に、きちんと次の問題が自動表示され、さらには最後までゲームを進めた時に正答数と回答数を表示するようにします。こ…
-
23:35【JavaScriptで数を当てるゲーム #4】タイマーを設定して、秒数と残り時間のゲージを実装してみる。
前回に引き続き、ゲームの実装を進めていきます。今回は残り時間の秒数と時間のゲージをrequestAnimationFrameというメソッドと、Dateオブジェクトを使ってやってみます。この動画シリー…
-
22:29Sassのおすすめのフォルダ、ファイル構成について。ある程度の大きさのサイトやWordPressにおけるSassの構成について
Sassでファイル分割をしていくようになると、構成が複雑になりがちになってしまいます。この動画では、１つの例としてSassのファイル構成を紹介しています。規模によっても違ってきますが、まずはこういっ…
-
09:04Sassのファイル分割@useと@forwardの使い方！後編
これまでファイルを分割し他のファイルに読み込ませるには、@importという記述でしたが、廃止になりました。新しく使えるようになったのが、この@useと@forwardです。しっかりと覚えて、ファイ…
-
34:25GSAP ScrollTrigger（スクロールトリガー）実践編！様々な要素を同時に動かして、より印象的なアニメーションを作る。第２回目（全２回）
GSAPやScrollTriggerの動画をこれまで配信していますが、今回は多くの機能を取り入れて、より実践的な実装をしていきます。第１回目の動画はこちらhttps://factory-progra…
ダウンロード有 -
10:16Scrolltriggerで、レスポンシブ対応できる matchMedia（マッチメディア）を紹介！GSAP ScrollTrigger #10
アニメーションの処理を書いていると、画面幅によってアニメーションの内容を変えなくてはならないことがあります。通常のJSでも処理することができますが、GSAPのScrollTriggerにはあらかじめ…
-
11:10ScrollTriggerで様々なタイミングでアニメーションさせることができる toggleActions（トグルアクション）解説！ GSAP ScrollTrigger #9
ScrollTrigger（スクロールトリガー）の各コールバックであるonEnter, onLeave, onEnterBack, onLeaveBack時にアニメーションを操作することができるto…
-
12:45GSAP ScrollTriggerの コールバック（callback）関数を解説！ GSAP ScrollTrigger #8
この動画では、スクロールトリガーの以下のコールバック関数について紹介しています。・onEnter・onLeave・onEnterBack・onLeaveBack・onRefresh・onToggle…
-
14:18アニメーションが終わるまで、要素を固定し続ける pin（ピン） について解説！ GSAP Scroll Trigger #4
今回は、スクロールトリガーで指定したアニメーションが終わるまで、要素を自動で固定表示にしてくれる、「pin」について説明しています。このオプションを使う時には、要素が自動で追加されるので、そちらの注…
-
06:02画像や動画などのテーマフォルダ直下のファイルを呼び出す方法！
この動画では、ダッシュボードなどからアップロードした画像ではなく、テーマフォルダに保存したファイルを呼び出す方法を紹介しています。get_template_directory_uriという関数の紹介…
-
15:31CSS Gridで折り返しの処理を自動でする、auto-fitとauto-fillについて #11
Flexboxでアイテムを折り返す際は、flex-wrap: wrapという処理をしていましたが、Gridでも似たような処理をおこなうことができます。今回はそのような処理ができるauto-fitとa…
-
27:31CSS Gridでalign-contentやplace-itemsなど、要素の配置を指定する様々なプロパティを紹介！ #10
この動画では、CSS Gridによって並べたアイテムのレイアウトを変更できる以下のプロパティについて説明しています。・justify-content・align-content・justify-it…
-
08:15CSS Gridのgrid-auto-flowで配置方向を変える方法と、空いたセルを埋める方法 について #9
CSS Gridで要素を配置した場合、基本的には横方向に並びますが、grdi-auto-flowのcolumnを使うことで縦方向に並べることができます。この動画では、使い方と実際の動きを見ていきます…
-
09:59GSAPのTimline（タイムライン）を連結したり、ネスト・グルーピングしてみましょう！ #14
GSAPではTimelineをつなげたり、１つの大きなTimelineに入れ子にしたりすることができます。この動画はその方法と、実際の動きやメリットについて説明しています。
-
13:52GSAPのコールバック（callback）関数を理解しましょう！ GSAP #13
GSAPにはいくつかのコールバック関数が用意されています。この動画では- onStart- onComplete- onUpdate- onRepeat- onReverseCompleteについて…
-
25:38GSAPのアニメーションの開始位置を制御する様々な方法を紹介！ GSAP #12
GSAPのdelay以外にもアニメーションの開始位置を指定することができるオプションは色々とあります。この動画では・'数値'・'+=数値'・'-=数…
-
16:17GSAPの label （ラベル）について解説！デバッグなどに便利な seek（シーク）との使い方も GSAP #11
この動画では、GSAPのラベルという概念について説明しています。タイムライン上でラベルという目印のようなものをつけて、アニメーションを再生する際に活用することができます。また、長くなってしまったタイ…
-
26:29GSAPのより高度なメソッドを扱えるようにしましょう！停止・逆再生・再生速度など GSAP #10
GSAPのアニメーションをインタラクティブに制御することが出来るようになる、メソッドについて説明しています。この動画では・play（再生）・pause（一時停止）・restart（最初から再生）・r…
-
10:08GSAPでアニメーションを繋げて処理することが出来る Timeline（タイムライン）について学びましょう！ GSAP #9
より直感的にアニメーションの順序などを決めることができる、GSAPの「Timeline」について説明しています。基本的な概念を理解し、より複雑なアニメーションを組めるようにしましょう！
-
15:30GSAP keyframes（キーフレーム）の使い方を紹介！複数の状態をアニメーションする方法 GSAP #8
今回はCSSにも存在するkeyframesの使い方を見ていきます。toメソッドやfromメソッドのみだとなかなかアニメーションの順序などを制御しづらいですが、keyframesを知っていると、より複…
-
11:21GSAPでアニメーションを繰り返す方法と、その際のオプションについて解説！ GSAP #7
CSSのアニメーションプロパティでは繰り返しなどを簡単に指定することができましたが、GSAPではどのように指定するのでしょうか？また、オプションはどのようなものがあるのかを見ていきます。具体的には・…
-
11:46CSSだけで、文字にグラデーションをかける方法！
画像を作ることにより、文字にグラデーションをかけるものを表示することはできますが、文字を変更したり色を変更したりする際にいちいちPhotoShopなどの画像編集ソフトを使わなければなりません。今回は…
-
18:43CSSを使って、複雑なグラデーションを指定してみましょう！linear-gradient応用編！
CSSで指定できるグラデーションは単に２つの色の組み合わせのみではありません。この動画では、より高度なグラデーションの指定方法について学びます。動画内で紹介していたツールURLはこちらhttps:/…
-
44:42【JavaScriptでパスワード生成ツールを作る！】生成したパスワードを気軽にコピーできるような機能を付けましょう！ #7（最終回）
JavaScriptでWebアプリケーション作成を作ってみるシリーズの動画です。今回はシリーズ第七弾で最終回です。生成したパスワードそれぞれに「コピーする」ボタンを設定し、気軽にユーザーがコピーでき…
-
23:39【JavaScriptでパスワード生成ツールを作る！】生成するパスワードの個数をユーザーが選択できるような機能を追加しましょう！ #6
JavaScriptでWebアプリケーション作成を作ってみるシリーズの動画です。今回はシリーズ第六弾で、ユーザーが、生成されるパスワードの個数を選択できる機能を追加していきます。選択肢としてデフォル…
-
20:13【JavaScriptでパスワード生成ツールを作る！】生成するパスワードの文字数をユーザーが選択できるような機能を追加しましょう！ #5
JavaScriptでWebアプリケーション作成を作ってみるシリーズの動画です。今回はシリーズ第五弾で、ユーザーが、生成されるパスワードの文字数を選択できる機能を追加していきます。選択肢としてよく使…
-
18:15真ん中のスライド以外を小さくしたり、透明にして、Swiper（スワイパー）で独自性のあるインパクトあるスライダーを作る方法！
Swiperのような高機能なJavaScriptプラグインには、様々なオプションが用意されており、それを使うだけも多種多様なスライダーを作ることができます。しかし、サイトによってはオプションなどでは…
-
22:55【JavaScriptでパスワード生成ツールを作る！】 どんな文字列でパスワードを生成するか、ユーザーに選択してもらう為の機能を追加しましょう！ #4
JavaScriptでWebアプリケーション作成を作ってみるシリーズの動画です。今回はシリーズ第四弾で、ユーザーにパスワードの文字列の生成のされ方を選択してもらう機能を実装します。数値のみなのか、数…
-
10:45ナビゲーションとページネーションをスライダーの外に出す方法！人気のプラグインSwiper（スワイパー）での方法を紹介！
公式ドキュメントなどには紹介されていない、ナビゲーションやページネーションをスライダーの外側に配置する手順を紹介しています。なかなか調べても初心者にとっては難しいことが多い為、この動画で一緒に学んで…
-
37:10スライダーのページネーションやナビゲーション（左右の矢印）をカスタマイズしておしゃれにする方法！Swiper（スワイパー）を使いこなしましょう！
今回はSwiperで基本的に使えるページネーションとナビゲーションをカスタマイズする方法を紹介しています。こういったプラグインなどはバージョンが上がっていくと、カスタマイズ方法も変わっていく為注意が…
-
14:33スライダーの上に文字を固定で表示させる方法！Swiperで各スライダーの上と、スライダー全体の上に固定でコンテンツを置いておく方法を紹介します！
今回の動画では、Swiper（スワイパー）でスライダー上に固定のコンテンツを常に表示させておく方法を紹介しています。各スライダーと、スライダー全体の上に固定で表示することで、ユーザーへの訴求コンテン…
-
17:37奥行きのある、オシャレなスライダー実装！Swiper（スワイパー）で左右のスライドを回転させるオプションと考え方を紹介します！
今回はSwiperで奥行きのあるスライダーの実装方法を紹介しています。メイン表示しているスライダーの左右のスライダーを少し回転させることで立体感を出すことができ、まるでアルバムアートワークの選択UI…
-
33:47【JavaScriptでパスワード生成ツールを作る！】間違われやすい文字列を除外する欄を生成して、さらにユーザーが追記・編集できるようにしましょう！！ #3
JavaScriptでWebアプリケーション作成を作ってみるシリーズの動画です。今回はシリーズ第三弾で、ユーザーがよく見間違えやすいような文字列を除外する為の機能を実装します。配列と文字列を変換する…
-
20:09ワードプレスでカスタムフィールドの定義と表示方法・プラグイン（Advanced Custom Fields。ACF）について解説！
ワードプレス（Wordpress）には様々な機能が搭載されていますが、サイトによってはワードプレスの基本機能だけでは入力項目が不足したり物足りなくなってきます。そんな時使えるのが、このカスタムフィー…
-
16:26カテゴリーに紐づく投稿一覧ページをcategory.phpを使って、作る方法！
ワードプレス（Wordpress）では、投稿にカテゴリーを設定することができますが、この動画では各カテゴリーページに関連する投稿データを一覧で表示する方法を紹介しています。独自テーマで、catego…
-
13:52コーディングしたページを表示させる！独自テーマでカスタムテンプレートを設定・切り替える方法
ワードプレス（Wordpress）の独自テーマでカスタムテンプレートを設定・使用してみましょう！この動画では、管理画面上のエディター（グーテンベルグ）でサイドバーなどの有無を切り替える方法を紹介して…
-
39:12初心者向け！ワードプレスでよく使うPHPの構文を紹介！for文、while文、if文など
※動画内では「page-phptest.php」ファイルに書き込み、表示していますが、front-page.phpやheader.phpなど、表示できるファイルであればどこに記載しても問題ありません…
-
08:08独自テーマでトップページを作る際の考え方・作り方を解説！
Wordpress Codexのテンプレート階層のページはこちらhttps://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%B…
-
15:46Sassでeach文を使って、コーディング効率をあげる方法！
同じようなクラス名・セレクタや、CSSプロパティを書く時、Sassでは効率的に書く方法があります！JSのforEachと同じようにSassでeach文を書けるようになることで、修正時などにスムーズに…
-
15:41SASS / SCSS でz-indexを効率よく管理する方法
レイヤー（重なり）が複雑なサイトを作っていると、z-indexの管理に困ることがありませんか？この動画ではそういった悩みをSassの自作関数を使うことによって解消します。有名な管理方法ですので、今回…
-
13:30SASS / SCSS の自作関数（function）を作る方法とその仕組みについて学んでいきましょう！
＠functionや＠returnとは何か？引数（ひきすう）をどう使えば良いのか？まで説明しています！Sassにはmixin（ミックスイン）というものがあり、どちらかというとmixinの方が使われる…
-
29:04ハンバーガーメニュー・ドロワーメニューの作り方５！メニューコンテンツ自体のアニメーションについてパターンを紹介！（全５回）
ハンバーガーメニュー・ドロワーメニューの作り方動画シリーズの最終回です。（またご要望により続編を作る可能性もあります）今回は、前回のアイコン自体のアニメーションパターンの紹介に引き続き、メニューコン…
-
14:39ハンバーガーメニュー・ドロワーメニューの作り方４！アイコンの色々なアニメーションパターンと実装方法を紹介！（全５回）
リクエストにより、ハンバーガーメニュー・ドロワーメニュー動画の続編を配信しました。今回はハンバーガーメニュー・ドロワーメニューのアイコン自体のアニメーションのパターンや考え方・実装方法について解説し…
-
22:58CSS アニメーションプロパティの知っておくべき４つのプロパティ解説！再生回数や再生方向などをCSSだけで制御していきましょう！
複雑なCSSアニメーションを組む際に必要な以下のanimation propertyについて解説しています。- animation-iteration-count- animation-direct…
-
29:34CSSアニメーション！transtion-delayとanimation-delayについて解説！実際のコーディング例まで紹介
CSS animation（アニメーション）で、要素の動き方を少しずつずらさなければならないことがあります。delayプロパティを使わなくとも無理矢理できる方法もありますが、transition-d…
-
37:05HTMLのform（フォーム）におけるcheckbox（チェックボックス）、radioボタンのカスタマイズ方法解説！ form#7
checkboxやradioはブラウザごとにデザインが異なる上、変更することが基本的にはできません。しかし、labelタグと上手く組み合わせることによって、様々なカスタマイズが可能です。この動画では…
-
12:36formで必須項目・入力例などを実装できる、required, placeholder, valueについて解説！ form#6
formを作る際、必須項目や入力例などを予め表示しておくと、ユーザーがスムーズに入力をできるようになります。required, placeholder, valueはそれらを簡単に実装できるものです…
-
30:56CSSのアニメーション、イージング（easing）について解説！transitionとanimation
※お詫びと訂正。cubic-bezierの発音を「キュービックビザイアー」としていますが、正しくは「キュービックベジェ」です。今回は、Webデザインで非常に重要な要素である「CSSのアニメーション」…
-
01:12:11【実践！サイト模写コーディング！初心者向け】 解説しながら初心者向けにHTML/CSSを書いていきます！レスポンシブ（スマホ）対応まで！
サイトを１から作る練習を一緒にやっていきましょう！今回は第三弾です前回のサイトで模写したサイトの下層ページを作っていきます。実践的な為、分からないことがあれば下のHTML/CSS再生リストを見て復習…
-
11:22【JavaScriptで戦闘ゲーム制作 #5】 配列と連想配列を上手く使って、敵をランダムに表示する方法
第５回目の動画では、単一の敵しか出なかったところを複数の敵を定義して、ランダムに出すようにします。このシリーズの動画再生リストは以下です。活用してください！https://factory-progr…
-
22:52【JavaScriptで戦闘ゲーム制作 #4】 敵と味方のHPゲージを実装する！効果的なアニメーション処理（transition）まで
第４回目の動画では、HPの表示をテキストベースだったところをさらに視覚的なゲージを追加してみます。HPがどんな数値だとしてもJSで計算させ、上手く割合に応じたゲージにしていきましょう。このシリーズの…
-
16:34CSSセレクター・擬似クラス解説【上級編】！不要なクラスをつけず、もっと効率的なコーディングをしましょう！
HTML/CSSのコーディングで覚えておくと便利な「擬似クラス」について説明しています。この動画では・属性と値・属性の値が指定したもので始まる・属性の値が指定したもので終わる・empty・check…
-
11:19JavaScriptでランダムな数字を出す（乱数）方法と、配列と組み合わせて簡単なアプリ（おみくじ）を作る方法！
JS（JavaScript）で乱数（ランダムな数値）を出す方法と、それを活用した実例を紹介しています。配列と組み合わせて、簡単なおみくじアプリまで作るところまでを解説しています。JSの配列についての…
-
18:24モーダルウィンドウ・ダイアログウィンドウの作り方２（HTML、CSS、JavaScriptで作る）
HTML、CSS、JavaScriptだけで、プラグインなどを使わずに簡単にモーダルウインドウ（modal window）やダイアログボックス（dialog box）やポップアップウィンドウ(pop…
-
09:25HTML、CSS爆速コーディングツール！Emmet【応用編】
爆速コーディングができるEmmetの使い方動画【応用編】です。以前はZen codingという名前で親しまれていた、ツールです。これを覚えるとタイピング量が1/5くらいになり、爆速でコーディングでき…
-
12:43ハンバーガーメニュー・ドロワーメニューの作り方３（全５回）
※アニメーションのカクつきに関して。コメントでいただいていますが、動画内のコードで実装した場合、三本線からバツになる際にカクつく現象が起こる場合があります。その場合は、「transform-orig…