プレミアム会員のお知らせ
サブスクリプション会員にご登録いただくと、
以下の特典を受けることができます。
- チャットで
24時間いつでも質問し放題 - 全468動画（合計7440分）を視聴可能
- 全てのダウンロードコンテンツを利用可能
- サイト内のバナー広告が非表示
Factory Programming
初心者から上級者まで、Webフロントエンドのための動画学習サービス
Webフロントエンド技術全般
を学ぶことができる
動画学習サービスです
サービスの４つの特徴
-
全468動画・計7440分
豊富なコンテンツを配信
（随時追加予定） -
実践的な内容でスキルUP
基礎だけでなく、
よりレベルの高い内容も用意 -
コーディングだけでなく
JSの技術を使ったアプリ制作や
Webアプリなども
アニメーションの実装も動画で学べる -
様々な機能で
学習カレンダーや動画のお気に入り機能を使って
学習をサポート
モチベーションUPや
効率的な学習が可能
「プレミアム会員」の登録が必要です。
プレミアム会員の登録で制限なくご利用いただけます。
また、サイト内のバナー広告も非表示になります。
プレミアム会員の内容を確認する
人気の動画講座一覧
-
HTML/CSS
ウェブの基礎、HTML/CSSでサイト作成の第一歩
動画数：164 -
コード一つでウェブが動く！初心者でも始められるJavaScriptの世界
動画数：117 -
GSAP3
次レベルのウェブアニメーションへ。GSAPで視覚体験を向上させましょう
動画数：52 -
自在に機能を追加、WordPressで思いのままのサイトを構築しましょう
動画数：46 -
CSSグリッド
新しいレイアウトの可能性を発見！CSS Gridで作るモダンなウェブサイト
動画数：15 -
CSSアニメーション
ページに動きを！CSSとJSで印象的なアニメーションを作成しましょう
動画数：75 -
CSSをレベルアップ！Sassでスタイリングの 効率を改善しましょう
動画数：22 -
Web
Animations APIブラウザ標準で実現する動きの世界！Web Animations APIで手軽にアニメーションを
動画数：8 -
爆速・効率化
手を止めない！爆速コーディングで作業時間を大幅短縮
動画数：19 -
Swiper
スライドショーを一段上に。Swiperで魅力的なスライド表現
動画数：13 -
Vue.js覚えやすさとパワフルさ、
新時代の開発体験動画数：25 -
VSCodeシームレスな開発体験。Visual Studio Codeがあなたをサポート
動画数：10 -
脱
jQueryjQueryからの卒業 - 現代のJavaScriptで、より強力で効率的なコードを書く
動画数：16 -
SEO対策
見つかりやすいウェブサイトへ、SEO対策でランキングアップ
動画数：12 -
Form
シンプルで機能的なフォームが、ユーザーの離脱を防ぐ
動画数：9 -
レスポンシブ対応
どのデバイスでも同じ感動を。レスポンシブデザインで広がる可能性
動画数：13
最新の動画
-
14:21数値の桁数を自動で合わせるpadStart・padEndメソッドを紹介！
連番の数字や、日付などの特定の桁数を調整するには、今まではsliceメソッドなどを使ってきましたが、新しく出てきた、padStart・padEndを使うことによって自動で調整できるようになります！ゼ…
-
08:59配列の何番目に対象の文字列があるか確認する、indexOf, lastIndexOfメソッドについて紹介！
この動画では、JavaScript (ジャバスクリプト) で頻繁に使用される indexOf と lastIndexOf メソッドについて説明しています。これらのメソッドは、特定の文字列が配列や他の…
-
11:53簡単に値をスライドで変更できる inputタグの range（レンジ）を紹介！
今回の動画では、Webページ内でスライダー（スライドバー）として機能するHTMLのinputタグのtype属性の一つ、「range（レンジ）」について説明しています。このtypeを使うと、数値の入力…
-
15:21移動後のページにデータを渡せる、URL「パラメーター」について解説！前編
この動画では、検索システムなどでよく使われる、WebサイトのURLに含まれる「パラメーター（parameter）」について説明しています。そもそもパラメーターとは何か？どのような構造になっているのか…
-
14:53移動後のページにデータを渡せる、URL「パラメーター」について解説！後編
前編の動画はこちらhttps://factory-programming-mv.com/video/p9lwT_0oHo4/この動画では、検索システムなどでよく使われる、WebサイトのURLに含まれ…
-
14:16Location API（ロケーション） とそれを使ってページごとにJavaScriptの処理を分ける方法！WordPressでページごとに処理を分ける方法も
動画内で説明していたLocation APIのドキュメントはこちらhttps://developer.mozilla.org/ja/docs/Web/API/Location動画内で説明していたワー…
よく見られている動画
-
13:38JavaScriptのアニメーションライブラリ「GSAP」を紹介！まずは機能とできることを見ていきます GSAP #1
様々なサイトでよく使われている、GSAP（GreenSock Animation Platform。読み方はジーサップ）について紹介します！CSSやSASSだけでは難しいアニメーションの制御ができる…
-
52:47スクロールしたら要素をフワっとアニメーションして、表示させる方法を紹介！
動画内で紹介していた私のプロフィールサイトURLはこちらです。https://kazuma-takeda.com/Webページがスクロールされた際に、特定の要素がフワっと表示されるアニメーションの実…
ダウンロード有 -
54:48【実践！サイト模写コーディング！超初心者向け】解説しながらHTML/CSSを書いていきます！レスポンシブ（スマホ）対応まで！
模写の注意点や準備はこちらhttps://factory-programming-mv.com/video/一緒にサイト制作の練習をしましょう！今回、私が数年前に作成した非常にシンプルなサイトを基に…
-
47:47【サイト模写コーディング】初心者向け！メリット・注意点・流れなどを解説！実際の模写をやるところまで。
今回はWebサイトの模写についてお話しています。サイト制作の力が一番つく模写コーディングをやってみましょう！やってみることでのメリット・注意点・流れなどを解説していますので、この動画を見れば、模写を…
-
14:26コーディングに必須！ブロック・インライン・インラインブロック解説！
HTMLやCSSのコーディングで必須の考え方・ブロック（block）・インライン（inline）・インラインブロック（inline-block）について解説しています。display: flexやg…
Webアプリを作って、JavaScriptのスキルアップ！
それぞれの言語で出来ることをピックアップ
HTML / CSS で出来る、様々なこと
-
45:16スクロールアニメーション！CSSとJSでカーテンが開くように要素を表示！
モダンなサイトで見かける、カーテンが開いていくような要素の表示アニメーションについて解説しています。CSSとJavaScriptをうまく組み合わせることによって実現できますが、少々難しい部分もあるの…
-
15:01CSSで3Dの表現をするには？transform-styleとperspectiveについて紹介！
近年、CSSやブラウザの対応によってWebGLを使わなくてもCSSのみで3Dの表現ができるようになりました。ただし、transformで3Dの指定を施したとしても、立体的にはなりません。この動画では…
-
11:43CSSだけで、文字列の省略を簡単にする方法！
JavaScriptなどでも実装できますが、CSSのみでも簡単に文字を途中で省略する方法はあります。今回はtext-ellipsisというプロパティを使って、記事の一覧に表示されている文字列を省略し…
-
17:55CSSで円形グラデーション！（radial-gradient） 中心から外側に向かって、グラデーションさせる方法を学んでいきます！
CSSでは様々なグラデーションをかけることができますが、今回は円形にグラデーションをかける方法を学びます。・色を複数指定する方法・中心位置を変更する方法・グラデーション開始位置を変更する方法などにつ…
-
11:03CSSだけで、子要素が親要素をはみ出す方法！右側だけや左側だけはみ出す方法も！
Web制作をしていると、どうしても途中ではみ出せたいことがあります。この動画ではCSSだけで特殊な計算をすることで、それを実現する方法を紹介しています！
-
06:02CSS Grid（グリッド）解説！CSS Gridとはなんなのか？どういう場面で使われるのか？などを紹介します！ #1
今回からいくつかの動画でCSS Gridのシリーズを配信していきます。第１回目のこちらの動画では、CSS Grid（グリッド）とはなんなのか？どういった部分で使われるのか？を紹介していきます。要素を…
-
22:20CSS Filterプロパティについて解説！要素や画像にエフェクトをつけて、さまざまな表現をしてみましょう！
今回は、CSSのみで色々なエフェクトをかけることができる、CSSのfilter（フィルター）プロパティについて説明しています。このプロパティは・blur（ぼかし）・brightness（明るさ）・c…
-
23:03サイトに雪を降らせるアニメーションをGSAPを使って実装してみましょう！ 全２回（第１回目）
※後編の動画ページに、完成版のコードをダウンロードすることができるリンクを用意しています！今回は、GSAP（アニメーションライブラリ）を使って、雪を降らせるアニメーションを作ってみます。画像を使わず…
-
21:20CSSで背景に動画を設定し、綺麗にレイアウトして自動再生させる方法！
動画内で説明していた、videoタグの動画はこちらhttps://factory-programming-mv.com/video/2TAc7dljEUg/動画内で説明していた、object-fit…
-
08:57CSSだけでテキストにマーカーを引いたような線を実装する方法！
画像などで文字にマーカーを引くことはできますが、今回はlinear-gradientの技術を応用して、文字にCSSのみでマーカーを引いてみましょう！
- もっとみる
JavaScript で出来る、様々なこと
-
26:13【JavaScriptで戦闘ゲーム制作 #1】 まずは簡単なUIを整えて、ゲーム作りの土台作りから作っていきましょう！
※内容が若干古いので、意識できる方は以下のように書いてみてください。・アロー関数を使えるところはアロー関数で書きましょう。・オブジェクトからデータを取得するときは、ドットを使って書いてください。//…
-
24:30データベースなしで、データが保存できる！Webストレージ（セッションストレージ・ローカルストレージ）について解説！
今までもCookie（クッキー）という技術で、Webにデータを保存することはできましたが、新しく出てきたWebストレージを使えば、さらに大きなデータを長期間保存可能となりました。この動画では・Ses…
-
21:04JSではなくて、HTML側にデータを定義できる！カスタムデータ属性（data-◯◯）の活用方法と実践的な活用法について
サイトを制作していると、JavaScriptではなくHTML側にデータを定義した方が管理が楽な場合があります。そういった時に使えるのが、このカスタム属性です！この動画では実際の設定方法や活用方法など…
-
33:34【JavaScriptでパスワード生成ツールを作る！】パスワードジェネレーターを１から作ってみましょう！ まずはファイルの作成や簡単なパスワード生成から #1
JavaScriptでWebアプリケーション作成を作ってみるシリーズの動画です。ライブコーディングをおこないながら、実際にアプリケーションを作っていきます。実践的なツールを作ることでJavaScri…
-
18:02GSAPで、丸とテキストを効果的にアニメーションさせて、簡単なモーショングラフィックスを作ってみましょう！前編
※後編の動画ページに、完成版のコードをダウンロードすることができるリンクを用意しています！今回は全２回の動画で、GSAPを用いたアニメーションの作例を紹介しています。縁取りやストライプの円をランダム…
-
14:02クリックしたら、星が散りばめられる「クリックエフェクト」をGSAPで実装してみましょう！全２回（第１回目） ※後編は動画の概要欄にあります
※後編の動画ページに、完成版のコードをダウンロードすることができるリンクを用意しています！この動画では、クリックした座標をJSで取得し、そこを中心にアイコンを外側に広がるように表示させてみます。動画…
-
11:19JavaScriptでランダムな数字を出す（乱数）方法と、配列と組み合わせて簡単なアプリ（おみくじ）を作る方法！
JS（JavaScript）で乱数（ランダムな数値）を出す方法と、それを活用した実例を紹介しています。配列と組み合わせて、簡単なおみくじアプリまで作るところまでを解説しています。JSの配列についての…
-
52:24文字を１文字ずつアニメーションさせる方法と、そのバリエーション・考え方を紹介！かっこいいCSSアニメーションを実装できるようになりましょう！
transformについての動画はこちらhttps://factory-programming-mv.com/video/今回は、文字を1文字ずつアニメーションで動かす方法を紹介します。最近はアニメ…
-
57:24ページ内スムーススクロールと、モーダルメニューをクリックした後の自動メニュー閉じについて！
今回はJavaScriptのwindow.scrollToメソッドを使って、シンプルなページ内スムーススクロールを実装する方法を紹介しています。単にヘッダーのメニューにページ内リンクを設定する方法と…
-
22:09GSAP ScrollTrigger（スクロールトリガー）実践編！様々な要素を同時に動かして、より印象的なアニメーションを作る。第１回目（全２回）
※後編の動画ページに、完成版のコードをダウンロードすることができるリンクを用意しています！GSAPやScrollTriggerの動画をこれまで配信していますが、今回は多くの機能を取り入れて、より実践…
- もっとみる
記事で解説するプログラミング技術
-
GSAP不要！？ Web Animation API解説！
-
JavaScriptを最速で学ぶには？初心者向けロードマップ
-
jQueryはなぜ不要になったのか。
-
API（エーピーアイ）とは？インターフェース・リクエスト・レスポンスについても解説！
-
簡単にスライダーが作成できるJSライブラリ、Swiperについて
-
WordPress（ワードプレス）とは？
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のシミュレーションとしてお使いいただけます。
また、アニメーションの逆再生や再生速度も変更可能。途中で停止したり任意の経過時間における要素の状態をシミュレートすることも出来ます。