プレミアム会員のお知らせ
プレミアム会員にご登録いただくと、以下の特典を受けることができます。
- 全467動画(合計7426分)を視聴可能
- 全てのダウンロードコンテンツを利用可能
- サイト内のバナー広告が非表示
Factory Programming
初心者から上級者まで、Webフロントエンドのための動画学習サービス
Webフロントエンド技術全般
を学ぶことができる
動画学習サービスです
サービスの4つの特徴
-
全467動画・計7426分
豊富なコンテンツを配信
(随時追加予定) -
実践的な内容でスキルUP
基礎だけでなく、
よりレベルの高い内容も用意 -
コーディングだけでなく
JSの技術を使ったアプリ制作や
Webアプリなども
アニメーションの実装も動画で学べる -
様々な機能で
学習カレンダーや動画のお気に入り機能を使って
学習をサポート
モチベーションUPや
効率的な学習が可能
「プレミアム会員」の登録が必要です。
プレミアム会員の登録で制限なくご利用いただけます。
また、サイト内のバナー広告も非表示になります。
プレミアム会員の内容を確認する
人気の動画講座一覧
-
HTML/CSS
ウェブの基礎、HTML/CSSでサイト作成の第一歩
動画数:164 -
コード一つでウェブが動く!初心者でも始められるJavaScriptの世界
動画数:116 -
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
最新の動画
-
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:16
Location API(ロケーション) とそれを使ってページごとにJavaScriptの処理を分ける方法!WordPressでページごとに処理を分ける方法も
動画内で説明していたLocation APIのドキュメントはこちらhttps://developer.mozilla.org/ja/docs/Web/API/Location動画内で説明していたワー…
-
13:58
GSAPでパララックス(視差効果。parallax)の実装をする方法!前編
今回は、GSAPでパララックスの実装をする方法を学んでいきます。この動画では、画像をスクロールに合わせて少しずつ移動させることによってパララックスを実現していますが、アイコンやテキストなど要素であれ…
よく見られている動画
-
13:38
JavaScriptのアニメーションライブラリ「GSAP」を紹介!まずは機能とできることを見ていきます GSAP #1
様々なサイトでよく使われている、GSAP(GreenSock Animation Platform。読み方はジーサップ)について紹介します!CSSやSASSだけでは難しいアニメーションの制御ができる…
-
16:44
初心者向け!フォルダやファイルの階層構造と指定の方法まとめ!
この動画では初心者向けにフォルダやファイルの階層構造と指定方法を説明しています。ファイルのパスが正しくないと、画像などが表示されないため、パスの基本的な考え方を説明します。具体的にはHTMLでの画像…
-
20:11
Visual Studio Code(VSCode)のよく使うショートカットなどを紹介!できるだけ無駄な動きを減らして、爆速コーディングに近づいていきましょう!
Visual Studio Code(ビジュアルスタジオコード)のよく使うショートカット 集を紹介しています。エディタにはショートカット が用意されていることが多いですが、VSCodeも例外ではあり…
-
54:48
【実践!サイト模写コーディング!超初心者向け】解説しながらHTML/CSSを書いていきます!レスポンシブ(スマホ)対応まで!
模写の注意点や準備はこちらhttps://factory-programming-mv.com/video/一緒にサイト制作の練習をしましょう!今回、私が数年前に作成した非常にシンプルなサイトを基に…
-
14:26
コーディングに必須!ブロック・インライン・インラインブロック解説!
HTMLやCSSのコーディングで必須の考え方・ブロック(block)・インライン(inline)・インラインブロック(inline-block)について解説しています。display: flexやg…
Webアプリを作って、JavaScriptのスキルアップ!
それぞれの言語で出来ることをピックアップ
HTML / CSS で出来る、様々なこと
-
24:39
HTML/CSSで奥行きのある立方体を描画してみましょう!1からコーディングするチュートリアルを公開
HTMLやCSSで3D表現をすることが出来ますが、実際どのようにコーディングしたら良いか分からないこともあると思います。この動画ではまず基本的な立方体をHTML / CSSのみで1から作ることによっ…
-
06:02
CSS Grid(グリッド)解説!CSS Gridとはなんなのか?どういう場面で使われるのか?などを紹介します! #1
今回からいくつかの動画でCSS Gridのシリーズを配信していきます。第1回目のこちらの動画では、CSS Grid(グリッド)とはなんなのか?どういった部分で使われるのか?を紹介していきます。要素を…
-
11:03
CSSだけで、子要素が親要素をはみ出す方法!右側だけや左側だけはみ出す方法も!
Web制作をしていると、どうしても途中ではみ出せたいことがあります。この動画ではCSSだけで特殊な計算をすることで、それを実現する方法を紹介しています!
-
17:24
とても便利なposition stickyについて解説!特定の条件でスクロール時に要素を固定しましょう!
比較的新しい、CSSのpositionプロパティ「stikcy」について学びましょう!この値の特徴を学ぶことで、absoluteとfixedを組み合わせたような機能を実装することができます!
-
11:42
CSSだけで、ページ内スムーススクロールが実装できる!scroll-behaviorについて解説!
以前は、JSでしかできなかったページ内スムーズスクロールが、CSSのみで実装できるようになりました!この動画では、・scroll-behavior・scroll-margin-topを使って、実装し…
-
52:24
文字を1文字ずつアニメーションさせる方法と、そのバリエーション・考え方を紹介!かっこいいCSSアニメーションを実装できるようになりましょう!
transformについての動画はこちらhttps://factory-programming-mv.com/video/今回は、文字を1文字ずつアニメーションで動かす方法を紹介します。最近はアニメ…
-
13:00
CSSでグラデーションを実装してみましょう!linear-gradientを使って線形グラデーションさせる方法を紹介
グラデーションを直感的に生成できるツールを作りました!是非活用してみてください!https://front-end-tools.com/generateGradient/グラデーションは画像などを作…
-
16:34
CSSだけでスライダーを作る方法!scroll-snapを使って、縦にも横にもスライドできるスライダーを作っていきましょう!
この動画では、以下のCSSプロパティを使った、スライダーの作成方法をお伝えしていきます。・scroll-snap-type・scroll-snap-alignスクロール位置の制御を可能にするプロパテ…
-
57:24
ページ内スムーススクロールと、モーダルメニューをクリックした後の自動メニュー閉じについて!
今回はJavaScriptのwindow.scrollToメソッドを使って、シンプルなページ内スムーススクロールを実装する方法を紹介しています。単にヘッダーのメニューにページ内リンクを設定する方法と…
-
11:53
簡単に値をスライドで変更できる inputタグの range(レンジ)を紹介!
今回の動画では、Webページ内でスライダー(スライドバー)として機能するHTMLのinputタグのtype属性の一つ、「range(レンジ)」について説明しています。このtypeを使うと、数値の入力…
- もっとみる
JavaScript で出来る、様々なこと
-
31:14
クリックすると、たくさんの箱が集まってできていくようなグローバルメニューをGSAPで作ってみましょう! 全2回(第1回目) ※後編は動画の概要欄にあります
※後編の動画ページに、完成版のコードをダウンロードすることができるリンクを用意しています!今回の動画では、画面のサイズに応じてJavaScriptで箱を作り、それをメニューを開く際にランダムに表示さ…
-
12:39
JavaScriptでHTMLのクラスの切り替えをやってみましょう!classListについて解説しています。
JS(JavaScript)コーディングでよく使う、クラスの切り替えについて説明しています。classListのadd, remove, toggleを使い分けて、様々な処理ができるようになりましょ…
-
45:47
パララックス(視差効果)について解説!Rellax.jsでスクロールエフェクト(効果)をかけて、奥行きのある演出をしてみましょう!
今回は、最近のサイトでよく見かけるパララックス(parallax)・視差効果の実装方法について解説しています。自前で実装するのは難しいため、Rellax.js(リラックス)というjQuery(ジェイ…
-
11:15
テキストアニメーション実装!GSAPで一文字ずつ色や位置をランダムに配置して、その後アニメーションしながらフェードアウトする! 全2回(第1回目) ※後編は動画の概要欄にあります
※後編の動画ページに、完成版のコードをダウンロードすることができるリンクを用意しています!この動画では、一文字ずつ色や位置や角度をランダムに設定したものを段々と整列させ、その後文字列の両端から非表示…
-
11:29
ゆっくりと流れ続ける、スライダーを実装する方法!Swiperを使って、永遠に横に流れ続けるスライダー
この動画では、よくある画像がゆっくりと永遠に流れ続けるスライダーを実装する方法を紹介しています。Swiperは通常一定速度でスライドする機能はありませんが、transitionのCSSなどを上書きす…
-
24:12
自動で円形にメニューを並べて、順番にアニメーションさせる方法! 全2回(第1回目) ※後編は動画の概要欄にあります
※後編の動画ページに、完成版のコードをダウンロードすることができるリンクを用意しています!この動画ではJavaScriptのアニメーションライブラリ「GSAP」を使って、開閉するメニューを実装します…
-
21:04
JSではなくて、HTML側にデータを定義できる!カスタムデータ属性(data-◯◯)の活用方法と実践的な活用法について
サイトを制作していると、JavaScriptではなくHTML側にデータを定義した方が管理が楽な場合があります。そういった時に使えるのが、このカスタム属性です!この動画では実際の設定方法や活用方法など…
-
09:01
GSAPを使って、途中のコンテンツを横スクロールにする方法!後編
前編の動画はこちらhttps://factory-programming-mv.com/video/-6d0mTnhcLE/この動画では、GSAP(GreenSock Animation Platf…
ダウンロード有 -
19:18
ドロップダウンメニュー・アコーディオンメニューの作り方!HTML / CSS / JavaScriptでシンプルに作る方法
この動画では、HTML、CSS、JavaScriptを用いて、ドロップダウンメニューの作成方法について解説しています。親メニューと子供のメニュー(サブメニュー)を含むドロップダウンメニューのHTML…
-
24:30
データベースなしで、データが保存できる!Webストレージ(セッションストレージ・ローカルストレージ)について解説!
今までもCookie(クッキー)という技術で、Webにデータを保存することはできましたが、新しく出てきたWebストレージを使えば、さらに大きなデータを長期間保存可能となりました。この動画では・Ses…
- もっとみる
記事で解説するプログラミング技術
-
覚えていると便利!よく使うVSCodeのショートカットキー
-
jQueryとは?jQueryの紹介と脱jQueryについて
-
Sass / Scss について解説!
-
簡単にスライダーが作成できるJSライブラリ、Swiperについて
-
WordPress(ワードプレス)とは?
-
JSONについて
-
GSAP不要!? Web Animation API解説!
-
-webkit-, -moz-とは? ベンダープレフィックス(ベンダー接頭辞・Vendor Prefixes)について
-
フロントエンド開発に必須のサービス「Stat Counter」(スタットカウンター)について
-
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のシミュレーションとしてお使いいただけます。
また、アニメーションの逆再生や再生速度も変更可能。途中で停止したり任意の経過時間における要素の状態をシミュレートすることも出来ます。