プレミアム会員のお知らせ
サブスクリプション会員にご登録いただくと、
以下の特典を受けることができます。
- チャットで
24時間いつでも質問し放題 - 全486動画（合計7651分）を視聴可能
- 全てのダウンロードコンテンツを利用可能
- サイト内のバナー広告が非表示
Factory Programming
初心者から上級者まで、Webフロントエンドのための動画学習サービス
Webフロントエンド技術全般
を学ぶことができる
動画学習サービスです
サービスの４つの特徴
-
全486動画・計7651分
豊富なコンテンツを配信
（随時追加予定） -
実践的な内容でスキルUP
基礎だけでなく、
よりレベルの高い内容も用意 -
コーディングだけでなく
JSの技術を使ったアプリ制作や
Webアプリなども
アニメーションの実装も動画で学べる -
様々な機能で
学習カレンダーや動画のお気に入り機能を使って
学習をサポート
モチベーションUPや
効率的な学習が可能
「プレミアム会員」の登録が必要です。
プレミアム会員の登録で制限なくご利用いただけます。
また、サイト内のバナー広告も非表示になります。
プレミアム会員の内容を確認する
人気の動画講座一覧
-
HTML/CSS
ウェブの基礎、HTML/CSSでサイト作成の第一歩
動画数：165 -
コード一つでウェブが動く！初心者でも始められる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 -
Splide
アクセシビリティに配慮したSwiperよりも軽量で高機能なスライダー。
動画数：9 -
Swiper
スライドショーを一段上に。Swiperで魅力的なスライド表現
動画数：13 -
Vue.js覚えやすさとパワフルさ、
新時代の開発体験動画数：25 -
VSCodeシームレスな開発体験。Visual Studio Codeがあなたをサポート
動画数：10 -
脱
jQueryjQueryからの卒業 - 現代のJavaScriptで、より強力で効率的なコードを書く
動画数：16 -
SEO対策
見つかりやすいウェブサイトへ、SEO対策でランキングアップ
動画数：12 -
Form
シンプルで機能的なフォームが、ユーザーの離脱を防ぐ
動画数：10 -
レスポンシブ対応
どのデバイスでも同じ感動を。レスポンシブデザインで広がる可能性
動画数：13
最新の動画
-
10:36Reactを使って、メニューを表示・非表示する方法 後編
Reactでよく使う、useStateの挙動をさらに詳しく知るために、メニューの切り替え処理をやってみましょう。単純にメニューを開閉するだけではなく、メニューを開くボタンと閉じるボタン、そしてメニュ…
-
11:34Reactを使って、メニューを表示・非表示する方法 前編
Reactでよく使う、useStateの挙動をさらに詳しく知るために、メニューの切り替え処理をやってみましょう。単純にメニューを開閉するだけではなく、メニューを開くボタンと閉じるボタン、そしてメニュ…
-
14:34useStateでクラス名やスタイルの切り替えをする方法
サイト制作やWebアプリの制作で必ずといっていいほどやる、基本的なクラス名の変更やスタイルの変更処理をuseStateを使って、便利に実装していきましょう！
-
14:14Reactで最もよく使うuseStateの基本的な考え方と使い方を解説！
Reactでリアクティブな変数を定義するための、useStateについて解説しています。基本的な動きを学ぶために、ボタンをクリックした回数をuseStateで管理し、表示してみましょう！
-
13:15Reactで、基本的なイベント処理を書く方法。clickイベントやinputイベントについて
初心者が最初につまづく、基本的なイベント処理の書き方を解説しています。クリックしたら、メニューを開くなどイベント処理はReactにおいて頻出しますので、この動画で基礎的な書き方を覚えていきましょう！
-
17:00React.js入門！はじめの一歩。初心者向けにまずは基本的な読み込みと設定から！
React.jsの入門・初心者向けの動画です。以下はReact.jsを使う上で必要なURLです。「開発用」と「本番用」のscriptタグを書くときは、「crossorigin」属性をscriptタグ…
ダウンロード有
よく見られている動画
-
18:24Sassのファイル分割@useと@forwardの使い方！前編
これまでファイルを分割し他のファイルに読み込ませるには、@importという記述でしたが、廃止になりました。新しく使えるようになったのが、この@useと@forwardです。しっかりと覚えて、ファイ…
-
04:18ワードプレスでアーカイブページ・投稿一覧ページを作る方法解説！
archive.php で専用の投稿一覧ページの作り方を紹介しています。functions.phpに記載すべきことや、やらなくてはいけないことも解説しています。
-
14:06GSAPで、簡単に複数の要素をズラしてアニメーションさせる方法を学びましょう！全２回（第１回目） GSAP #5
今回はGSAPのstaggerというものを使って、delayを少しずつズラしていく処理を簡単に書く方法を説明していきます。第１回目のこちらの動画では、まず基本的なHTMLとCSSを組んでGSAPのt…
-
25:50独自テーマで、投稿と固定ページの詳細ページを表示する方法！
独自テーマを作る際の投稿ページや固定ページのコンテンツを表示させる方法を見ていきます。必須となる関数や書き方などがありますので、この動画で学んでいきましょう！ちなみにこの動画では基本的な部分しか紹介…
-
06:56ワードプレス独自テーマ作成！ローカル環境（PC上にサーバーを作る）の設定を「Local by Flywheel」でやってみましょう！
※ 03:40 あたりの環境設定ですが、Local by flywheelの仕様が変わりサイトを追加する際「Custom」を選択すると言語などの設定をしなければならなくなりました。Customを推奨…
Webアプリを作って、JavaScriptのスキルアップ！
それぞれの言語で出来ることをピックアップ
HTML / CSS で出来る、様々なこと
-
22:20CSS Filterプロパティについて解説！要素や画像にエフェクトをつけて、さまざまな表現をしてみましょう！
今回は、CSSのみで色々なエフェクトをかけることができる、CSSのfilter（フィルター）プロパティについて説明しています。このプロパティは・blur（ぼかし）・brightness（明るさ）・c…
-
17:24とても便利なposition stickyについて解説！特定の条件でスクロール時に要素を固定しましょう！
比較的新しい、CSSのpositionプロパティ「stikcy」について学びましょう！この値の特徴を学ぶことで、absoluteとfixedを組み合わせたような機能を実装することができます！
-
11:19CSSだけで連番を表示させることができる、「counter」紹介！JavaScriptを使わなくても、連番で表示できるようにしてみましょう！
1, 2, 3... などの数字を自動的にリストの最初に表示させるには、JavaScriptの力が必要と思われている方が多いと思います。しかし今回紹介するCSSを使えば、簡単にその処理をすることがで…
-
13:03CSSの:has擬似クラスを紹介！今まではJavaScriptでしかできなかった指定をCSSのみで実装
動画内で説明していた、過去のセレクターの動画は以下です。・基礎編https://factory-programming-mv.com/video/AYp_SDYuEB8/・応用編https://fa…
-
11:43CSSだけで、文字列の省略を簡単にする方法！
JavaScriptなどでも実装できますが、CSSのみでも簡単に文字を途中で省略する方法はあります。今回はtext-ellipsisというプロパティを使って、記事の一覧に表示されている文字列を省略し…
-
15:01CSSで3Dの表現をするには？transform-styleとperspectiveについて紹介！
近年、CSSやブラウザの対応によってWebGLを使わなくてもCSSのみで3Dの表現ができるようになりました。ただし、transformで3Dの指定を施したとしても、立体的にはなりません。この動画では…
-
45:16スクロールアニメーション！CSSとJSでカーテンが開くように要素を表示！
モダンなサイトで見かける、カーテンが開いていくような要素の表示アニメーションについて解説しています。CSSとJavaScriptをうまく組み合わせることによって実現できますが、少々難しい部分もあるの…
-
11:46CSSだけで、文字にグラデーションをかける方法！
画像を作ることにより、文字にグラデーションをかけるものを表示することはできますが、文字を変更したり色を変更したりする際にいちいちPhotoShopなどの画像編集ソフトを使わなければなりません。今回は…
-
16:34CSSだけでスライダーを作る方法！scroll-snapを使って、縦にも横にもスライドできるスライダーを作っていきましょう！
この動画では、以下のCSSプロパティを使った、スライダーの作成方法をお伝えしていきます。・scroll-snap-type・scroll-snap-alignスクロール位置の制御を可能にするプロパテ…
-
31:30CSSだけで背景パターン・模様を生成する方法！グラデーションのrepeating（リピーティング。繰り返し）プロパティを使って、様々なパターンを作ってみましょう！
今回は、グラデーションを指定する為のCSSのみで、ストライプなどの背景パターンを作る方法を紹介しています。linear-gradient・radial-gradient・conic-gradient…
- もっとみる
JavaScript で出来る、様々なこと
-
07:09下にスクロールでヘッダーを隠し、上にスクロールでヘッダー表示させる機能を実装してみましょう！全２回（第１回目）
この動画では、JavaScriptとCSSを使ってページの途中でスクロールを上下にした際に、ヘッダーの表示を切り替えるアニメーションを実装していきます。第２回目の動画はこちらhttps://fact…
-
27:42コンテンツに応じた目次とページ内リンクを自動生成する方法と、CSS変数を使った効率的な開発！
今回は、コンテンツの見出しをJSで読み取り、自動で目次を生成する方法を紹介します。また、ページ内スムーススクロールの実装とCSSのカスタムプロパティを活用した、修正などに強いコードを書いていきます。…
-
32:51JavaScriptで日付を取得・表示などをするための方法とある日付までのカウントダウンをする方法
JavaScript（ジャバスクリプト）のDateオブジェクトを使って、今日の日時や曜日などを取得・表示してみましょう！基本が分かったら、明日の今の日時を表示したり、ある日付までのカウントダウン日を…
-
16:55無限にアニメーションし続ける円。重なった時に反対色になる実装と組み合わせて、表現の幅を広げましょう！前編
※後編の動画ページに、完成版のコードをダウンロードすることができるリンクを用意しています！GSAPを使ったアニメーション作品のシリーズです。最初、テキストを１文字ずつアニメーションさせながら表示させ…
-
09:01GSAPを使って、途中のコンテンツを横スクロールにする方法！後編
前編の動画はこちらhttps://factory-programming-mv.com/video/-6d0mTnhcLE/この動画では、GSAP（GreenSock Animation Platf…
ダウンロード有 -
57:24ページ内スムーススクロールと、モーダルメニューをクリックした後の自動メニュー閉じについて！
今回はJavaScriptのwindow.scrollToメソッドを使って、シンプルなページ内スムーススクロールを実装する方法を紹介しています。単にヘッダーのメニューにページ内リンクを設定する方法と…
-
15:28ハンバーガーメニュー・ドロワーメニューの作り方１（全５回）
第２回目https://factory-programming-mv.com/video/qxr9bmn8SUI/第３回目https://factory-programming-mv.com/vid…
-
13:38JavaScriptのアニメーションライブラリ「GSAP」を紹介！まずは機能とできることを見ていきます GSAP #1
様々なサイトでよく使われている、GSAP（GreenSock Animation Platform。読み方はジーサップ）について紹介します！CSSやSASSだけでは難しいアニメーションの制御ができる…
-
45:47パララックス（視差効果）について解説！Rellax.jsでスクロールエフェクト（効果）をかけて、奥行きのある演出をしてみましょう！
今回は、最近のサイトでよく見かけるパララックス（parallax）・視差効果の実装方法について解説しています。自前で実装するのは難しいため、Rellax.js（リラックス）というjQuery（ジェイ…
-
09:24JSでお知らせなどの日付が、◯日以内のものに自動でNEWをつける方法！ 前編
この動画では、time属性のdatetimeから日付のテキストを取得し、それをJS側で処理することによって、指定した日付以内の日付かどうかを判断する処理を実装していきます。実際に指定した日数以内であ…
- もっとみる
記事で解説するプログラミング技術
-
React.jsとは？
-
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のシミュレーションとしてお使いいただけます。
また、アニメーションの逆再生や再生速度も変更可能。途中で停止したり任意の経過時間における要素の状態をシミュレートすることも出来ます。