プレミアム会員のお知らせ
一部の動画については、月額プランに入会いただくことで、閲覧できる形になっています。
初歩的なことだけではなく、より実践的なことや深いことを学びたい方は、ご入会いただくことでよりスキルアップを目指すことができます。
また、プレミアム会員の登録でサイト内のバナー広告が非表示になり、より快適にご利用いただけます。
Factory Programming
初心者から上級者まで、Webフロントエンドのための動画学習サービス
Webフロントエンド技術全般
を学ぶことができる
動画学習サービスです
サービスの４つの特徴
-
全419動画・計114時間
豊富なコンテンツを配信
（随時追加予定） -
実践的な内容でスキルUP
基礎だけでなく、
よりレベルの高い内容も用意 -
コーディングだけでなく
JSの技術を使ったアプリ制作や
Webアプリなども
アニメーションの実装も動画で学べる -
様々な機能で
学習カレンダーや動画のお気に入り機能を使って
学習をサポート
モチベーションUPや
効率的な学習が可能
「プレミアム会員」の登録が必要です。
サブスクリプションの登録で制限なくご利用いただけます。
プレミアム会員の内容を確認する
人気の動画講座一覧
-
HTML/CSS
ウェブの基礎、HTML/CSSでサイト作成の第一歩
動画数：155 -
コード一つでウェブが動く！初心者でも始められるJavaScriptの世界
動画数：165 -
自在に機能を追加、WordPressで思いのままのサイトを構築しましょう
動画数：39 -
CSSアニメーション
ページに動きを！CSSとJSで印象的なアニメーションを作成しましょう
動画数：75 -
Swiper
スライドショーを一段上に。Swiperで魅力的なスライド表現
動画数：12 -
CSSをレベルアップ！Sassでスタイリングの 効率を改善しましょう
動画数：22 -
脱
jQueryjQueryからの卒業 - 現代のJavaScriptで、より強力で効率的なコードを書く
動画数：16 -
爆速・効率化
手を止めない！爆速コーディングで作業時間を大幅短縮
動画数：19 -
GSAP3
次レベルのウェブアニメーションへ。GSAPで視覚体験を向上させましょう
動画数：48 -
Vue.js
覚えやすさとパワフルさ、新時代の開発体験
動画数：25 -
SEO対策
見つかりやすいウェブサイトへ、SEO対策でランキングアップ
動画数：12
それぞれの言語で出来ることをピックアップ
HTML / CSS で出来る、様々なこと
-
11:43CSSだけで、文字列の省略を簡単にする方法！
JavaScriptなどでも実装できますが、CSSのみでも簡単に文字を途中で省略する方法はあります。今回はtext-ellipsisというプロパティを使って、記事の一覧に表示されている文字列を省略し…
-
52:24文字を１文字ずつアニメーションさせる方法と、そのバリエーション・考え方を紹介！かっこいいCSSアニメーションを実装できるようになりましょう！
モダンなサイトで見かける、一文字ずつアニメーション（css animationを使って）する方法を紹介しています。さらに、通常は一文字ずつspanタグなどで囲まないといけませんが、今回はJavaSc…
-
13:00CSSでグラデーションを実装してみましょう！linear-gradientを使って線形グラデーションさせる方法を紹介
グラデーションを直感的に生成できるツールを作りました！是非活用してみてください！https://front-end-tools.com/generateGradient/グラデーションは画像などを作…
-
31:10CSSで、記事（リンクなど）にマウスホバー（hover）したら画像を拡大・大きくするアニメーションの実装方法！
メディアサイトなどでよくある、記事にマウスを乗せた時に画像を大きくする処理について紹介しています。よくJavaScriptを使わないとできないのではないか？と質問を受けますが、HTML / CSSの…
-
45:16スクロールアニメーション！CSSとJSでカーテンが開くように要素を表示！
モダンなサイトで見かける、カーテンが開いていくような要素の表示アニメーションについて解説しています。CSSとJavaScriptをうまく組み合わせることによって実現できますが、少々難しい部分もあるの…
-
17:55CSSで円形にグラデーション！（radial gradient） 中心から外側に向かって、グラデーションさせる方法を学んでいきます！
CSSでは様々なグラデーションをかけることができますが、今回は円形にグラデーションをかける方法を学びます。・色を複数指定する方法・中心位置を変更する方法・グラデーション開始位置を変更する方法などにつ…
-
14:01CSSで扇形にグラデーション！（conic-gradient） 時計回りに色を段々と変化させる方法を解説します！
CSSでは様々なグラデーションをかけることができますが、今回は扇形にグラデーションをかける方法を学びます。・色を複数指定する方法・中心位置を変更する方法・グラデーション開始位置を変更する方法などにつ…
-
31:30CSSだけで背景パターン・模様を生成する方法！グラデーションのrepeating（リピーティング。繰り返し）プロパティを使って、様々なパターンを作ってみましょう！
今回は、グラデーションを指定する為のCSSのみで、ストライプなどの背景パターンを作る方法を紹介しています。linear-gradient・radial-gradient・conic-gradient…
-
08:57CSSだけでテキストにマーカーを引いたような線を実装する方法！
画像などで文字にマーカーを引くことはできますが、今回はlinear-gradientの技術を応用して、文字にCSSのみでマーカーを引いてみましょう！
-
10:26CSSだけで画像の上にグラデーションや背景パターンを重ねる方法！
PhotoShopなどで背景の上にグラデーションを合成することはできますが、今回はCSSのbackground-imageとlinear-gradientなどを使ってCSSのみで実装する方法を紹介し…
- もっとみる
JavaScript で出来る、様々なこと
-
17:43モーダルウィンドウ・ダイアログウィンドウの作り方１（HTML、CSS、JavaScriptで作る）
HTML、CSS、JavaScriptだけで、プラグインなどを使わずに簡単にモーダルウインドウ（modal window）やダイアログボックス（dialog box）やポップアップウィンドウ(pop…
-
11:19JavaScriptでランダムな数字を出す方法と、配列と組み合わせて簡単なアプリ（おみくじ）を作る方法！
JS（JavaScript）で乱数（ランダムな数値）を出す方法と、それを活用した実例を紹介しています。配列と組み合わせて、簡単なおみくじアプリまで作るところまでを解説しています。JSの配列についての…
-
19:18ドロップダウンメニュー・アコーディオンメニューの作り方！HTML / CSS / JavaScriptでシンプルに作る方法
HTML, CSS, JSでドロップダウンメニューを作ってみましょう！スマホ・レスポンシブ対応時も共通の考え方となります。今回はクリックイベントでやっています。
-
23:59タブの切り替え！JavaScriptを使って、タブ（tab）が複数あっても対応可能なコードを書きましょう。HTML/CSSの書き方から紹介！
HTML, CSS, JSを使ってタブ切り替えを行う方法を紹介しています。for文を上手く活用することによって、タブやコンテンツが増えても対応できるようにします。また、CSSの指定による見た目の変更…
-
12:39JavaScriptでHTMLのクラスの切り替えをやってみましょう！classListについて解説しています。
JS（JavaScript）コーディングでよく使う、クラスの切り替えについて説明しています。classListのadd, remove, toggleを使い分けて、様々な処理ができるようになりましょ…
-
12:42JavaScriptで定期的に処理をする！setIntervalとclearIntervalの使い方とそのコーディング事例
JavaScriptでタイマーやカウントダウンなど定期的に処理をする方法を紹介しています。動画では実際にカウントダウンタイマーを作っているところを説明しながらsetIntervalとclearInt…
-
26:13【JavaScriptで戦闘ゲーム制作 #1】 まずは簡単なUIを整えて、ゲーム作りの土台作りから作っていきましょう！
HTMl, CSS, JavaScriptでゲーム作りをしてみましょう！本格的なゲームはUnityなどで作っていくことが多いですが、今回はJSの理解を深める為にあえてJSで制作していきます！初回はゲ…
-
19:28ローディング画面を実装する方法！ページの読み込み中にローディングアニメーションを表示させてみましょう！
読み込みが遅いページに対してローディングアニメーションなどを実装しないといけない場面があると思いますが、今回はユーザーに待たせているのを感じさせにくいローディング中の処理について説明しています。基本…
-
52:24
文字を１文字ずつアニメーションさせる方法と、そのバリエーション・考え方を紹介！かっこいいCSSアニメーションを実装できるようになりましょう！
モダンなサイトで見かける、一文字ずつアニメーション（css animationを使って）する方法を紹介しています。さらに、通常は一文字ずつspanタグなどで囲まないといけませんが、今回はJavaSc…
-
15:28ハンバーガーメニュー・ドロワーメニューの作り方１（全５回）
第２回目https://factory-programming-mv.com/video/qxr9bmn8SUI/第３回目https://factory-programming-mv.com/vid…
- もっとみる
最新の動画
-
25:52JavaScript（ジャバスクリプト）を最速で学ぶには？初心者向けロードマップを解説！
動画内で紹介していたメモはこちらhttps://hackmd.io/8YQZtmnmQWm81CJ74LyzWQ
-
23:17モーダルウィンドウを実装する最新のタグ、「dialog（ダイアログ）タグ」を活用した実装！全２回 後編
前編の動画はこちらhttps://factory-programming-mv.com/video/MjtjxR-OOeI/前回の動画に続き、モーダル画面を作成しています。モバイルウィンドウの開閉と…
ダウンロードファイル有 -
18:02モーダルウィンドウを実装する最新のタグ、「dialog（ダイアログ）タグ」を活用した実装！全２回 前編
後半の動画はこちらhttps://factory-programming-mv.com/video/viThCBnja9U/この動画は、新しいダイアログタグに関するフロントエンド技術のチュートリアル…
-
10:12メニューやモーダルウィンドウのスクロールをサイトに連動させない！overscroll-behaviorについて解説
以前は面倒な指定をしなければならなかった、モーダルウィンドウやハンバーガーメニューのスクロールをサイトに連動させない為のCSSを紹介しています！このoverscroll-behavior を使えば、…
ダウンロードファイル有 -
11:09モーダルウィンドウなどを簡単に真ん中に配置できる、「inset（インセット）」と関連するCSSプロパティを解説！
動画内で説明していた、fit-contentの動画はこちらhttps://factory-programming-mv.com/video/2nS-Vc_9Wb4/今回の動画では、「inset」プロ…
ダウンロードファイル有 -
12:23フロントエンド開発に無くてはならない！色々な情報を確認できる、Stat Counterについて紹介！
動画内で表示していた、メモのURLはこちらhttps://hackmd.io/rpf1go3MS9ujeU7yf-DZTw特定のブラウザでしか使えないCSSやJavaScriptが存在しますが、そも…
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のシミュレーションとしてお使いいただけます。
また、アニメーションの逆再生や再生速度も変更可能。途中で停止したり任意の経過時間における要素の状態をシミュレートすることも出来ます。