プレミアム会員のお知らせ
サブスクリプション会員にご登録いただくと、
以下の特典を受けることができます。
- チャットで
24時間いつでも質問し放題 - 全540動画（合計8559分）を視聴可能
- 全てのダウンロードコンテンツを利用可能
- サイト内のバナー広告が非表示
Factory Programming
初心者から上級者まで、Webフロントエンドのための動画学習サービス
Webフロントエンド技術全般
を学ぶことができる
動画学習サービスです
サービスの４つの特徴
-
全540動画・計8559分
豊富なコンテンツを配信
（随時追加予定） -
実践的な内容でスキルUP
基礎だけでなく、
よりレベルの高い内容も用意 -
コーディングだけでなく
JSの技術を使ったアプリ制作や
Webアプリなども
アニメーションの実装も動画で学べる -
様々な機能で
学習カレンダーや動画のお気に入り機能を使って
学習をサポート
モチベーションUPや
効率的な学習が可能
「プレミアム会員」の登録が必要です。
プレミアム会員の登録で制限なくご利用いただけます。
また、サイト内のバナー広告も非表示になります。
プレミアム会員の内容を確認する
動画講座一覧
初学者〜中級者向け
-
VSCodeシームレスな開発体験。Visual Studio Codeがあなたをサポート
動画数：10 -
HTML/CSS
ウェブの基礎、HTML/CSSでサイト作成の第一歩
動画数：168 -
レスポンシブ対応
どのデバイスでも同じ感動を。レスポンシブデザインで広がる可能性
動画数：13 -
コード一つでウェブが動く！
初心者でも始められるJavaScriptの世界動画数：121 -
爆速・効率化
手を止めない！爆速コーディングで作業時間を大幅短縮
動画数：19 -
CSSグリッド
新しいレイアウトの可能性を発見！
CSS Gridで作るモダンなウェブサイト動画数：15 -
CSSアニメーション
ページに動きを！CSSとJSで印象的なアニメーションを作成しましょう
動画数：78 -
Form
シンプルで機能的なフォームが、
ユーザーの離脱を防ぐ動画数：10 -
CSSをレベルアップ！Sassでスタイリングの 効率を改善しましょう
動画数：22 -
Splide
アクセシビリティに配慮したSwiperよりも軽量で高機能なスライダー。
動画数：11 -
GSAP3
次レベルのウェブアニメーションへ。GSAPで視覚体験を向上させましょう
動画数：53 -
自在に機能を追加、WordPressで思いのままのサイトを構築しましょう
動画数：46
中級者以上向け
-
Web
Animations APIブラウザ標準で実現する動きの世界！Web Animations APIで手軽にアニメーションを
動画数：8 -
脱
jQueryjQueryからの卒業 - 現代のJavaScriptで、より強力で効率的なコードを書く
動画数：16 -
開発環境構築
効率と品質を両立する、
現代の開発スタンダード動画数：11 -
変更も戻しも自由自在。
開発をもっと楽しく、もっと安全に動画数：1 -
React.jsJSライブラリシェア率１位
コンポーネント指向でWebアプリ開発動画数：22 -
Reactのその先へ。Next.jsで高速・柔軟なWebアプリ開発を体験しよう
動画数：15 -
TypeScriptTypeScriptで強力な
型安全なコーディングを体験しよう動画数：3 -
Vue.js覚えやすさとパワフルさ、
新時代の開発体験動画数：25 -
Three.js平面のウェブに、奥行きを。
リアルな3D体験をデザインしよう動画数：6 -
SEO対策
見つかりやすいウェブサイトへ、
SEO対策でランキングアップ動画数：12
最新の動画
-
09:34位置を直感的に分かりやすくするヘルパー！axesHelper・gridHelperとFPSなどを計測するstatsについて 後編
前編の動画はこちらhttps://factory-programming-mv.com/video/-iUbtsJlU10/
-
15:00位置を直感的に分かりやすくするヘルパー！axesHelper・gridHelperとFPSなどを計測するstatsについて 前編
Three.jsで開発をおこなっていると、カメラやオブジェクトの移動などでどのような動きになっているか分かりづらいことがあります。この動画では、axesHelper・gridHelperを使うことに…
-
17:00オブジェクトの影を生成し、別オブジェクトに反映させる方法
この動画では、DirectionalLightを使って一定方向からの光源を追加し、それによって影を別のオブジェクトに反映させる方法について説明しています。影を落とすだけなのに意外とThree.jsで…
-
22:24Three.jsで床を生成し、OrbitControlsでカメラを自由に動かす方法。
今回は、PlaneGeometryを使って、床を追加することで奥行きを演出し、さらにOrbitControlsを使ってカメラを自由に動かせるようにしてみましょう。画面をリサイズした際のレンダリングの…
-
36:30Three js入門！まずは初心者向けに読み込みと簡単な表示を紹介します。
今回はThree.jsを使って立体的な箱を回転させた上で表示させるところまでをやってみましょう！動画内で紹介していた、Three.jsの読み込み先URLはこちらhttps://unpkg.com/t…
-
15:34Web制作の流れ。ヒアリングからワイヤー、デザイン、コーディング、テスト、公開までの流れを把握しましょう！
フリーランスや副業でやる方が初めて案件を受注する時、Web制作の流れがよくわからないという話を聞きます。この動画では、以下のような全体的な流れを説明しています。・ヒアリング、要件定義・サイト構成、ワ…
-
20:26Webフロントエンジニアが自宅で効率的かつ快適に作業するために必要なもの
フリーランス・副業・リモートワークを始めた方が、自宅などで効率的に作業するために必要なものなどを紹介しています！ディスプレイと周辺機器（マウス、キーボード、モニターアーム、Webカメラ・マイク・イヤ…
-
18:54TypeScript（タイプスクリプト）入門！初心者向けに基本的な使い方や考え方について解説。後編
以前の動画で、TypeScriptは何か？やメリットをお伝えしました。https://factory-programming-mv.com/video/ZFtQf6DLa6w/今回の動画では、基本的…
-
19:34TypeScript（タイプスクリプト）入門！初心者向けに基本的な使い方や考え方について解説。前編
前回の動画で、TypeScriptは何か？やメリットをお伝えしました。https://factory-programming-mv.com/video/ZFtQf6DLa6w/今回の動画では、基本的…
よく見られている動画
-
11:02Visual Studio Codeのデザイン（配色テーマ）変更や・ファイルアイコンのテーマ（アイコンのデザイン）変更の方法について解説！
VSCodeの見た目を変更する方法を紹介しています！デフォルトでは黒ベースのダークな感じですが、白ベースのライトな感じに変更したりダークテーマにおいても様々なものがあります。さらにHTMLやCSSな…
-
12:42Visual Studio Code！おすすめの初期設定解説！コーディングの環境を整えていきましょう！
※撮影時点での設定方法と現在の方法には若干の違いがあります。10:40あたりで触れているEmmetのVariablesの設定について、現在の手順は以下の通りです。1. 検索欄で「emmet vari…
-
04:51Visual Studio Code（ビジュアルスタジオコード）のダウンロードからインストール、日本語化までの手順
Visual Studio Code（以下、VS Code）は、Microsoft（マイクロソフト）が開発している無料のエディタです。これはSublime Text（サブライムテキスト）、Atom（…
-
15:28ハンバーガーメニュー・ドロワーメニューの作り方１（全５回）
第２回目https://factory-programming-mv.com/video/qxr9bmn8SUI/第３回目https://factory-programming-mv.com/vid…
-
36:43初心者向け。Git（ギット）について解説！基本的な考え方、用語、流れについても
開発をしていく上ではほぼ必須のgitについて説明しています。また、Github・GitLab・Bitbucket・CloudForgeなどのホスティングサービスについてもお話ししています。動画の中で…
Webアプリを作って、JavaScriptのスキルアップ！
それぞれの言語で出来ることをピックアップ
HTML / CSS で出来る、様々なこと
-
29:06テキストが流れるような、リッチなローディングアニメーションを実装してみましょう！
ローディングアニメーションのパターンは色々とありますが、今回は文字を使ったいくつかのパターンを実装してみましょう。アイディア次第で色々な形にできますので、この動画で基本的な考え方を学びましょう。JS…
-
14:01CSSで扇形にグラデーション！（conic-gradient） 時計回りに色を段々と変化させる方法を解説します！
CSSでは様々なグラデーションをかけることができますが、今回は扇形にグラデーションをかける方法を学びます。・色を複数指定する方法・中心位置を変更する方法・グラデーション開始位置を変更する方法などにつ…
-
31:10CSSで、記事（リンクなど）にマウスホバー（hover）したら画像を拡大・大きくするアニメーションの実装方法！
メディアサイトなどでよくある、記事にマウスを乗せた時に画像を大きくする処理について紹介しています。よくJavaScriptを使わないとできないのではないか？と質問を受けますが、HTML / CSSの…
-
08:57CSSだけでテキストにマーカーを引いたような線を実装する方法！
画像などで文字にマーカーを引くことはできますが、今回はlinear-gradientの技術を応用して、文字にCSSのみでマーカーを引いてみましょう！
-
11:19CSSだけで連番を表示させることができる、「counter」紹介！JavaScriptを使わなくても、連番で表示できるようにしてみましょう！
1, 2, 3... などの数字を自動的にリストの最初に表示させるには、JavaScriptの力が必要と思われている方が多いと思います。しかし今回紹介するCSSを使えば、簡単にその処理をすることがで…
-
11:53簡単に値をスライドで変更できる inputタグの range（レンジ）を紹介！
今回の動画では、Webページ内でスライダー（スライドバー）として機能するHTMLのinputタグのtype属性の一つ、「range（レンジ）」について説明しています。このtypeを使うと、数値の入力…
-
21:20CSSで背景に動画を設定し、綺麗にレイアウトして自動再生させる方法！
動画内で説明していた、videoタグの動画はこちらhttps://factory-programming-mv.com/video/2TAc7dljEUg/動画内で説明していた、object-fit…
-
11:03CSSだけで、子要素が親要素をはみ出す方法！右側だけや左側だけはみ出す方法も！
Web制作をしていると、どうしても途中ではみ出せたいことがあります。この動画ではCSSだけで特殊な計算をすることで、それを実現する方法を紹介しています！
-
52:24文字を１文字ずつアニメーションさせる方法と、そのバリエーション・考え方を紹介！かっこいいCSSアニメーションを実装できるようになりましょう！
transformについての動画はこちらhttps://factory-programming-mv.com/video/今回は、文字を1文字ずつアニメーションで動かす方法を紹介します。最近はアニメ…
-
16:34CSSだけでスライダーを作る方法！scroll-snapを使って、縦にも横にもスライドできるスライダーを作っていきましょう！
この動画では、以下のCSSプロパティを使った、スライダーの作成方法をお伝えしていきます。・scroll-snap-type・scroll-snap-alignスクロール位置の制御を可能にするプロパテ…
- もっとみる
JavaScript で出来る、様々なこと
-
16:55無限にアニメーションし続ける円。重なった時に反対色になる実装と組み合わせて、表現の幅を広げましょう！前編
※後編の動画ページに、完成版のコードをダウンロードすることができるリンクを用意しています！GSAPを使ったアニメーション作品のシリーズです。最初、テキストを１文字ずつアニメーションさせながら表示させ…
-
19:18ドロップダウンメニュー・アコーディオンメニューの作り方！HTML / CSS / JavaScriptでシンプルに作る方法
この動画では、HTML、CSS、JavaScriptを用いて、ドロップダウンメニューの作成方法について解説しています。親メニューと子供のメニュー(サブメニュー)を含むドロップダウンメニューのHTML…
-
57:24ページ内スムーススクロールと、モーダルメニューをクリックした後の自動メニュー閉じについて！
今回はJavaScriptのwindow.scrollToメソッドを使って、シンプルなページ内スムーススクロールを実装する方法を紹介しています。単にヘッダーのメニューにページ内リンクを設定する方法と…
-
09:01GSAPを使って、途中のコンテンツを横スクロールにする方法！後編
前編の動画はこちらhttps://factory-programming-mv.com/video/-6d0mTnhcLE/この動画では、GSAP（GreenSock Animation Platf…
ダウンロード有 -
32:51JavaScriptで日付を取得・表示などをするための方法とある日付までのカウントダウンをする方法
JavaScript（ジャバスクリプト）のDateオブジェクトを使って、今日の日時や曜日などを取得・表示してみましょう！基本が分かったら、明日の今の日時を表示したり、ある日付までのカウントダウン日を…
-
47:37JavaScriptでプラグインを使わずに（画像を切り替える）スライダーを作ってみましょう！
簡単に画像を切り替えるくらいのスライダーは、プラグインの使い方を学習するよりも自作したほうが早く作れることがあります。この動画ではHTML, CSS, JavaScriptを使って１からギャラリーの…
-
24:12自動で円形にメニューを並べて、順番にアニメーションさせる方法！ 全２回（第１回目） ※後編は動画の概要欄にあります
※後編の動画ページに、完成版のコードをダウンロードすることができるリンクを用意しています！この動画ではJavaScriptのアニメーションライブラリ「GSAP」を使って、開閉するメニューを実装します…
-
45:16スクロールアニメーション！CSSとJSでカーテンが開くように要素を表示！
モダンなサイトで見かける、カーテンが開いていくような要素の表示アニメーションについて解説しています。CSSとJavaScriptをうまく組み合わせることによって実現できますが、少々難しい部分もあるの…
-
52:24
文字を１文字ずつアニメーションさせる方法と、そのバリエーション・考え方を紹介！かっこいいCSSアニメーションを実装できるようになりましょう！
transformについての動画はこちらhttps://factory-programming-mv.com/video/今回は、文字を1文字ずつアニメーションで動かす方法を紹介します。最近はアニメ…
-
11:15テキストアニメーション実装！GSAPで一文字ずつ色や位置をランダムに配置して、その後アニメーションしながらフェードアウトする！ 全２回（第１回目） ※後編は動画の概要欄にあります
※後編の動画ページに、完成版のコードをダウンロードすることができるリンクを用意しています！この動画では、一文字ずつ色や位置や角度をランダムに設定したものを段々と整列させ、その後文字列の両端から非表示…
- もっとみる
記事で解説するプログラミング技術
-
Web制作の流れ。ヒアリングからワイヤー、デザイン、コーディング、テスト、公開までの流れを把握しましょう！
Webサイト制作は、ただデザインして公開するだけではありません。目的を明確にし、戦略的に進めることで「成果を出せるサイト」を作ることができます。ここでは、ヒアリングから公開までの一連の流れをわかりや…
-
Webフロントエンジニアが自宅で効率的かつ快適に作業するために必要なもの
副業やフリーランス、そしてリモートワークが一般的になった今、「自宅＝職場」という働き方が当たり前になりつつあります。しかし、在宅で長時間作業を続けるには、ただパソコンがあるだけでは十分ではありません…
-
Next.jsとは？React.jsとの違いは？特徴・メリット
WebアプリやWebサイトを作る技術の中で、よく耳にする「React（リアクト）」と「Next.js（ネクストジェイエス）」。初心者の方からすると、似たような名前で「何が違うの？」と感じる方も多いと…
-
npm, yarn, pnpm, bunなどのパッケージマネージャーについて
フロントエンド開発でパッケージ管理に利用される npm（エヌピーエム）、yarn（ヤーン）、pnpm（ピーエヌピーエム）、bun（バン） について、それぞれ解説します。パッケージとは？パッケージとは…
-
nvmとは？Node.jsのバージョンを複数インストールして管理
nvm（Node Version Manager）とは？NVMは、複数のNode.jsバージョンを管理するためのツールです。異なるプロジェクトで異なるNode.jsバージョンを使用する必要がある場合…
-
React.jsとは？
React（リアクト）は、Facebook（現Meta）によって開発されたJavaScriptのライブラリ で、主にユーザーインターフェース（UI。要はユーザーが触れるボタンやメニューなどのデザイン…
-
Grunt・Gulp・Webpack・Vite・Turbopackとは？タスクランナー？ビルドツール？バンドラー？
フロントエンド開発における環境構築ツール近年、フロントエンド開発は驚くべきスピードで進化を遂げています。それに伴い、開発者が使うツールもどんどん進化し、より便利で効率的なものが次々と登場しています。…
-
GSAP不要！？ Web Animation API解説！
Web Animation API は、モダンなウェブブラウザで動作する、ネイティブの JavaScript API です。この API は、ウェブページ上の要素にアニメーション効果を簡単に適用でき…
-
JavaScriptを最速で学ぶには？初心者向けロードマップ
よくある失敗基礎的な知識を最初に全部入れようとしてしまう。JavaScript で出来ることがかなり多くなっている為、全て学ぶのにはかなりの時間がかかります。逆に最初から高度な実践的なことをしようと…
-
jQueryはなぜ不要になったのか。
そもそもjQueryとは？jQueryは、JavaScriptをより効率的に、より簡単に書くためのライブラリです。これにより、より少ないコードでより複雑な機能を実装できます。jQueryはかつてウェ…
-
API（エーピーアイ）とは？インターフェース・リクエスト・レスポンスについても解説！
何の略？Application Programming Interface（アプリケーション・プログラミング・インターフェース）の略。インターフェース？インターフェース: 2つの異なるものをつなぐシ…
-
WordPress（ワードプレス）とは？
WordPress（ワードプレス）の特徴PHP（という言語）で開発されている、オープンソース（コードが公開されている）のサイト制作ツール。プログラミングがわからない人でもテンプレートや豊富な機能を使…
Webフロントエンド開発支援ツール
-
CSS グラデーションジェネレーター
背景にグラデーションをかけるための、ジェネレーターです。
基本的な（線形）グラデーションのlinear-gradient、radial-gradient（円形）、conic-gradient（扇形）などに対応し、直感的にグラデーションを生成することができます。
また、70種類以上のサンプルから選択しカスタマイズできます！ -
ボタンジェネレーター
直感的におしゃれなボタンを作ることができる、高機能自動ボタン生成ツールです。
背景色・背景グラデーション・ボタンの影（box-shadow）・文字の影（text-shadow）・サイズ（横幅、縦幅）・枠線（border）・角丸（border-radius）・transition（アニメーション）などに対応しています。
擬似要素（before, after）やマウスホバー（hover）、マウスホバー後の擬似要素にも対応しているので、様々なデザインのボタンを生成することが可能です
サンプルも20種類以上を用意しています！ -
ボックスシャドウ（box-shadow） ジェネレーター
画像や要素などに影をつけることができる、box-shadowのツールです。
豊富なサンプルから選択し、カスタマイズすることができます。
内側の影（inset）や、複数の影の生成にも対応。beforeやafterなどの擬似要素にも対応しています。 -
テキストシャドウ（text-shadow） ジェネレーター
文字に様々な影をつけることができる、text-shadowの自動生成ツールです。
豊富なサンプルから選択し、カスタマイズすることができます。
テキストのリアルタイム変更や、複数の影にも対応し色々なデザインを試すことができます。 -
枠線・境界線（border） ジェネレーター
枠線をつけるためのCSS自動生成ツールです。
上下左右に個別に指定が出来る他、点線（dotted）・破線（dashed）・二重線（double）・立体的な線（groove / ridge / isnet / outset）なども生成することができます。プレビューのサイズ（横幅・縦幅）や角丸（border-radius）の指定も可能です！ -
三角形 ジェネレーター
HTMLとCSSのみで三角形（triangle）をつくるためのジェネレーターです。
CSSのborderを利用することにより矢印を自動生成します。上下左右以外にも360度全ての方向が指定可能！
正三角形を自動計算するための機能を搭載している他、色も自由に変更が可能です。吹き出しやフローチャートなどでご活用ください。 -
CSS Filter ジェネレーター
画像や要素にエフェクトを簡単に実装できる、CSS filterのツールです。
ぼかし（blur）・明るさ（brightness）・コントラスト（contrast）・グレースケール(grayscale)・色相回転（hue-rotate）・反転（invert）・彩度（saturate）・セピア（sepia）・影（drop-shadow）などを複数指定することができます。 -
CSS Backdrop-filter ジェネレーター
指定した要素の背面にエフェクトを実装できる、backdrop-filterのツールです。
ぼかし（blur）・明るさ（brightness）・コントラスト（contrast）・グレースケール(grayscale)・色相回転（hue-rotate）・反転（invert）・彩度（saturate）・セピア（sepia）・影（drop-shadow）などを複数指定することができます。 -
CSS Transform（変形） 2D / 3D ジェネレーター
直感的な操作でtrasnsform（変形）の実行結果をシミュレートする為のツールです。
translate（移動）, rotate（回転）, scale（拡大・縮小）, skew（歪み）を2D/3D方向に直感的に操作可能！transform-origin（回転軸）, perspective（パース・視点）, perspective-origin（消失点）にも対応しています。
また、対象要素や元となるX,Y,Z軸を視覚的に表示可能です -
CSS Transition（アニメーション）ジェネレーター
簡単なアニメーションの為のtransition（トランジション）のジェネレーターです。
イージング（easing）や時間（duration）・遅延（delay）などにも対応！サンプルから選択して、編集可能です。アニメーション前後のスタイルを細かく設定できるので、transitionのシミュレーションとしてお使いいただけます。
また、アニメーションの逆再生や再生速度も変更可能。途中で停止したり任意の経過時間における要素の状態をシミュレートすることも出来ます。