アップロード済みの動画リスト
-
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カメラ・マイク・イヤ…
-
19:34TypeScript（タイプスクリプト）入門！初心者向けに基本的な使い方や考え方について解説。前編
前回の動画で、TypeScriptは何か？やメリットをお伝えしました。https://factory-programming-mv.com/video/ZFtQf6DLa6w/今回の動画では、基本的…
-
13:22Typscript（タイプスクリプト）とは？初心者向けにメリットや特徴を紹介！
TypeScript（タイプスクリプト）とは、Microsoftが開発したJavaScriptの上位互換言語（superset）です。TypeScriptはJavaScriptの機能をすべて含みつつ…
-
19:44フロントエンドエンジニアの各レベル別の「月収」。簡単なロードマップと一緒に説明します！
Webフロントエンジニアの収入について紹介しています。勉強していると、どのスキルでどのくらいまでの収益を得られるのだろう？と不安になり質問してくる生徒さんが多いので、ここで解説しています。動画内でお…
-
14:22Webサイトで3D表現ができるThree jsとは？特徴やできることなどを紹介！
WebGLやWebGPUを効率的に扱うことができる、Three.js（スリージェイエス）について説明しています。ライティング（Lighting）・や物理演算・３Dモデルの読み込みなどができ、３Dのゲ…
-
25:35四角形を使ったリッチなローディングアニメーションを実装してみましょう！
ローディングアニメーションのパターンは色々とありますが、今回は四角を使ったいくつかのパターンを実装してみましょう。アイディア次第で色々な形にできますので、この動画で基本的な考え方を学びましょう。JS…
-
29:06テキストが流れるような、リッチなローディングアニメーションを実装してみましょう！
ローディングアニメーションのパターンは色々とありますが、今回は文字を使ったいくつかのパターンを実装してみましょう。アイディア次第で色々な形にできますので、この動画で基本的な考え方を学びましょう。JS…
-
36:43初心者向け。Git（ギット）について解説！基本的な考え方、用語、流れについても
開発をしていく上ではほぼ必須のgitについて説明しています。また、Github・GitLab・Bitbucket・CloudForgeなどのホスティングサービスについてもお話ししています。動画の中で…
-
44:13Next.jsでAPIを自作（バックエンド側の処理）し、問い合わせフォームなどを実装する！
Next.jsではバックエンド側の処理を記述することができます。この内容が理解できると、SendGridやResendなどの問い合わせフォームを実装することができます。今回は実際のフォームの流れをハ…
-
07:03文字選択時のスタイルを指定できる！::selection擬似要素について
文字をマウスなどで選択した時の色を変更できる、selection（セレクション）というものがあります。これが指定されていると、サイトのデザインとの統一性が取れるので、是非覚えておきましょう！
-
14:37環境変数について解説！ローカルと本番環境で処理を分ける
開発をしていると、開発環境のみでおこないたいことや、逆に本番環境のみでおこないたいことが出てきます。（env.process.NODE_ENV）この動画では、それぞれの書き方や考え方を紹介しています…
-
45:46SPA？CSR？SSG？サイトのレンダリング方式について解説
サイトを開発するときや公開するときに今だと様々なレンダリングの方法があります。聞いたことはあるけど、よく分からないというかたの為に以下について今回は話していますMPA（Multi Page Appl…
-
23:30NextjsにおけるCSS設計について
Next,jsで開発する際の、CSSの考え方は様々あります。この動画では以下についてお話ししています。・Tailwind CSS・BootstrapなどのCSS フレームワーク・Chakra UI,…
-
11:53Nextjsでtitleタグやdescriptionなどのmetadataを設定する方法！
タイトルタグやディスクリプションなどサイト全体や下層ページで状況に応じたmetaタグを設定したいことが出てきます。この動画では、Next.jsが用意している仕組みを活用してmeta情報を定義し表示さ…
-
10:17Next.jsのlayoutjsの仕組みを使ってヘッダーなどの共通パーツを定義する方法！
Next.jsでサイトやアプリケーションを作っていると、共通パーツの定義と呼び出しが必要になります。今回は、layout.jsを使った共通コンポーネントの活用について解説しています。
-
05:35GSAPのtimlineでデフォルト値を設定する方法！
タイムライン機能を使っていると、durationやeaseやdelayなどを全体で設定したい時があります。今回defaultsというオプションで、デフォルト値を設定する方法を紹介しています。GSAP…
-
06:01Next jsで下層ページを作る方法！基本的なルーティング設定について
トップページ以外のページをNext.jsでどのように作っていくかを解説しています。Next.jsはルーティングを非常に簡単に設定できるようになりましたので、是非活用していきましょう！※動画のNext…
-
15:36Next.jsの環境構築後のファイル構成について説明
前回までの動画で、Next.jsの環境構築の動画を配信してきました。今回は環境構築直後のディレクトリやファイル構成の説明をしていきます。フロントエンド開発の環境構築などの動画リストはこちらhttps…
-
11:18Next.js入門！初心者向けに開発環境の構築の手順と内容について解説。
コマンドを使用して、Next.js（ネクストジェイエス）の環境構築をしていく方法を紹介しています。環境構築の際に聞かれるいくつかの質問の解説などもおこなっています。Next.jsの公式のinstal…
-
05:56Next.jsとは？React.jsとの違いは？特徴やメリット
この動画では、Next.js（ネクストジェイエス）について紹介しています。React.jsとの違いは何か？特徴やメリットや具体的な機能などについて説明しています。React.js（リアクト）の再生リ…
-
13:22propsのバケツリレー問題とそれを解決するZustand（ツースタンド）ライブラリについて 前編
ReactやNext.jsでコンポーネント間のprops（プロップス）の受け渡しは、propsを受け渡すコンポーネントが途中にたくさんあるとその分たくさん処理をしなければならない上に、コードも多くな…
-
09:48関数をメモ化（キャッシュ）できる「useCallback」解説！
今までの動画では、値をメモ化できる「useMemo」や、コンポーネントをメモ化できる「React.memo」などを紹介してきましたが、今回は関数をメモ化することによって、パフォーマンスを改善していき…
-
07:23コンポーネントをメモ化できる、React memoについて解説！
Reactにおいて、コンポーネントを一般的に定義し使用すると意図せぬ再レンダリングが発生することがあります。この動画では、コンポーネントをメモ化することによって、そういったことを防いでいく方法につい…
-
14:17Reactでよく使う「useRef」の使い方と２つのメリット
Reactで開発をおこなっていると、useStateなどの仕様で不要なレンダリングがたくさん発生してしまうことがあります。また、DOM（HTMLの要素）の取得をする際に安定して取得できないことがあり…
-
09:57React必須の機能「コンポーネント」（Component）について解説。前編
Reactを使う上で必須のコンポーネントの基本的な使い方について学んでいきましょう！前編で基本的な使い方を紹介し、後編でさらに詳しい使い方（props、children、event）について解説して…
-
13:58JavaScriptでファイル分割する方法と、import, export文の書き方を解説！
JS、React.js、Vue.js、Next.js、Nuxt.jsなどでサイト制作やアプリケーション開発をしていると、ファイルを分割したくなってくるタイミングがあります。JSではその機能が用意され…
-
11:20Viteで作るReact.js環境と、ファイル構成の説明
以前は少し面倒だったReact.js（リアクト）環境も現在Vite（ヴィート）を使うことで、簡単に構築することができます。この動画では実際にViteでReact環境を構築し、その際に生成されるファイ…
-
14:32npm・yarn・pnpm・bunの導入と使い方をViteを使って解説
各パッケージマネージャーの導入から、パッケージのインストール・アンインストール・アップデートコマンドの実行などを紹介しています。動画ではviteを使って紹介していますnpm・yarn・pnpm・bu…
-
17:29最新のフロントエンド開発環境を簡単に構築できる「Vite（ヴィート）」解説
具体的なコマンドを使って、Vite（ヴィート）で環境構築から実際に動かしてみるところまでをやってみます。React・Angular・Vue・solid・svelte・preact・astro・rem…
-
11:10パッケージマネージャーとは？npm・yarn・pnpm・bun について紹介します！
Node.jsを使った開発環境を使用していると、必ず出てくるのがこのパッケージマネージャーです。今回は、そもそものパッケージの概念と・npm（エヌピーエム）・yarn（ヤーン）・pnpm（ピーエヌピ…
-
18:09フロントエンド開発環境のまとめ。Grunt、Gulp、Webpackとは何だったのか？Vite、Turbopackとは？
近年複雑になっている、Webフロントエンド開発環境についてですが、ここではGruntの時代からの流れや関係性について説明しています。Grunt、Gulp、Webpack、Vite、Turbopack…
-
13:30Node.jsのインストールと、複数バージョン管理できるnvmについて
この動画では、フロントエンド開発の環境構築に必須のNode.js（ノード）のインストールと、バージョン切り替えが可能なnvm（Node Version Manager）についての説明をしています。昔…
-
08:54vim（ビム）とは？概要と簡単な使い方について
macなどで開発環境を整えていると、一時的に特定のファイルを編集したいことがよくあります。この動画では、コマンドライン上で簡単に扱える、vimの概要と簡単な使い方について説明しています。動画内で説明…
-
17:32Splideサムネイルと連動するスライダーを実装する方法
この動画では、軽量スライダーライブラリ「Splide（スプライド）」を使って、スライダーと下部のサムネイルを連動させる実装方法を解説しています。Splideは「ギャラリー」としても紹介されています。…
-
15:05Reactでよく使う機能、useEffectについて解説
コンポーネントのマウント後や、ある値を監視（watch）し変更を検知したら処理をしたい時などに使うuseEffectについて紹介しています。useEffectを理解していないとできない処理はたくさん…
-
11:06Splideでスライダーのアニメーションのしかたを変えるeasing（イージング）オプション
easingを変更すると、ただ横に移動するだけではなく、色々な動きをスライダーに設定することができます。この動画では、linear、ease-out、ease-in、ease-in-outなどの基本…
-
11:34Reactを使って、メニューを表示・非表示する方法 前編
Reactでよく使う、useStateの挙動をさらに詳しく知るために、メニューの切り替え処理をやってみましょう。単純にメニューを開閉するだけではなく、メニューを開くボタンと閉じるボタン、そしてメニュ…
-
14:14Reactで最もよく使うuseStateの基本的な考え方と使い方を解説！
Reactでリアクティブな変数を定義するための、useStateについて解説しています。基本的な動きを学ぶために、ボタンをクリックした回数をuseStateで管理し、表示してみましょう！
-
17:00React.js入門！はじめの一歩。初心者向けにまずは基本的な読み込みと設定から！
React.jsの入門・初心者向けの動画です。以下はReact.jsを使う上で必要なURLです。「開発用」と「本番用」のscriptタグを書くときは、「crossorigin」属性をscriptタグ…
ダウンロード有 -
10:01Splideで流れ続ける自動スクロールを実装する方法
動画内で説明していた、公式ドキュメントのURLはこちらhttps://ja.splidejs.com/extensions/auto-scroll/通常、流れ続ける自動スクロールを実装する場合、そこ…
-
13:22React（リアクト）とは？コンポーネントなどの特徴などについて解説
React（リアクト） は、Meta（旧Facebook）が開発した JavaScript（ジャバスクリプト） のライブラリです。主に UI（ユーザーインターフェース） を効率的に構築するために使わ…
-
07:17１つのページで複数のSplideを動かす方法と、効率的に記述する方法
１ページ内で、複数のSplideを動作したいことがあると思います。今回は、同一オプションで複数箇所にSplideを設定したい時などにfor文を使って効率的にコードを書く方法などを紹介しています。この…
-
05:53軽量スライダーライブラリSplideのレスポンシブ対応について解説！
この動画では、Splide（スプライド）を使ったレスポンシブ対応について解説しています。画面サイズ（ウィンドウ幅）が変化した際に、スライドの表示数や余白（マージン）を適切に調整する方法を紹介していま…
-
08:10スライダーライブラリSplideの、自動再生・速度の変更・マウスホバー時の挙動・ドラッグ操作について
本動画では、軽量なスライダーライブラリ「Splide（スプライド）」の ・自動再生（autoplay）・スライドの速度（speed）・マウスホバー時の挙動（pauseOnHover）・スライド移動間…
-
09:06軽量スライダーライブラリのSplideで、スライド間の余白や、左右のスライドの見え方を設定する方法
スライダーライブラリ「Splide（スプライド）」の・gap（ギャップ）・padding（パディング）・fixedWidth（フィックスドウィズス）の3つのオプションについて解説しています。スライド…
-
07:54スライダーライブラリのSplide (スプライド)で「１つのスライダーに複数のスライドを表示させる方法」
この動画では、軽量で高機能なスライダーライブラリ「Splide (スプライド)」の基本的な使い方から、さらに応用的な設定方法までを解説しています。前回の動画では、Splide の基本的な読み込み方法…
-
18:46軽量なスライダーライブラリ「Splide」（スプライド）の紹介と基本的な使い方！
Swiperよりも軽量で、日本語ドキュメントも充実している「Splide」について解説しています。公式サイト：https://ja.splidejs.com/今回は、概要と使うメリット、必要な読み込…
-
13:03CSSの:has擬似クラスを紹介！今まではJavaScriptでしかできなかった指定をCSSのみで実装
動画内で説明していた、過去のセレクターの動画は以下です。・基礎編https://factory-programming-mv.com/video/AYp_SDYuEB8/・応用編https://fa…
-
08:21チェックボックスやラジオボタンの色を統一できるaccent-colorについて解説
フォームなどでよく使われる「チェックボックス（checkbox）」「ラジオボタン（radio）」の色を簡単に変更できる、CSSのアクセントカラー（accent-color）プロパティについて解説して…
-
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:16Location API（ロケーション） とそれを使ってページごとにJavaScriptの処理を分ける方法！WordPressでページごとに処理を分ける方法も
動画内で説明していたLocation APIのドキュメントはこちらhttps://developer.mozilla.org/ja/docs/Web/API/Location動画内で説明していたワー…
-
13:58GSAPでパララックス（視差効果。parallax）の実装をする方法！前編
今回は、GSAPでパララックスの実装をする方法を学んでいきます。この動画では、画像をスクロールに合わせて少しずつ移動させることによってパララックスを実現していますが、アイコンやテキストなど要素であれ…
-
11:55VSCodeの便利なプラグインLive Server（ライブサーバー）を紹介！
HTML/CSSでサイト制作をしていると、毎回ブラウザの手動でのリロードが手間となります。それから、JSのfetchなどの処理はサーバー上でないと動作しないことがあります。それらの問題を解決するのが…
-
21:20CSSで背景に動画を設定し、綺麗にレイアウトして自動再生させる方法！
動画内で説明していた、videoタグの動画はこちらhttps://factory-programming-mv.com/video/2TAc7dljEUg/動画内で説明していた、object-fit…
-
25:55コンテンツを一定の幅で固定する効率的な方法！前編
動画内で説明していた、カスタムプロパティ（CSS変数）の動画はこちらhttps://factory-programming-mv.com/video/bg1ne6Ztk7I/動画内で説明していた、m…
-
20:22入れ子のレイアウトがもっと楽に！subgrid（サブグリッド）解説。CSS Gridの新機能を使いましょう。前編
動画内で説明していたaspect-ratioの動画はこちらhttps://factory-programming-mv.com/video/jeaRVM9_HS4/動画内で説明していたobject-…
-
17:42API（エーピーアイ）とは？インターフェース・リクエスト・レスポンスについても解説！
講義内で使用していた資料のURLは以下です。https://factory-programming-mv.com/posts/whats-api/この動画では、API（アプリケーション・プログラミン…
-
17:51CSSのtransformプロパティの新しい書き方と挙動について
動画内で説明していた、以前のtransformの書き方の説明動画はこちらhttps://factory-programming-mv.com/video/TQ1_PSS31W8/動画内で説明していた…
-
16:33videoタグで動画を設置・再生させる方法を紹介！様々なオプションについても解説
動画内で説明していた、aspect-ratioの動画は以下です。https://factory-programming-mv.com/video/jeaRVM9_HS4/HTMLで動画を簡単に再生さ…
-
14:24定義と実行を同時に行える関数「即時関数」について解説！
この動画では、JavaScriptでよく使用される「即時関数」(Immediately-Invoked Function Expression, IIFE)について説明しています。即時関数は、その定…
-
19:15JSのイベントフェーズについて解説！キャプチャリングフェーズとバブリングフェーズとは？
今回は、JavaScriptを勉強しているとぶつかる問題である、・キャプチャリングフェーズ（Capturing Phase）・バブリングフェーズ（Bubbling Phase）について説明しています…
-
06:11エラーを見やすく表示！VSCodeの便利なプラグインError Lens（エラーレンズ）を紹介！
Visual Studio Code（ビジュアルスタジオコード）は標準でエラーを検知しお知らせしてくれますが、標準機能だと見づらい部分があります。このError Lensプラグインをインストールする…
-
04:36入れ子（ネスト）になったコードが見やすくなる！VSCodeの標準機能Sticky Scroll（スティッキースクロール）を紹介！
今回はVisual Studio Code（ビジュアルスタジオコード）の便利な機能である、スティッキースクロールについて紹介しています！コードが長くなってくると段々見づらくなってきますが、この機能を…
-
04:27便利なVSCodeの拡張機能BookMarks（ブックマーク）を紹介！
Visual Studio Codeで開発していると、行をブックマークして後で戻ってきたいと思うことがあります。現在VSCodeではそういった機能がないのですが、この拡張機能（プラグイン）を入れれば…
-
08:38JSの分割代入について解説！
分割代入 (Destructuring assignment) 構文は配列やオブジェクトから別のそれぞれの変数に代入することができる代入方法です。知らなくても実装はできますが、場合によってはかなり効…
-
06:40JSのスプレッド演算子について解説！
JavaScriptのスプレッド演算子について解説しています。３つのドット「...」から始まるこの演算子は、配列やオブジェクトを展開させることができます。ただ、少し分かりづらく、質問も多いので今回紹…
-
05:02JSの同期処理と非同期処理（非同期通信）について解説！
JSを勉強しているとよく出てくる、同期処理（Synchronous Processing）・非同期処理（Asynchronous Processing）について解説しています！あまり意識しない場面も…
-
14:19JavaScriptでよく使われる、callback関数（コールバック関数）について
よくコールバック関数について聞かれるので、今回の動画で説明してみました。実はaddEventListenerなどで使われていますが、どこで使われているのか？や自作の関数で設定する場合の例を詳しく解説…
-
10:31ワードプレスの記事などの投稿をSwiper（スライダー）でスライド表示する方法！
WordPressサイトを制作していると、投稿やカスタム投稿で作成した記事の表示を、スライド形式で表示したいことがあります。今回は、スライダーライブラリの中でも有名なSwiper（スワイパー）という…
-
05:37ワードプレスで抜粋を任意の文字列に変更する方法と、文字が長くなった時の省略文字を変更する方法！
WordPressの記事の抜粋などを the_excerpt で表示する際、デフォルトでは記事の書き出し部分が表示されてしまいますが、記事ごとに表示内容を変更することが可能です。この動画ではそのやり…
-
26:57ワードプレスでページの種類ごとの処理をしたい場合の条件分岐の関数を紹介！
動画内で紹介していた、if文などの動画はこちらhttps://factory-programming-mv.com/video/jmPRbA2X7_k/WordPressでサイト制作をしていると、同…
-
07:32ワードプレスで固定ページのbodyタグにページのスラッグをクラス名として追加する方法！
WordPressサイトを作っていると、ある特定のページのみスタイルを当てたり機能を追加したいことが出てきます。トップページだけなどでしたらbody_class関数が出力するクラス名を使えばいいです…
-
05:04ワードプレスでどのテンプレートが表示されているのかを確認する方法！
WordPressサイトを作っているときに、現在のページはどのPHPファイルが表示されているのか分からなくなることがあります。そういった時に、どのように確認すると良いのかを紹介しています。この動画で…
-
06:02トップページの一部をワードプレスの管理画面で編集する方法！
クライアントなどユーザーが管理画面上から自由にトップページのコンテンツを編集したいといった場合に、ワードプレス（WordPress）ではウィジェットなどの選択肢もありますが、今回は固定ページとしてあ…
-
11:03WordPressでユーザーを追加する方法と各権限について紹介！
ワードプレスサイトを複数人で管理する場合、ユーザーを追加することで、それぞれ記事を作成・編集したり、ユーザーごとの設定をすることができるようになります。また、各権限（管理者・編集者・投稿者・寄稿者・…
-
10:51JSで簡単にアニメーションできる！Web Animations APIの基礎
Web Animation APIを使うと、Webページにアニメーションを実装することができます。基本的にはHTML、CSS、そしてJavaScriptの三つのファイルを用意して進めます。CSSの部…
-
09:01GSAP不要？ブラウザ標準APIのWeb Animations APIについて紹介！
この動画で説明している内容は、こちらの記事です。https://factory-programming-mv.com/posts/about-web-animation-api/Web Animat…
-
08:54macに、必要なアプリやツールを簡単にインストールできるHomebrew（ホームブルー）について解説！
動画内で説明していた、Command Line Tools（CLT）のダウンロードの動画はこちらhttps://factory-programming-mv.com/video/ZDCP7LVfXq…
-
10:23本格的なフロントエンド開発に必須のNode.js（ノード）解説！Node.jsとは？どんなものなのか？
個別で講義もおこなっています！詳細は以下のページからご覧いただけます。https://personal-lesson-programming.com/独自の動画サービスを公開しました！内容はYout…
-
08:29GSAPを使って、途中のコンテンツを横スクロールにする方法！前編
後編の動画はこちらhttps://factory-programming-mv.com/video/S-YkozogQQU/GSAPの動画リストはこちらhttps://factory-program…
-
21:30階層が深い、ドロップダウン「多階層ドロップダウンメニュー」を実装する方法！WordPress（ワードプレス）のカスタムメニューにも対応！前編
後編の動画はこちらhttps://factory-programming-mv.com/video/yM-uZIKpB3s/SassをCSSにコンパイルする方法はこちらhttps://factory…
-
15:18ヘッダーやモーダルの裏側をおしゃれなすりガラス風に実装する方法！
AppleのサイトやiOSなどでよく使われている、ヘッダーやモーダルウィンドウの裏側をぼかしてすりガラス風にする実装をしてみましょう！具体的には、backdrop-filter（バックドロップフィル…
ダウンロード有 -
25:52JavaScript（ジャバスクリプト）を最速で学ぶには？初心者向けロードマップを解説！
動画内で紹介していたメモはこちらhttps://factory-programming-mv.com/posts/js-loadmap/この動画では、JavaScriptの学習に関する初心者向けのロ…
-
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が存在しますが、そも…
-
19:59-webkit-, -moz- ってなに？ベンダープレフィックス（Vendor Prefixes）について解説！
動画で説明していたメモのURLはこちらhttps://hackmd.io/0NhgNFbQSwKkTQ381rfDnAコーディングをしていると、必ず出会う、-webkit-, -moz-, -o-,…
-
05:44CSSだけで現在の文字色を取得して、様々な値に活用できる「currentColor」紹介！
今回は、CSSの非常に便利な機能、「currentColor」について説明します。この機能を使えば、現在の文字色を簡単に取得し、その色を他のスタイルに活用することができます。「currentColo…
ダウンロード有 -
09:08jQueryのAjax（非同期通信）とJSでの書き換え（Fetch API）について解説！
JSのfecth APIについてはこちらhttps://www.youtube.com/watch?v=pzIxzegWVu8&t=537sJSONの解説についてはこちらhttps://fa…
-
17:35jQueryのeach文の書き方と、JSでの書き換え方について解説！
JSの配列の動画はこちらhttps://factory-programming-mv.com/video/nFggLCIvC1k/JSのオブジェクトについてはこちらhttps://factory-p…
-
09:08JSONについて解説！特徴や注意点・JavaScriptでの読み込みまで！
動画内で説明していた記事の内容はこちらhttps://factory-programming-mv.com/posts/about-json/動画内で説明していたfetchの動画はこちらhttps:…
-
11:24プログラミングにおける変数や関数、クラス名などの命名規則について
この動画では、変数名、関数名、CSSのクラス名、オブジェクト指向のクラス名など、プログラミングでよく使われる命名規則について解説しています。・スネークケース。これは単語間をアンダースコア(_)で繋ぐ…
-
08:19jQueryでの属性値の取得・設定・変更とJSでの記述方法
この動画では、Webフロントエンド開発におけるjQueryとJavaScriptでの属性値の取得、設定、変更方法について解説しています。まず、HTML要素の属性値（属性: "attr&qu…
-
07:53jQueryのslideUp, slideDown, slideToggleについてと、JSでの書き換え 前編
この動画の後編はこちらhttps://factory-programming-mv.com/video/gNn-1dErYAk/この動画では、ウェブページ上の要素の表示切り替えをスライドの形式で行う…
-
09:34jQueryで簡単にフェードイン・フェードアウトができる、fadeIn・fadeOut・fadeToggleとJSでの書き換え 前編
後半の動画はこちらです。https://factory-programming-mv.com/video/vu2hvAWuq5Q/この動画では、jQueryのフェードエフェクト（フェードイン、フェー…
-
11:50jQueryで表示の切り替えとshow・hideメソッドの紹介。それぞれのJSでの書き換え
この動画では、jQueryとJavaScriptを使ったウェブページの要素の表示・非表示（表示切替・表示非表示・視覚表現の切り替え）の操作と、jQueryのshow・hideメソッド（表示・非表示メ…
-
12:24jQueryでのCSSの書き換えとJSでの記述方法について
この動画は、jQueryを使ったCSSの追加・削除・書き換え、そしてJavaScriptでの記述方法について説明しています。主な内容は以下のとおりです。1. jQueryを使ったCSSの追加、削除、…
-
12:24jQueryでのテキストとHTMLの挿入・取得・書き換えと、JavaScriptでの書き方について
この動画では、「jQueryを用いたテキストやHTMLの操作方法」について詳しく解説しています。特に、テキストやHTML要素の取得、挿入、そして書き換えに重点を置いています。動画の初めでは、jQue…
-
09:26jQueryでのクラスの切り替えとJavaScriptでの書き換えについて
この動画では、jQueryとJavaScriptのクラスの切り替え方法について説明しています。クラスを追加、削除、切り替える方法をデモンストレーションしています。クラスを追加するためには、'…
-
11:19jQueryでクリックイベントなどの処理とJavaScriptでの書き方について。thisの意味と使い方も
このYouTube動画は、jQueryを使用してイベント処理（特にクリックイベント）を行う方法と、それをJavaScriptに書き換える方法について解説しています。また、動画では「this」の使い方…
-
09:02jQueryにおける兄弟要素・親要素の取得とJavaScriptにおける書き方
jQueryで兄弟要素や親要素を取得する際には、next, prev, parentsなどのメソッドを使って取得することができましたが、JavaScriptでも簡単に書くことができますので、見てみま…
-
13:57jQueryでの要素の取得と、JavaScriptでの書き換え方について解説
jQueryからJavaScriptに移行するときに最初につまづくのが要素の取得です。そもそも取得のされ方が若干違うので、それぞれの要素の取得の流れと書き方の違いを見ていきましょう！動画内で紹介して…
-
11:21jQueryでDOM（HTML）の読み込み後に処理をする、$（function） についてと、JSでの書き方について
jQueryを学ぶとおそらく最初に学ぶことになる、＄（function）｛｝などについての説明と、それをJSで書き換えることについて説明しています。現代においてはdefer属性をJSの読み込み時につ…
-
15:35jQuery（ジェイクエリー）とは何か？なぜjQueryは不要になったのか？
動画内で説明していた記事はこちらhttps://factory-programming-mv.com/posts/about-jquery/今回の動画では、以前よく使われていたjQueryについて説…
-
09:24JSでお知らせなどの日付が、◯日以内のものに自動でNEWをつける方法！ 前編
この動画では、time属性のdatetimeから日付のテキストを取得し、それをJS側で処理することによって、指定した日付以内の日付かどうかを判断する処理を実装していきます。実際に指定した日数以内であ…
-
10:38CSSの新しいセレクタ、:isと:where関数について解説！効率的にまとめて要素を指定可能！
今回は、比較的最近使えるようになった、is と where 関数について解説しています。Sassを使っている方は、ネストして書けるので、あまりメリットを感じないかもしれませんが、CSSのみで記述して…
-
08:44VueのComposition APIでリアクティブなデータを定義する、refとreactiveについて
今まで、Vue2などで使われてきたOptions API では、dataメソッド内にデータを定義することで、リアクティブなデータを定義してきました。Vue3ではComposition APIが導入さ…
-
08:46Vue3 Composition API（コンポジションエーピーアイ）とは？Options API との違い
Vue3から追加された、Composition APIについて解説しています。今までは、関連している変数やメソッドが離れてしまうことにより、視覚的にみづらくなってしまっていた問題を解決するものです。…
-
11:29ゆっくりと流れ続ける、スライダーを実装する方法！Swiperを使って、永遠に横に流れ続けるスライダー
この動画では、よくある画像がゆっくりと永遠に流れ続けるスライダーを実装する方法を紹介しています。Swiperは通常一定速度でスライドする機能はありませんが、transitionのCSSなどを上書きす…
-
16:34CSSだけでスライダーを作る方法！scroll-snapを使って、縦にも横にもスライドできるスライダーを作っていきましょう！
この動画では、以下のCSSプロパティを使った、スライダーの作成方法をお伝えしていきます。・scroll-snap-type・scroll-snap-alignスクロール位置の制御を可能にするプロパテ…
-
16:49VueのComponent（コンポーネント）解説！機能や要素ごとに分割して、呼び出せるようにしましょう！
サイトやアプリケーションが大きくなってくると、重複したコードが多くなってきます。そんなときに効率化できて便利なのが、このComponent（コンポーネント）です。引数などで、呼び出す際にテキストや属…
-
16:45Vue jsでドロップダウン・アコーディオンメニューを実装する方法！前編
この動画では、Vueの基礎的な技術を活用したよくあるWebサイトの機能を実装していきます。今回はドロップダウン（dropdown）・アコーディオン（accordion）メニューを実装していきますが、…
-
27:42コンテンツに応じた目次とページ内リンクを自動生成する方法と、CSS変数を使った効率的な開発！
今回は、コンテンツの見出しをJSで読み取り、自動で目次を生成する方法を紹介します。また、ページ内スムーススクロールの実装とCSSのカスタムプロパティを活用した、修正などに強いコードを書いていきます。…
-
07:25vue.jsのrefsで要素を取得する方法と、その活用方法！
通常のJSでは、getElementByIdやquerySelectorなどで要素を取得しますが、Vueのrefを使うことで要素を取得・参照することができます。この動画では、実際の使い方と、v-fo…
-
16:55無限にアニメーションし続ける円。重なった時に反対色になる実装と組み合わせて、表現の幅を広げましょう！前編
※後編の動画ページに、完成版のコードをダウンロードすることができるリンクを用意しています！GSAPを使ったアニメーション作品のシリーズです。最初、テキストを１文字ずつアニメーションさせながら表示させ…
-
11:34v-modelでinputタグのデータと、Vueのdataを紐づける（バインドする）方法とその活用方法
checkbox, radio, select をv-modelで管理・活用する方法についてはこちらhttps://factory-programming-mv.com/video/qT4OFD7S…
-
18:31v-forで配列やオブジェクトを繰り返し処理する方法解説！
Vue.jsには配列やオブジェクトを繰り返しできる v-for という機能があります。今回は、実際に配列とオブジェクトを処理した際の挙動などを確認します。それから、それぞれを処理した場合の引数の意味…
-
06:17HTMLタグを（エスケープさせず）そのまま処理してくれる、v-htmlについて解説！
vueで定義した変数などに含まれるHTMLタグをそのまま表示したいことがあります。そういった時に使えるのが、この動画で紹介している v-html です。普段内容を表示する際はマスタッシュと呼ばれる …
-
16:24条件付きレンダリング！v-if・v-show などを解説。条件に応じて表示を切り替えられるようにしましょう！
この動画では、設定した変数やメソッドに応じて、表示を切り替える方法について学んでいきます。具体的には・v-if・v-else-if・v-else・v-showのそれぞれの挙動と使い方について解説して…
-
18:02GSAPで、丸とテキストを効果的にアニメーションさせて、簡単なモーショングラフィックスを作ってみましょう！前編
※後編の動画ページに、完成版のコードをダウンロードすることができるリンクを用意しています！今回は全２回の動画で、GSAPを用いたアニメーションの作例を紹介しています。縁取りやストライプの円をランダム…
-
12:22Vue.jsのmethodsを使って、共通メソッド（関数）を定義する方法と、その使い方について
この動画では、通常のJSでもよく使う関数を定義する方法と、その使い方について説明しています。Vue.jsのメソッドが理解できてくると、一気にできることの幅が増え、Vueを使う意味も大きくなってくると…
-
14:13Vue.jsにおける、クラスとスタイルのバインディングについて解説！
この動画では、属性をバインド（紐づける）できるv-bindをclassとstyleで活用する方法についてお話ししています。この辺の技術について理解できると、動的にクラスやスタイルを変更できるようにな…
-
07:26Vue jsのディレクティブとデータバインディングについて解説！
Vue.jsにはv-◯◯という形で書くことができる、ディレクトティブというものがあります。そして、その中でも今回は v-bind という属性をVueのデータと紐付けることができるものを紹介しています…
-
14:01Vue js3の読み込みと、基本的な書き方について！
今回は、Vue.jsの読み込みと、基本となる書き方や考え方について説明しています。バージョン2からバージョン3で書き方が少し変更されたので、注意しましょう。また、JSから移行する際にとりあえず書いて…
-
12:44Vue jsとは？その特徴とメリットについて解説！最新Vue.js３対応
この動画から、Vue.jsのバージョン３の動画シリーズを公開していきます。まずは、特徴やメリット、jQueryではなくVue.jsが使われるようになってきた理由や、特徴の１つである「リアクティブ」の…
-
22:31よくあるJavaScriptのエラーと解決法・対処法について！初心者やJSの学び始めの人へ！
よくJSを学び始めた人から質問を受けることについて、まとめてみました。変数・関数名のエラー、スコープ、型などについてと、その対策や普段から気をつけることなどについて説明しています。動画内で紹介してい…
-
14:44JavaScriptの変数のスコープ（範囲）について解説！グローバルスコープとローカルスコープってなに？
プログラミング言語において、変数の影響範囲について知ることは、とても重要です。この動画では・グローバルスコープとローカルスコープについて・ローカルスコープの種類。関数スコープ（引数も含む）とブロック…
-
08:51文字列と配列を変換するsplitとjoinメソッドを紹介！
文字列を特定の文字で区切って配列にする、「split」（スプリット）と配列を特定の文字列で連結して文字列にする、「join」（ジョイン）について紹介しています！これを知らないと、自力で面倒な処理をし…
-
04:50JavaScriptの再帰関数についてと、その注意事項を解説！
JavaScriptの勉強をしていると、「再帰関数」という言葉が出てくると思います。今回はこの用語と実際の記述例を書いていきます。この関数は使い所によってはとても便利ですが、無限ループに陥り、スタッ…
-
14:58マウスの座標をJavaScriptで取得する方法と、マウスを変更・編集する方法 1/2
JavaScriptでマウス座標を取得する方法はいくつかありますが、今回はその中でも・offset (X/Y)・client (X/Y)・page (X/Y)とそれぞれの特徴について、説明していきた…
-
14:09formのselectタグのカスタマイズについて解説！ブラウザが違っても、CSSでカスタマイズしたスタイルを適用する！
form周りのタグは、ブラウザが変わるとデザインも変わってしまいますが、今回はselectタグについて解説しています。また、selectボックス内の矢印の変更方法も紹介しています。動画内で説明してい…
-
24:30データベースなしで、データが保存できる！Webストレージ（セッションストレージ・ローカルストレージ）について解説！
今までもCookie（クッキー）という技術で、Webにデータを保存することはできましたが、新しく出てきたWebストレージを使えば、さらに大きなデータを長期間保存可能となりました。この動画では・Ses…
-
16:46【JavaScriptで数を当てるゲーム #3】パネル上の数値をクリックしたら、一番大きな数値を当てられたか判定してみましょう！
前回に引き続きゲームの実装を進めていきます。今回は、色々な数値が並んでいるパネルをクリックして、あたりかハズレかを判定してみます。この動画シリーズの再生リストはこちらhttps://factory-…
-
25:12【JavaScriptで数を当てるゲーム #2】スタートボタンを押したら、ランダムな数値を並べてみる。
前回の実装に引き続き、機能を追加していきます。今回はスタートボタンを押したらランダムに数を生成し、それをパネル上に並べていきます。この動画シリーズの再生リストはこちらhttps://factory-…
-
13:10【JavaScriptで数を当てるゲーム #1】まずは完成版の確認と、基本的なUIから！
今回のシリーズから、JavaScriptとSassを使って、JSの練習のためのアプリケーション作成をおこなっていきます！１回目は、完成系の確認と、基本的なHTMLなどを組んでいくところから始めていき…
-
11:03CSSだけで、子要素が親要素をはみ出す方法！右側だけや左側だけはみ出す方法も！
Web制作をしていると、どうしても途中ではみ出せたいことがあります。この動画ではCSSだけで特殊な計算をすることで、それを実現する方法を紹介しています！
-
14:35requestAnimationFrame 解説！画面のリフレッシュレート（切り替わり速度）に応じた処理をおこないましょう！
この動画では、requestAnimationFrame（リクエストアニメーションフレーム）について説明しています。JSでアニメーションやパフォーマンスチューニングをおこなうときに必須のメソッドです…
-
11:19CSSだけで連番を表示させることができる、「counter」紹介！JavaScriptを使わなくても、連番で表示できるようにしてみましょう！
1, 2, 3... などの数字を自動的にリストの最初に表示させるには、JavaScriptの力が必要と思われている方が多いと思います。しかし今回紹介するCSSを使えば、簡単にその処理をすることがで…
-
05:43Sassの@contentの活用について解説！メディアクエリなどのmixinの記述の幅を広げて、効率的なコードを書いていきましょう！
@media や @hover などのメディアクエリなどを記述していく際に便利な、@content について説明しています。レスポンシブなサイトを作成するには必須の機能なので、是非覚えていきましょう！
-
14:39Contact Form 7（コンタクトフォーム）の項目の追加・変更・削除の方法について
フォームでのユーザーの入力する内容を追加・変更・削除する方法を紹介しています。また、そういった場合にきちんと届くメールの内容に反映される方法も併せて紹介しています。ラジオボタンやセレクトボックスやチ…
-
01:59Contact Form 7（コンタクトフォーム）でメールの届く先を設定する方法！
意外とメールが届く先を変更できないと思っている方が多いですが、簡単に変更することができます。初期設定ではなく、任意のアドレスを設定いたしましょう。
-
05:05onclickとaddEventListener clickの違いについて解説！この２つは微妙に意味が違います。
on◯◯とaddEventListenerで定義されたイベントの違いについて説明しています。意外と知らずにいる方も多いので、この機会に知っておきましょう！
-
10:09CSSで変数を定義できる「カスタムプロパティ」を紹介！よく使う値を定義して効率化しましょう！
近年CSSでも、Sassなどのように変数を定義できるようになりました！カスタムプロパティ（CSS custom properties for cascading variables）といいます。今回…
-
06:23メディアクエリーのhoverについて解説！マウスがホバーできるデバイスでのみアニメーションさせる方法！
マウスを乗せることができるPCなどのデバイスでのみ、CSSのhoverの指定をしないと、スマホなどではタップした瞬間にアニメーションが動いてしまいます。今回の動画では、そういったことを防ぐための書き…
-
11:42CSSだけで、ページ内スムーススクロールが実装できる！scroll-behaviorについて解説！
以前は、JSでしかできなかったページ内スムーズスクロールが、CSSのみで実装できるようになりました！この動画では、・scroll-behavior・scroll-margin-topを使って、実装し…
-
18:17最新版！初心者向け！JavaScriptの有名なスライダーライブラリ「Swiper（スワイパー）」を使って、簡単にスライダーアニメーションを実装してみましょう！
ウェブサイトの制作においてスライダーアニメーション（slider animation）は必要不可欠なものになってきました。ただ、自力で１から実装するのは困難を極めるので、今回紹介するようなJSのスラ…
-
16:07カスタム投稿を簡単に追加できる！Custom Post Type UIの使い方紹介！カスタムタクソノミーの設定方法も
functions.phpに記述して、カスタム投稿を管理することは可能ですが、記述量が多いので大変です。この「Custom Post Type UI」というプラグインを使えば、簡単に分かりやすくカス…
-
05:10ワードプレスで、バックアップを自動で定期的に取ってくれる！UpdraftPlus 紹介
ワードプレスで、定期的にバックアップを取ってくれるプラグインは他にもありますが、今回は復元のしやすい、UpdraftPlus（アップドラフトプラス）を紹介します。
-
18:24Sassのファイル分割@useと@forwardの使い方！前編
これまでファイルを分割し他のファイルに読み込ませるには、@importという記述でしたが、廃止になりました。新しく使えるようになったのが、この@useと@forwardです。しっかりと覚えて、ファイ…
-
14:43初心者向け！SASSをCSSに変換して、使ってみましょう！Dart sass対応の「Live Sass Compiler（ライブサスコンパイラー）」
Visual Studio Code（ビジュアルスタジオコード）というエディターを使って、簡単にSassをCSSに変換（コンパイル）してみましょう。また、Sassの便利なWebツールも紹介していきま…
-
09:26ワードプレスの投稿一覧ページなどで、ページネーションを自動生成する方法！前編（全２回）
この動画では、アーカイブページやカテゴリーに紐づく一覧ページなどで、ページネーションを自動生成する方法を紹介しています。意外と複雑な関数などを使う為、初心者がつまづきやすいポイントなのでこの動画でし…
-
04:18ワードプレスでアーカイブページ・投稿一覧ページを作る方法解説！
archive.php で専用の投稿一覧ページの作り方を紹介しています。functions.phpに記載すべきことや、やらなくてはいけないことも解説しています。
-
13:37CSSの便利な単位 vw, vh, vmin, vmax 解説！
CSSでも比較的新しい単位 vw, vh, vmin, vmax を紹介しています。今までJSを使わないと計算できなかった面倒な処理をCSSのこの単位を使えば簡単に実装することができます。是非覚えて…
-
21:59CSSの便利な関数 min, max, clamp（クランプ） 解説！
これまでメディアクエリ（@media）を細かく指定しないとできなかったり、max-width, min-widthなどを組み合わせないと出来なかった処理を簡単にできるようになりました。- min関数…
-
08:45CSSの便利なプロパティ max-content, min-content, fit-content 解説！
内包する文字列に応じたサイズが指定できる３つのプロパティを紹介しています。- max-content- min-content- fit-content今まではHTMLを増やすなどで対応していたのを…
-
08:54要素の最大値・最小値を設定できる、max-width, min-width, max-height, min-height などについて学びましょう！
この動画では、画像や動画などにも使用できる、サイズの最小値・最大値が設定できるプロパティについて説明しています。- max-width- min-width- max-height- min-hei…
-
22:09GSAP ScrollTrigger（スクロールトリガー）実践編！様々な要素を同時に動かして、より印象的なアニメーションを作る。第１回目（全２回）
※後編の動画ページに、完成版のコードをダウンロードすることができるリンクを用意しています！GSAPやScrollTriggerの動画をこれまで配信していますが、今回は多くの機能を取り入れて、より実践…
-
08:25スクロール量に応じて要素のクラスを切り替える toggleClass（トグルクラス） 解説！ GSAP ScrollTrigger #7
ScrollTriggerでおこなう制御以外で、クラスの付け外しをすることで何か要素の状態を変更したい場合があります。このtoggleClassはそういった時に対応できるオプションです。
-
12:39スクロールに紐づいたアニメーション実践編！GSAP ScrollTriggerのscrubとTimelineを使ってみましょう！ 全２回（第１回目）GSAP ScrollTrigger #5
この動画では、GSAPのスクロールトリガーの技術である、scrubとTimelineを使った実践的なコーディング方法を学んでいきます。今回は、ファーストビューで通常のGSAPのアニメーションをおこな…
-
09:48スクロールとアニメーションの進行度を同期！GSAPのScrollTriggerでscrub, end の使い方を紹介！ GSAP ScrollTrigger #3
GSAPのスクロールトリガーでスクロールとアニメーションの同期ができる、scrubなどについて学んでいきましょう！この技術を学ぶことで、パララックスなどの演出もできるようになります。
-
16:49GSAPのScrollTriggerを読み込んで、基本的な使い方を覚えていきましょう！ GSAP ScrollTrigger #2
まずははじめの一歩。GSAPとScrollTrigger（スクロールトリガー）を読み込み、基礎的な考え方や記述方法などを学んでいきましょう！動画内で説明していた、GSAPの各URLはこちらhttps…
-
04:44パララックスや、スクロールと紐づいてアニメーションできるGSAPのScrollTrigger（スクロールトリガー）の機能や実例を紹介！GSAP ScrollTrigger #1
この動画から、ScrollTriggerについての解説をいくつかの動画に分けて配信していきます。初回の動画では、実例や公式サイトのコンテンツなどの紹介をしています。JavaScript（JS）を基礎…
-
11:02タグ・要素の挿入をすることができる、３つのメソッドappendChild, before, afterを紹介
JSにおいてタグを挿入する際によく使う、・appendChild・before・afterメソッドについて、それぞれ実践的に解説していきます。
-
07:54簡単にタグを挿入できる insertAdjacentHTML メソッドの紹介！
createElementメソッドでタグを生成し、appendChildなどでタグを挿入する方法がありますが、insertAdjacentHTML（インサートアジェーソン）はもっと簡単にタグを挿入す…
-
10:16for文の中で処理を飛ばしたり、処理を止める、continueとbreakについて解説！
for分や、for..of、for..in 文で使える・continue・breakについて説明しています。これらの処理を覚えると、より様々な処理を行えるようになりますので、是非覚えて活用していきま…
-
15:20CSS Grid 実践！メディアサイトのようなレイアウトを組んでみましょう！レスポンシブにも対応！ 全２回（第１回目）
この動画では、CSS Gridを活用した実践的な内容を紹介しています。いくつかの記事が並ぶようなサイトを想定したコーディングをしながら、レスポンシブ対応を考慮した上で２回に分けて解説していきます。動…
-
07:45CSS Gridで配置した要素の順番を任意の順にする、order（オーダー）について解説！ #8
Flexboxでも使うことができますが、CSS Gridでも要素の順番を任意に変更することができる、orderを指定することができます。この動画では、設定の方法と実際の動きについて見ていきます。
-
11:34CSS Gridで範囲外（コンテナーの外）の幅を指定する、grid-auto-rowsとgrid-auto-columnsについて解説！ #7
grid-template-rowsやgrid-template-columnsで指定した外側に要素が配置されることがあります。もしくは、表示される要素の数が決まっていなくて、何列になるのか分からな…
-
12:11CSS Gridでエリア名を指定して、要素を自由に配置する方法！ #6
この動画では、CSS Gridのエリア名を指定することができるプロパティを使って、自由に要素を配置することについて紹介しています。様々な指定の１つですが、覚えておくと便利な機能です！
-
18:31CSS Gridでライン番号を指定して、要素を自由に配置する方法と様々な指定方法を紹介！ #5
CSS Gridには、順番に要素を配置する以外に、自由に配置する方法があります。今回は番号を指定して、要素を配置する方法を紹介していきます。プロパティは以下について紹介しています。- grid-ro…
-
07:02CSS Gridで要素（アイテム）の間に余白をgapで設定する！ #4
これまで格子状に並べてある要素と要素の間に余白を設定する場合はmarginなどが主流でしたが、gapという簡単に余白を指定できるものを使って、簡単に設定できるようになりました。この動画では使い方と、…
-
23:39CSS Gridで横幅や縦幅を指定できる、grid-template-columnsとgrid-template-rows について紹介！その他特殊な単位や関数も！ #3
この動画では、CSS gridで列と行の数やサイズを定義できる以下プロパティを紹介しています。・grid-template-columns・grid-template-rows・grid-templ…
-
23:03サイトに雪を降らせるアニメーションをGSAPを使って実装してみましょう！ 全２回（第１回目）
※後編の動画ページに、完成版のコードをダウンロードすることができるリンクを用意しています！今回は、GSAP（アニメーションライブラリ）を使って、雪を降らせるアニメーションを作ってみます。画像を使わず…
-
08:52CSS Grid（グリッド）の各用語と考え方の解説！グリッドコンテナー・グリッドアイテムとは？ #2
今回の動画では、CSS Gridを検証しやすいFirefoxを使って、各用語の解説をおこなっています。・コンテナー・アイテム・ライン・セルについて解説しています。CSS Gridの記事などを調べる時…
-
06:02CSS Grid（グリッド）解説！CSS Gridとはなんなのか？どういう場面で使われるのか？などを紹介します！ #1
今回からいくつかの動画でCSS Gridのシリーズを配信していきます。第１回目のこちらの動画では、CSS Grid（グリッド）とはなんなのか？どういった部分で使われるのか？を紹介していきます。要素を…
-
11:23CSSでアスペクト比（縦横比）を簡単に指定できる、aspect-ratio解説！画像や動画の比率を簡単に設定できるようにしましょう！
今回は、比較的新しいCSSであるaspect-ratioについて紹介しています。aspect-ratioの簡単な使い方・考え方・複数の書き方についてお話ししていきます。動画内で紹介していた、obje…
-
07:09下にスクロールでヘッダーを隠し、上にスクロールでヘッダー表示させる機能を実装してみましょう！全２回（第１回目）
この動画では、JavaScriptとCSSを使ってページの途中でスクロールを上下にした際に、ヘッダーの表示を切り替えるアニメーションを実装していきます。第２回目の動画はこちらhttps://fact…
-
12:17１つのページで複数のswiper（スワイパー）を動かす方法！
この動画では、ページ内で複数のSwiperを動作させる方法を紹介しています。やり方としては簡単ですが、意外と変数などを分けなければならないことは調べても出てこないので、是非この動画で学んでいきましょ…
-
10:47pictureタグとsourceタグについて解説！メディアクエリではなくて、HTMLタグで画像を切り替えてみましょう！
この動画では、比較的新しいタグである・picture（ピクチャー）タグ・source（ソース）タグについて説明しています。sourceタグに記述することができる・media属性・type属性について…
-
06:32最新のFont Awesome（フォントオーサム）バージョン６の読み込み方法と、アイコンの探し方について解説！
以前別の動画でも読み込み方と使い方は紹介しましたが、公式サイトのUIなどが刷新されたので、再度こちらの動画で説明しています。動画内で紹介していた、過去のFontAwesomeの動画は以下です。htt…
-
31:14クリックすると、たくさんの箱が集まってできていくようなグローバルメニューをGSAPで作ってみましょう！ 全２回（第１回目） ※後編は動画の概要欄にあります
※後編の動画ページに、完成版のコードをダウンロードすることができるリンクを用意しています！今回の動画では、画面のサイズに応じてJavaScriptで箱を作り、それをメニューを開く際にランダムに表示さ…
-
14:02クリックしたら、星が散りばめられる「クリックエフェクト」をGSAPで実装してみましょう！全２回（第１回目） ※後編は動画の概要欄にあります
※後編の動画ページに、完成版のコードをダウンロードすることができるリンクを用意しています！この動画では、クリックした座標をJSで取得し、そこを中心にアイコンを外側に広がるように表示させてみます。動画…
-
24:12自動で円形にメニューを並べて、順番にアニメーションさせる方法！ 全２回（第１回目） ※後編は動画の概要欄にあります
※後編の動画ページに、完成版のコードをダウンロードすることができるリンクを用意しています！この動画ではJavaScriptのアニメーションライブラリ「GSAP」を使って、開閉するメニューを実装します…
-
11:15テキストアニメーション実装！GSAPで一文字ずつ色や位置をランダムに配置して、その後アニメーションしながらフェードアウトする！ 全２回（第１回目） ※後編は動画の概要欄にあります
※後編の動画ページに、完成版のコードをダウンロードすることができるリンクを用意しています！この動画では、一文字ずつ色や位置や角度をランダムに設定したものを段々と整列させ、その後文字列の両端から非表示…
-
19:22丸をJSで生成して、テキストと一緒にアニメーションさせてみましょう！ 全２回（第１回目） ※後編は動画の概要欄にあります
※後編の動画ページに、完成版のコードをダウンロードすることができるリンクを用意しています！JavaScriptとCSSを組み合わせて、図形とテキストを組み合わせたアニメーションを実装してみましょう！…
-
11:51クリックした所から広がるようにGSAPでアニメーションしてみましょう！ 全２回（第１回目） GSAP #15
この動画では、staggerの機能を使ったインタラクティブなアニメーションの実装を紹介しています。staggerの・grid・axis・from・amount・yoyoEaseなどを使って、より高度…
-
37:58GSAPのイージング（easing）について解説！アニメーションのしかたを制御して、様々な動きを表現できるようにしましょう！ GSAP #6
※この動画は内容を修正したものを再掲載したものです。この動画ではアニメーションの始まりから終わりまでの変化のしかたを制御できる「イージング」について説明しています。・in, out, inOut・p…
-
14:06GSAPで、簡単に複数の要素をズラしてアニメーションさせる方法を学びましょう！全２回（第１回目） GSAP #5
今回はGSAPのstaggerというものを使って、delayを少しずつズラしていく処理を簡単に書く方法を説明していきます。第１回目のこちらの動画では、まず基本的なHTMLとCSSを組んでGSAPのt…
-
29:40GSAPでよく使うアニメーションの動きと、実際の指定方法を解説！transformやopacityなど GSAP #4
この動画では、ちょっとわかりにくいtransformの・translate（移動）・scale（伸縮）・rotation（回転）・skew（歪み）それぞれのGSAPにおける指定方法と動き方の解説を主…
-
07:45GSAPで一番基本的なduration（アニメーション時間）とdelay（アニメーション開始時間の遅れ）について解説！ GSAP #3
CSSで言うと、・transition-duration・transition-delay・animation-duration・animation-delayにあたる、duraitonとdelay…
-
18:33GSAPでよく使う基本の４つのメソッド（to, from, fromTo, set）について紹介！ GSAP #2
JSのアニメーションライブラリ「GSAP」の導入と、基本的な４つのメソッドについて紹介しています。特に４つ目のsetについては使い方が分からない方も多いので、是非動画で覚えていきましょう！trans…
-
13:38JavaScriptのアニメーションライブラリ「GSAP」を紹介！まずは機能とできることを見ていきます GSAP #1
様々なサイトでよく使われている、GSAP（GreenSock Animation Platform。読み方はジーサップ）について紹介します！CSSやSASSだけでは難しいアニメーションの制御ができる…
-
18:29よくある、郵便番号から住所自動入力を実装する方法を紹介 1/2
コンタクトフォームや会員登録の画面などでよく見かける、住所の自動登録の実装をしていきます！第１回目のこの動画では、簡単な見た目とJSを書いていきます。２つ目の動画は会員専用です。登録は以下から出来ま…
-
27:51fetch（フェッチ） API を使って、外部サイトやローカルファイルを読み込んで、HTMLに出力してみましょう！
今回は、fetchの基本的な流れや仕組みを解説した上で、外部サイトや、ローカルファイル（テキストファイルやjsonファイル）を読み込んで、HTMLなどに出力する流れまでを見ていきます。今回呼び出す外…
-
15:18画像などを上手く表示できる、object-fit・object-positionについて解説！
以前はbackground-sizeやbackground-positionでしかできなかった表現を新しく登場した・object-fit（オブジェクトフィット）・object-position（オブ…
-
27:16初心者向け！CSS Flexbox（フレックスボックス） 実践編。４つのよくある基本的なレイアウトをFlexboxで組んでみましょう！
初心者の方に講義をしていると、よくflexboxの活用の仕方を聞かれます。CSSのflexboxはとても便利なものですが、機能も多くてなかなか活用が難しいのだと思います。この動画では初心者向けに簡単…
-
10:49JavaScriptで特定のaタグのみtarget="_blank"をつける方法！（特定の属性値を持つタグに属性を付与する方法）
サイト制作をしていると、特定の条件下においてタグに特定の処理をしたいことがあります。この動画では、aタグのhref属性がhttpから始まる場合にのみ、別のタブで開くtarget属性を指定する方法を紹…
-
20:42なぜ意図せずデータが同期する！？JavaScriptにおける値渡しと参照渡しについて解説！
JSで配列やオブジェクトを扱っていると、意図せず別の変数に格納したデータが同じものになってしまうことがあります。この動画では、なぜこういったことが起こるのか？そしてどうやって解決すれば良いのか？を解…
-
17:00JavaScriptで文字列を切り取ることができる、slice, substring, substr メソッドの解説！
文字列を切り取って、処理を返すメソッドは大きく・slice（スライス）・substring・substrがありますが、これらの処理の違いや挙動の違いなどをこの動画で説明していきます！
-
13:31JavaScriptで、ある配列を元に編集された別の配列を生成する mapメソッドについて解説！
今回は、違う配列データに手を加え他の配列を作ることがmap（マップ）メソッドについて解説しています。実践的なデータを元に、mapを使用するとどういった結果を得ることができるのか？を一緒に見ていきまし…
-
17:57JavaScriptで配列内のデータを削除・挿入・差し替えることができる splice メソッドについて解説！
JSで配列のデータを追加・削除できるメソッドは他にもありますが、spliceを使用することで、さらに効率的にこういったことができるようになります。この動画では、実践的なデータを編集しながら、処理の流…
-
22:20CSS Filterプロパティについて解説！要素や画像にエフェクトをつけて、さまざまな表現をしてみましょう！
今回は、CSSのみで色々なエフェクトをかけることができる、CSSのfilter（フィルター）プロパティについて説明しています。このプロパティは・blur（ぼかし）・brightness（明るさ）・c…
-
17:24とても便利なposition stickyについて解説！特定の条件でスクロール時に要素を固定しましょう！
比較的新しい、CSSのpositionプロパティ「stikcy」について学びましょう！この値の特徴を学ぶことで、absoluteとfixedを組み合わせたような機能を実装することができます！
-
21:04JSではなくて、HTML側にデータを定義できる！カスタムデータ属性（data-◯◯）の活用方法と実践的な活用法について
サイトを制作していると、JavaScriptではなくHTML側にデータを定義した方が管理が楽な場合があります。そういった時に使えるのが、このカスタム属性です！この動画では実際の設定方法や活用方法など…
-
23:42JavaScriptで配列の中身をソート（並び替え）させる sort メソッドを学びましょう！
今回は配列の内容をsortさせるメソッドについて紹介しています。降順・昇順に並べ替える方法の他、任意の順に配列内を並び替える方法までを実践的に紹介しています。配列についての動画はこちらhttps:/…
-
11:43プロが教える！SEO対策解説！SEO（Search Engine Optimization）とは？検索エンジン最適化するメリットとは？
この動画では、SEOとはそもそもなんなのか？やどういったところに使われているのか？などについて解説しています。SEO対策について知っていると様々なメリットがありますが、意外と知っている人が少なかった…
-
22:07【新サービスリリースのお知らせ】直感的にアニメーションを生成できる！CSS transition ジェネレーター
サービスURLはこちらhttps://front-end-tools.com/generateTransition/英語版はこちらhttps://front-end-tools.com/en/gen…
-
15:29find, findIndexの使い方解説！JavaScriptで配列から条件に合うデータやindex（位置）を簡単に取得
【追記】以下の２つも使えるようになりました！- findLast() 条件に合う最後のものを取得- findLastIndex() 条件に合う最後のindexを取得今回は、配列から条件に応じて目…
-
16:33JSのsome（サム）とevery（エブリー）メソッドについて解説！配列をもっと効率的に扱ってみましょう！
今回の動画では、配列を効率的に扱うことができる、someとeveryメソッドについて解説しています。配列内のデータがある条件に１つでも一致しているかを判定するsomeと、配列内のデータがある条件に全…
-
09:31オブジェクト（連想配列）を繰り返し処理することができる、for...in 文を紹介！
オブジェクト（連想配列）を反復処理させるには、Object.keysとforEach文などを使う方法もありますが、今回はもう少し短く書くことのできる for in文について説明しています。様々な繰り…
-
57:24ページ内スムーススクロールと、モーダルメニューをクリックした後の自動メニュー閉じについて！
今回はJavaScriptのwindow.scrollToメソッドを使って、シンプルなページ内スムーススクロールを実装する方法を紹介しています。単にヘッダーのメニューにページ内リンクを設定する方法と…
-
10:58if, else文を１行で書ける！三項演算子について解説！JavaScriptをもっと効率的に書く方法。
この動画では、if文を短縮して書くことができる、三項演算子（条件演算子）について説明しています！他のプログラミング言語でも採用されているこの書き方を学んで、簡単なif文を今後はもっと効率よく書いてい…
-
07:41JSのオブジェクト（連想配列）のキー（key）とバリュー（value）をそれぞれ配列で取得する、Object.keys, Object.values, Object.entries について解説！
JavaScriptでオブジェクトを扱っていると、keyやvalueのみのデータを取得したい場合があります。そういった時に使えるのが、・Object.keys()・Object.values()・O…
-
20:46JSで配列をシャッフル（shuffle）する（ランダムに並べ替える）方法！フィッシャー・イェーツのアルゴリズム（Fisher–Yates shuffle）
JavaScriptで配列内の要素をランダムに並べ替える際、ライブラリを使うことでも実現できますが、意外と数行のコードで実現できてしまいます。今回はフィッシャーイェーツのアルゴリズムと呼ばれるものを…
-
24:39HTML/CSSで奥行きのある立方体を描画してみましょう！１からコーディングするチュートリアルを公開
HTMLやCSSで３D表現をすることが出来ますが、実際どのようにコーディングしたら良いか分からないこともあると思います。この動画ではまず基本的な立方体をHTML / CSSのみで１から作ることによっ…
-
15:01CSSで3Dの表現をするには？transform-styleとperspectiveについて紹介！
近年、CSSやブラウザの対応によってWebGLを使わなくてもCSSのみで3Dの表現ができるようになりました。ただし、transformで3Dの指定を施したとしても、立体的にはなりません。この動画では…
-
14:12JavaScriptで配列内のデータを順番に足していく reduce, reduceRightメソッドについて解説！
配列内の数値や文字列を足していく（連結していく）ために便利なreduce（リデュース）とreduceRight（リデュースライト）の紹介です！数値であれば、総数を計算させることができますが、文字列だ…
-
14:43【新サービスリリースのお知らせ】サンプルから選択して編集できる！ボタンジェネレーター
サービスURLはこちらhttps://front-end-tools.com/generateButton/英語版はこちらhttps://front-end-tools.com/en/generat…
-
18:57filter関数について徹底解説！JSで効率よく配列データをフィルタリングして、目的の配列に作り替えましょう！
今回は、JavaScriptで配列をフィルタリングできるfilter関数について説明しています！ある配列から特定の条件で別の配列を作ることができるとても便利なものなので、是非この動画で学んでいきまし…
-
04:38【新サービスリリースのお知らせ】CSSで三角形・矢印作る！三角形ジェネレーター
サービスURLはこちらhttps://front-end-tools.com/generateTriangle/英語版はこちらhttps://front-end-tools.com/en/gener…
-
09:05【新サービスリリースのお知らせ】CSSで枠線をつける！border ジェネレーター
サービスURLはこちらhttps://front-end-tools.com/generateBorder/英語版はこちらhttps://front-end-tools.com/en/generat…
-
09:43【新サービスリリースのお知らせ】CSSで変形を制御する、transform（トランスフォーム）ジェネレーター！
サービスURLはこちらhttps://front-end-tools.com/generateTransform/英語版はこちらhttps://front-end-tools.com/en/gene…
-
47:37JavaScriptでプラグインを使わずに（画像を切り替える）スライダーを作ってみましょう！
簡単に画像を切り替えるくらいのスライダーは、プラグインの使い方を学習するよりも自作したほうが早く作れることがあります。この動画ではHTML, CSS, JavaScriptを使って１からギャラリーの…
-
09:29JavaScriptで子要素・兄弟要素・親要素を取得する方法！
この動画では特定の要素の子要素・兄弟要素・親要素を取得する方法を解説しています。・子要素 children・最初の子要素 firstElementChild・最後の子要素 lastElementCh…
-
10:42JavaScriptで切り捨て・切り上げ・四捨五入・絶対値・べき乗をする方法
JavaScriptで様々な数値の処理を学んでいきましょう！・切り捨て Math.floor / Math.trunc・切り上げ Math.ceil・四捨五入 Math.round・絶対値 Math…
-
10:26CSSだけで画像の上にグラデーションや背景パターンを重ねる方法！
PhotoShopなどで背景の上にグラデーションを合成することはできますが、今回はCSSのbackground-imageとlinear-gradientなどを使ってCSSのみで実装する方法を紹介し…
-
08:57CSSだけでテキストにマーカーを引いたような線を実装する方法！
画像などで文字にマーカーを引くことはできますが、今回はlinear-gradientの技術を応用して、文字にCSSのみでマーカーを引いてみましょう！
-
13:59JavaScriptで属性（attribute）を設定（setAttribute）・取得（getAttribute）・確認（hasAttribute）する方法と活用例！
今回はHTMLタグに設定する属性を、新たに追加したり取得したり存在を確認するための方法を紹介しています。活用例としては、外部サイトへのリンクに別タブで開くtarget="_blank&qu…
-
31:30CSSだけで背景パターン・模様を生成する方法！グラデーションのrepeating（リピーティング。繰り返し）プロパティを使って、様々なパターンを作ってみましょう！
今回は、グラデーションを指定する為のCSSのみで、ストライプなどの背景パターンを作る方法を紹介しています。linear-gradient・radial-gradient・conic-gradient…
-
16:23JavaScriptでCSSを直接、変更・削除・取得する方法！様々な方法で、JSでデザインを変更しましょう！
他の動画では、JavaScriptでクラスを切り替えることによって要素を表示・非表示したり、デザインを変更することを紹介してきましたが、今回の動画ではstyleメソッドやcssTextメソッドを使っ…
-
08:55JavaScriptで繰り返し文！while（ホワイル）文について解説！for文との違いと活用方法
プログラミング言語でよく使われる、while文について説明しています。for文と比較すると、シンプルですが書き方や活用の方法はどのように違うのでしょうか？基本的な書き方から実例までを簡単に説明します…
-
45:47パララックス（視差効果）について解説！Rellax.jsでスクロールエフェクト（効果）をかけて、奥行きのある演出をしてみましょう！
今回は、最近のサイトでよく見かけるパララックス（parallax）・視差効果の実装方法について解説しています。自前で実装するのは難しいため、Rellax.js（リラックス）というjQuery（ジェイ…
-
14:01CSSで扇形にグラデーション！（conic-gradient） 時計回りに色を段々と変化させる方法を解説します！
CSSでは様々なグラデーションをかけることができますが、今回は扇形にグラデーションをかける方法を学びます。・色を複数指定する方法・中心位置を変更する方法・グラデーション開始位置を変更する方法などにつ…
-
17:55CSSで円形グラデーション！（radial-gradient） 中心から外側に向かって、グラデーションさせる方法を学んでいきます！
CSSでは様々なグラデーションをかけることができますが、今回は円形にグラデーションをかける方法を学びます。・色を複数指定する方法・中心位置を変更する方法・グラデーション開始位置を変更する方法などにつ…
-
14:54初心者向け！JavaScript（ジャバスクリプト）で要素を取得する基本的な方法を紹介！
JSでクラスを追加・削除したり、スタイルを変更したりする際には、要素を取得する必要があります。今回は、よく使う基本的なものを解説しています。この動画では、特に・getElementById・quer…
-
16:44初心者向け！フォルダやファイルの階層構造と指定の方法まとめ！
この動画では初心者向けにフォルダやファイルの階層構造と指定方法を説明しています。ファイルのパスが正しくないと、画像などが表示されないため、パスの基本的な考え方を説明します。具体的にはHTMLでの画像…
-
07:09初心者向け！JavaScriptの配列を追加・削除してみましょう！
JavaScript（ジェバスクリプト）で、配列を扱うと追加や削除をしなければならない場面があります。この動画では、・push・unshift・pop・shiftメソッドそれぞれの紹介と実例を紹介し…
-
15:58JavaScriptで使う代入演算子について解説！++ や += がどんな意味なのか？どうやって使うのか？
JavaScriptでコーディングをしているとよく見かける、++, --, +=, -=について解説しています。初心者があまり気にしないで使っていることが多い、この辺の演算子をきちんと理解することに…
-
20:07CSSのcalc関数について解説！異なる単位の計算をJavaScriptを使わずにする方法を学びましょう！
サイト制作をしていると、単位の違う計算をしなければ目的のデザインを作れないことがあります。この動画では、そんな時に使えるCSSの「calc」（カルク）関数の使い方・考え方を紹介しています。また、実際…
-
16:41初心者向け！box-sizingについて解説！活用の方法を理解して、HTML / CSSのコーディングをやりやすくしましょう！
サイト制作でHTML / CSSを使用する際、widthやheightをしているのに何故かそれ以上のサイズになってしまうことってありませんか？それは、paddingやborderの値が影響してしまっ…
-
08:55JavaScriptのfor of 文について解説！そもそもfor ofって何？という説明から実例まで！
※動画内で、forEachとの比較をしていませんが、forofのメリットとしてはbreakやcontinueが使える点です。普段配列などを順番に処理する際は、for文を使うと思いますが、この動画では…
-
12:51【新サービスリリースのお知らせ】複雑なグラデーションを初心者でも簡単に作ることができる！CSS ジェネレーター！
サービスURLはこちらhttps://front-end-tools.com/generateGradient/英語版はこちらhttps://front-end-tools.com/en/gener…
-
08:33【新サービスリリースのお知らせ】背面の要素にエフェクトがかかる！CSS backdrop-filter（フィルター）生成（ジェネレーター）ツール！
サービスURLはこちらhttps://front-end-tools.com/generateBackDropFilter/英語版はこちらhttps://front-end-tools.com/en…
-
09:48【新サービスリリースのお知らせ】画像などが簡単に加工できる！CSS Filter（フィルター）生成（ジェネレーター）ツール！
サービスURLはこちらhttps://front-end-tools.com/generateFilter/英語版はこちらhttps://front-end-tools.com/en/generat…
-
18:58【新サービスリリースのお知らせ】コピペで簡単！box-shadow（ボックスシャドウ）生成（ジェネレーター）ツール！
サービスURLはこちらhttps://front-end-tools.com/generateBoxshadow/英語版はこちらhttps://front-end-tools.com/en/gene…
-
13:16【新サービスリリースのお知らせ】コピペで簡単！text-shadow（テキストシャドウ）生成（ジェネレーター）ツール！
サービスURLはこちらhttps://front-end-tools.com/generateTextshadow/英語版はこちらhttps://front-end-tools.com/en/gen…
-
09:44レスポンシブ対応（スマホや大きな画面に対応）したスライダーをSwiper（スワイパー）で作る方法！
スライダーを扱っていると画面幅に応じて要素数を増減させたり、見せ方を変えたくなることがあります。この動画では。スワイパーのオプションを使って要素数を変更したり、余白を変更する方法を紹介しています。S…
-
09:26立体的な箱が回っているように見えるスライダーの実装方法紹介！Swiper（スワイパー）で奥行きのある印象的なアニメーションを実装してみましょう！
今回はかなり印象的になる、奥行きのあるスライダーの実装方法を紹介しています。この動画で紹介しているような3D表現はCSSやJavaScriptの実装だとなかなか手間ですが、Swiperのオプションな…
-
08:38少しずつ画像が変化する、スライダーの作り方解説！JavaScriptの有名プラグイン「スワイパー（Swiper）」と簡単なオプション変更で、よくあるアニメーションを実装してみましょう！
今回は、少しずつ画像や要素が変わっていく、Swiper（スワイパー）のfadeオプションについて解説しています。スライダープラグインで少しずつ変化するアニメーションが組めることを知らない方も多いよう…
-
18:26【JavaScriptでパスワード生成ツールを作る！】英語の小文字と大文字を含めたパスワードを生成できるようにJavaScriptを書き換えてみましょう！ #2
JavaScriptでWebアプリケーション作成を作ってみるシリーズの動画です。今回はシリーズ第二弾で、前回までパスワードが数字のみだったものに加えて英字を追加してみます。英字を追加すること自体は簡…
-
33:34【JavaScriptでパスワード生成ツールを作る！】パスワードジェネレーターを１から作ってみましょう！ まずはファイルの作成や簡単なパスワード生成から #1
JavaScriptでWebアプリケーション作成を作ってみるシリーズの動画です。ライブコーディングをおこないながら、実際にアプリケーションを作っていきます。実践的なツールを作ることでJavaScri…
-
17:24配列を効率よく処理する！JavaScriptのforEach（フォーイーチ）解説！
for文をもっと書きやすくするJavaScriptのforEach文の紹介動画です。３つの引数（ひきすう）を取ることができるforEach文ですが、それぞれの意味や特徴、使い方などについて解説してい…
-
12:52テンプレートリテラル（テンプレート文字列）とは？ES2015（ES6）で追加された、文字列を扱う便利な構文を学びましょう！
今回はES2015で追加された、テンプレートリテラルについて説明しています。今までは文字列の中に変数を組み合わせる時に＋（プラス）記号をたくさん使っていましたが、この書き方を学ぶと、文字列連結する際…
-
10:42古いブラウザやIEに、新しいJavaScriptやCSSを対応させる方法！polyfill（ポリフィル）やBabel（バベル）とは？
JavaScriptはECMAScript2015やES6と呼ばれる新しいものがどんどん追加されています。CSSも同様にIEなどでは使えないものの、便利なプロパティが追加されています。こういったもの…
-
08:13新しいグーグルアナリティクス（Google Analytics4）の登録から設定までを紹介！2020年10月リリースの最新バージョン４について
SEO対策や、ECサイトのコンバージョン管理など、サイト運用に欠かせないGoogle analyticsについて紹介しています。2020年10月にバージョン４（version4）へと更新されたGoo…
-
24:21コマンドラインツール（Command Line Tool）概要。macのターミナルや、Windowsのコマンドプロンプトとはなんなのか？概要やメリット・基本的な使い方を紹介します！
GulpやWebpack、Gitなどフロントエンドを主に触っていても、基本的にコマンド操作をおこなうことでしか扱えないツールがあると思います（一部GUIツールもありますが）今回はその一番基本的なもの…
-
10:25windows（ウィンドウズ）10以降でbashをインストールして使えるようにする方法！
Windowsでコマンドラインを操作する場合、macやlinuxと違うコマンドになってしまいます。巷で流れている情報はmac向けのことが多いので、この動画ではwindows（10以降）の方向けに同じ…
-
19:37アロー関数について解説！ES6（ES2015）で追加された新しい書き方を学びましょう！
今回はJavaScriptのアロー（arrow）関数について説明しています。よく質問をいただくfunction()との書き方の違いや、thisの挙動の違い、また使い所やメリットなどについてお話してい…
-
16:04ヘッダーが固定されているページで、スクロールしたらヘッダーを表示・非表示する方法！
ファーストビューを効果的に表示したい際に、ヘッダーの表示・非表示をする方法を学んでいきましょう！JavaScriptとCSSを使えば簡単に実装することができます。動画内で紹介していた、ファイルのサン…
-
12:15ワードプレスでページが見つからない場合のページ（Not Found・404ページ）の作り方！
記事のURLなどを管理していると、意図せずリンク切れを起こしてしまい、ユーザーを離脱させてしまう場合があります。ワードプレス（Wordpress）ではそういったことを防ぐために、あらかじめ404ペー…
-
10:41独自テーマでウィジェット（widget）を設定・表示させる方法！複数設定や表示させる方法まで！
ワードプレスにおいてウィジェットは特徴的な機能ですが、今回は独自テーマで設定して、HTMLに出力する方法を紹介していきます。また、一箇所ではなく複数箇所で設定・表示する方法も学んでいきます。動画内で…
-
18:25独自テーマでカスタムメニューを設定・表示させる方法！ワードプレスサイトのヘッダーに実際に表示してみましょう！
独自テーマにおいて、サイト全体のメニューを簡単にダッシュボードで管理できるようにする為の機能「カスタムメニュー」を使ってみましょう。functions.phpで設定する方法から、呼び出したい任意の場…
-
12:20独自テーマでJavaScriptを、functions.phpを使って読み込ませる方法！
独自テーマにおいてJavaScriptを読み込ませる方法について紹介しています。今回は公式でも推奨されているfunctions.phpに記載する方法を使っています。また、wp_enqueue_scr…
-
10:40独自テーマでサイドバー（sidebar.php）を設定・表示する方法と、レスポンシブ対応の為のCSS
今回はブログサイトなどでよくあるサイドバーの作り方について紹介しています。具体的なファイルの作成方法から呼び出し方、HTML/CSSを用いたコーディング例を紹介しています。また、スマホ対応時のCSS…
-
25:50独自テーマで、投稿と固定ページの詳細ページを表示する方法！
独自テーマを作る際の投稿ページや固定ページのコンテンツを表示させる方法を見ていきます。必須となる関数や書き方などがありますので、この動画で学んでいきましょう！ちなみにこの動画では基本的な部分しか紹介…
-
14:45独自テーマで、アイキャッチ・サムネイル画像を表示する方法！imgタグとbackground-imageで出力する手順を紹介！
投稿などのデータを出力する際の、アイキャッチ画像を出力する方法を紹介しています。the_post_thumbnailでimgタグ出力する方法とwp_get_attachment_url・get_po…
-
14:36初心者向け！PHP基礎。基本的な考え方と、書き方について解説！
※動画内では「page-phptest.php」ファイルに書き込み、表示していますが、front-page.phpやheader.phpなど、表示できるファイルであればどこに記載しても問題ありません…
-
27:44独自テーマでトップページに投稿データを表示させる方法
ワードプレス（Wordpress）の主要機能の１つである「投稿」をトップページにループ（while文）で表示させる方法について解説しています。各ワードプレスが用意している関数やメソッドの解説から、ル…
-
15:36型（type）とは？JavaScriptにおける型の紹介と扱い方、型変換の方法について紹介！
本やWeb上のドキュメントなどを読んでいると、「型」という言葉が出てくると思います。この型について初心者の方から多く質問をいただくので、今回基礎的な部分を紹介するための動画を作りました。他のプログラ…
-
45:16スクロールアニメーション！CSSとJSでカーテンが開くように要素を表示！
モダンなサイトで見かける、カーテンが開いていくような要素の表示アニメーションについて解説しています。CSSとJavaScriptをうまく組み合わせることによって実現できますが、少々難しい部分もあるの…
-
50:00初心者必見！様々な方法でHTML・CSSで要素を上下・左右真ん中にする方法！
HTML / CSSでコーディングをしていると、うまくレイアウトを揃えられないことはありませんか？この動画では、・インライン（inline）要素・インラインブロック（inline-block）要素・…
-
21:41ワードプレス（WordPress）の子テーマとは？そしてその設定方法・活用方法とは？
既存のワードプレステーマの細かい部分をカスタマイズしていきたい際には、子テーマというものを作らなければなりません。今回は子テーマとは何か？とその活用法などを紹介していきたいと思います。CSSの詳細度…
-
15:36どのブラウザでどのCSS・JavaScriptg使えるのか調べる方法！Can I Useの紹介と見方を解説
どのブラウザでどのCSS・JavaScriptが使えるのか知りたいことはありませんか？そういった時、Can I Useというサイトがあります。ただし、英語なのでなかなか抵抗がある人も多いと思いますの…
-
19:23Webフォント（Googleフォント API）を読み込んで、CSSで適用させる方法！
Web上でどの端末やブラウザでも同じ様にフォントを表示させるのはなかなか難しいですが、Webフォントだったら手軽に実装することができます。この動画では無料サービスであるGoogle fontを使って…
-
12:29CSSでフォントを指定する方法！font-familyについて解説
Web制作でも必ずと言って良いほど使う、フォントの指定について解説しています。また、初心者がなかなかわかりづらいフォントの優先度のお話や、ゴシック体・明朝体（serifとsans-serif）の違い…
-
31:10CSSで、記事（リンクなど）にマウスホバー（hover）したら画像を拡大・大きくするアニメーションの実装方法！
メディアサイトなどでよくある、記事にマウスを乗せた時に画像を大きくする処理について紹介しています。よくJavaScriptを使わないとできないのではないか？と質問を受けますが、HTML / CSSの…
-
16:43ワードプレス（WordPress）のテーマとは？テーマの追加・削除の方法と、テーマの検索方法・アップロードの考え方から方法までを紹介！
ワードプレス（WordPress）の基本的なシステムである「テーマ（theme）」について説明しています。テーマとは簡単に言うと「テンプレート」のようなものですが、テーマの大きな違いを画面を一緒にみ…
-
17:46ワードプレスって何？WordPressの機能や特徴を紹介！まずはどんなものかを知って活用していきましょう！
この動画で紹介している記事は以下で公開しています。https://factory-programming-mv.com/posts/whats-wordpress/世界の多くのシェアをもつCMS（C…
-
14:10SSL証明書の取得と、サイトを常時SSL化（常にhttpsで接続）する方法を解説！
今回はSEOやサイトの表示速度などにも関わるSSL化についての動画です。なかなか初心者の方には難しい設定かと思いますが、動画で一緒に学んでいきましょう！XSERVERの無料独自SSL設定の記事はこち…
-
13:37各言語のコメントアウトについて解説！メモをコード内に残しておいたり、コードを無効化する方法を紹介しています。
一時的にコードを無効化したり、コード内にメモを残しておきたいと思ったことはありませんか？コメントアウト機能を使えば多くの言語でこういったことが可能になります。さらにVSCodeではコメントアウトのシ…
-
16:26自分で作ったサイトを公開する方法！契約したサーバーと（FTP）接続して、ファイルを追加・変更・削除する方法を学びましょう！
せっかくホームページを制作しても、ネットに公開できなければいけません。この動画では、初心者がつまづきやすいサーバーと（FTP）接続してファイルをアップロードなどをする手順を紹介しています。今回はどの…
-
10:43サーバーにワードプレス（WordPress）を簡単にインストールしてすぐに使えるようにする方法！エックスサーバー（X SERVER）でのやり方を紹介！
ワードプレスを使おうと思っても、初心者の方はなかなかどうやって設定したら良いのか分からないと思います。この動画では、サーバーにWordpressをインストールし、簡単にサイト制作を始める準備を整える…
-
11:11初心者向け！ドメイン（domain）とサーバー（server）の紐付け・関連付けについて
初心者がつまづきやすい、ドメインとサーバーの紐付けの手順について説明しています。別の動画で説明している、お名前.comとエックスサーバー（X SERVER）の説明をしていますが、基本的な流れは別のサ…
-
52:47スクロールしたら要素をフワっとアニメーションして、表示させる方法を紹介！
動画内で紹介していた私のプロフィールサイトURLはこちらです。https://kazuma-takeda.com/Webページがスクロールされた際に、特定の要素がフワっと表示されるアニメーションの実…
ダウンロード有 -
10:13初心者向け！おすすめのレンタルサーバー契約手順紹介！オススメの理由と流れ、実際に使えるようになるまで
動画内で説明しているサービスURLはこちらhttps://px.a8.net/svt/ejp?a8mat=2ZLBND+DML78Y+CO4+6H729レンタルサーバーのサービスはたくさんありますが…
-
09:59初心者向け！おすすめの独自ドメインの取得方法と手順について紹介！
動画内で説明していたドメインのサービス（お名前.com）はこちらhttps://px.a8.net/svt/ejp?a8mat=2HHJ1S+FH9R02+50+2HEVMR今回はなかなか初心者の方…
-
32:51JavaScriptで日付を取得・表示などをするための方法とある日付までのカウントダウンをする方法
JavaScript（ジャバスクリプト）のDateオブジェクトを使って、今日の日時や曜日などを取得・表示してみましょう！基本が分かったら、明日の今の日時を表示したり、ある日付までのカウントダウン日を…
-
13:00CSSでグラデーションを実装してみましょう！linear-gradientを使って線形グラデーションさせる方法を紹介
グラデーションを直感的に生成できるツールを作りました！是非活用してみてください！https://front-end-tools.com/generateGradient/グラデーションは画像などを作…
-
52:24文字を１文字ずつアニメーションさせる方法と、そのバリエーション・考え方を紹介！かっこいいCSSアニメーションを実装できるようになりましょう！
transformについての動画はこちらhttps://factory-programming-mv.com/video/今回は、文字を1文字ずつアニメーションで動かす方法を紹介します。最近はアニメ…
-
11:43CSSだけで、文字列の省略を簡単にする方法！
JavaScriptなどでも実装できますが、CSSのみでも簡単に文字を途中で省略する方法はあります。今回はtext-ellipsisというプロパティを使って、記事の一覧に表示されている文字列を省略し…
-
14:05GoogleMap（グーグルマップ）の埋め込み方法と、CSSで大きさを整える方法！
今やウェブ制作・ホームページ制作では当たり前となった、グーグルマップの埋め込みとそのカスタマイズ方法について説明しています。PCとスマホのそれぞれの考え方についても触れています。Twitter（ツイ…
-
19:42初心者必見！９つのググり方（情報の調べ方）のコツ！効率的に世界中の情報にアクセスしましょう！
意外と皆さんが知らなくて困っているググり方（Googleなどの検索エンジンなどで、調べものをするやり方）についてお話ししています。標準でついているGoogleの様々な検索ツールやオプションですが、使…
-
22:49レスポンシブ対応・応用編！メディアクエリーをより深く知って、様々な大きさのスマホ・タブレットなどに対応していく方法を紹介します。
サイトによっては、スマホ・PCに限らずタブレット用のデザインも必要になります。そうすると、かなり複雑な構造なCSSを書いていかなければなりません。この動画では複数の条件を一度に指定する方法から、実際…
-
16:20Google Chrome（クローム） のよく使うショートカットを紹介！
ブラウザはPCを使う上で必ずと言って良いほど使うツールですが、意識してショートカットを使っている方は少ないのではないでしょうか？今回は、数あるショートカットの中からよく使うものをピックアップして、お…
-
11:56HTMLのform、textarea（テキストエリア）タグを解説！テキストを複数行入力してもらう為の場所を実装しましょう！ form#5
お問い合わせフォームなどでよく使う、textareaタグの使い方を覚えましょう！意外とみなさんが知らないtextareaの機能やそれをCSSで制御する方法なども解説しています。複数行テキストを入力し…
-
09:56HTMLのform！selectタグ・optionタグの使い方解説！ form#4
htmlのformでよく使う、selectタグoptionタグ（プルダウンメニュー）の実装の方法を紹介しています。それから、選択肢を表示する際にもっと見やすくする（optionをグループ化し、見出し…
-
19:56HTML form解説！inputタグのcheckbox（チェックボックス）, radio（ラジオボタン）基礎 form#3
HTMLのform（フォーム）でよく使う、チェックボックスとラジオボタンについて解説しています。この２つは設定しないといけないものが多く、若干複雑なので動画で繰り返し学び、慣れていきましょう！
-
25:52formのinputタグについて解説！よく使うtype属性を紹介し、実際の表示なども確認していきます！ form#2
HTML5以降から複雑になってきているformのinputについて解説しています。かなり種類が多いので、よく使うものを抜粋して紹介しています。それから、それぞれの機能やスマホで見たときにどう変わるか…
-
12:59formについて解説！基本的な考え方や、action, method, nameやコーディング例まで form#1
HTMLのformタグについて解説しています。どの属性やタグがどのような働きをしているのか？そして、マークアップする際の基本的考え方などについても紹介しています。動画内で説明していたdl, dt, …
-
11:57初心者向け！text-align徹底解説！テキスト以外にも有効な理由とその事例について解説！
※機材の関係で音量が小さくなっております。ご注意ください。レイアウトでよく使うtext-alignについて紹介しています！実はこのCSSプロパティは文字だけに効く訳ではありません！画像やaタグなどの…
-
20:11Visual Studio Code（VSCode）のよく使うショートカットなどを紹介！できるだけ無駄な動きを減らして、爆速コーディングに近づいていきましょう！
Visual Studio Code（ビジュアルスタジオコード）のよく使うショートカット 集を紹介しています。エディタにはショートカット が用意されていることが多いですが、VSCodeも例外ではあり…
-
15:43初心者向け！hタグ（h1・h2・h3など）の使い方・考え方について解説！
初心者がHTMLコーディングでつまづきやすいhタグについて解説しています。なぜ h1・h2・h3・h4・h5・h6タグがそれぞれあるのか？それぞれの使い分けは？h1タグは何回使って良いのか？などhタ…
-
13:54dl, dt, ddについて解説！実際のコーディング例とulとの違い、コーディング例まで！
※機材の関係などで、音量が小さくなっています。ご注意ください。dl（description list）, dt, ddタグのそれぞれの意味と使い方について説明しています。formやQ&Aなど…
-
19:24ユーザースニペット機能を使って爆速コーディング！Visual Studio Code（ビジュアルスタジオコード）の機能をフル活用しましょう！
Visual Studio Code（ビジュアルスタジオコード）のスニペット機能（ユーザー辞書のようなもの）を使って、効率の良いコーディングをするための環境作りをしていきましょう！動画ではHTML・…
-
20:00Visual Studio Codeのおすすめプラグイン（拡張機能）紹介！
VSCode （ビジュアルスタジオコード）に拡張機能を追加することによってさらに使いやすくしていきましょう！全般的に使えるものや、HTML・CSS、JavaScriptなどに使えるプラグインなども紹…
-
11:02Visual Studio Codeのデザイン（配色テーマ）変更や・ファイルアイコンのテーマ（アイコンのデザイン）変更の方法について解説！
VSCodeの見た目を変更する方法を紹介しています！デフォルトでは黒ベースのダークな感じですが、白ベースのライトな感じに変更したりダークテーマにおいても様々なものがあります。さらにHTMLやCSSな…
-
12:42Visual Studio Code！おすすめの初期設定解説！コーディングの環境を整えていきましょう！
※撮影時点での設定方法と現在の方法には若干の違いがあります。10:40あたりで触れているEmmetのVariablesの設定について、現在の手順は以下の通りです。1. 検索欄で「emmet vari…
-
21:33text-shadowとbox-shadow解説！文字や要素自身に色々な影をつけるには？
影をもっと直感的にCSSで生成するためのWebアプリを作りました！こちらもご活用ください！box-shadow ジェネレーターhttps://front-end-tools.com/generate…
-
13:58ページ内リンク解説！HTMLだけでページ内のリンクを実装してみましょう！
HTMLだけでページ内リンクを作る方法を解説しています。実際の動き方や活用の方法、URLとの関連性まで説明しています。※この動画ではスムーススクロールについては解説していません。
-
01:23:54【実践！サイト模写コーディング！初心者向け】 記事の一覧が並ぶサイトの作り方！解説しながらHTML/CSSを書いていきます！レスポンシブ（スマホ）対応まで！
サイトを１から作る練習を一緒にやっていきましょう！１回目の模写動画よりも少し複座なサイトを解説しながら模写しています（ただし、今回も前に私が作ったサイトです）実践的な為、分からないことがあれば下のH…
-
18:25多くのソフト（アプリ）で使えるショートカットキーを覚えて、爆速コーディングを目指す！
コピーやペーストを行う時、マウスやトラックパッドをいちいち使ってクリックしてやっていませんか？この動画ではどのアプリ（PCソフト）でも使える汎用的なショートカットキーを紹介しています。できるだけたく…
-
19:28ローディング画面を実装する方法！ページの読み込み中にローディングアニメーションを表示させてみましょう！
読み込みが遅いページに対してローディングアニメーション（loading animation）などを実装しないといけない場面があると思いますが、今回はユーザーに待たせているのを感じさせにくいローディン…
-
06:44Swiperでスライドさせる画像サイズカスタマイズ！上手い具合にスライダー上に画像を表示させるには？
※機材や設定の関係で若干音量が小さくなっております。イヤホンをしていただいた上で音量の調整をお願い致します。前回の動画（下記URL参照）に引き続き、今回はSwiperで画像を表示させた際のサイズの調…
-
54:48【実践！サイト模写コーディング！超初心者向け】解説しながらHTML/CSSを書いていきます！レスポンシブ（スマホ）対応まで！
模写の注意点や準備はこちらhttps://factory-programming-mv.com/video/一緒にサイト制作の練習をしましょう！今回、私が数年前に作成した非常にシンプルなサイトを基に…
-
20:41Webアイコンフォント！Font Awesome（フォントオーサム）の読み込みの方法と使い方について解説！
※機材や設定の関係で若干音量が小さくなっております。イヤホンをしていただいた上で音量の調整をお願い致します。Web制作で必須となりつつあるWebフォントの１つFontAwesomeについて説明してい…
-
47:47【サイト模写コーディング】初心者向け！メリット・注意点・流れなどを解説！実際の模写をやるところまで。
今回はWebサイトの模写についてお話しています。サイト制作の力が一番つく模写コーディングをやってみましょう！やってみることでのメリット・注意点・流れなどを解説していますので、この動画を見れば、模写を…
-
07:13line-height解説！実際にはどのような考え方で適用されるのか？行間を上手く空けるには？
１行の高さを指定するline-heightですが、どのような動きをしているのか？を解説しています。また、どのくらいの数値が良いのかやどういった指定が実際にはされるのかまで紹介しています。
-
09:33classとidの違い、実際の挙動についての紹介！初心者が陥りがちなJavaScriptの挙動についてもコーディング事例とともに紹介！
分かるようで分からない、classとidの違いについて説明しています。同一のidはなぜページ内に１つしか記述できないのか？複数idを記述すると、JSでどんな挙動になるのか？などを解説しています。
-
15:29初心者必見！margin, paddingの効率的な指定のやり方・考え方
どうしても無駄なコードを書いてしまいがちなmargin（マージン）とpadding（パディング）について説明しています。margin: 10px;margin: 10px 20px;margin: …
-
08:23初心者向け！コーディングに必須の考え方、HTMLの「親子関係」と「インデント」の揃え方解説
初心者がつまづきやすい、HTMLの親子関係について解説しています。子要素や親要素、子孫要素、祖先要素とは何か？などを解説しています。
-
17:06初心者向け！検証機能・デベロッパーツールの使い方解説！Google Chromeなどに搭載されている検証ツールを使って効率的なコーディングをおこないましょう！
Google Chrome（グーグルクローム）の検証機能・デベロッパーツールについて解説しています。今やWeb開発においては必要不可欠なツールなので、是非覚えていきましょう！コーディングをおこなわな…
-
23:07【JavaScriptで戦闘ゲーム制作 #3】 攻撃力と防御力を加味した計算と、指定した範囲数値で乱数を出してゲーム性を出す！
第３回目の動画では、今まで敵と味方のダメージが一定だったところを見直し、ダメージをある範囲でランダムに出してゲーム性を高めてみることをやってみます。さらに敵と味方に攻撃力と防御力を設定することによっ…
-
12:00【JavaScriptで戦闘ゲーム制作 #2】勝敗の判定を実装して、ゲームに終わりを設定しましょう！
第２回目はHPのダメージ計算とゲームの勝敗判定を実装しましょう！このシリーズの動画再生リストは以下です。活用してください！https://factory-programming-mv.com/pla…
-
26:13【JavaScriptで戦闘ゲーム制作 #1】 まずは簡単なUIを整えて、ゲーム作りの土台作りから作っていきましょう！
※内容が若干古いので、意識できる方は以下のように書いてみてください。・アロー関数を使えるところはアロー関数で書きましょう。・オブジェクトからデータを取得するときは、ドットを使って書いてください。//…
-
12:42JavaScriptで定期的に処理をする！setIntervalとclearIntervalの使い方とそのコーディング事例
JavaScriptでタイマーやカウントダウンなど定期的に処理をする方法を紹介しています。動画では実際にカウントダウンタイマーを作っているところを説明しながらsetIntervalとclearInt…
-
20:35JavaScriptでオブジェクト（連想配列）を扱ってみましょう！初心者向けに実際のコーディング例までを紹介
プログラミングにおいてよく使われる連想配列について説明しています。キー（key）と値（value)とは何か？どう使うのか？また、値に定義できる「文字列・数値・真偽値・配列」などの使い方と実際の呼び出…
-
10:39HTML初心者向け！timeタグとその属性（datetime）・実際のコーディング例の紹介
知っておくと便利な「time」タグについて紹介しています。前半はコーディング例、後半は属性の書き方などについて紹介しています。
-
10:30SASS/SCSSの組込み関数紹介！色を明るくしたり、透明にして効率的にコーディングをおこないましょう。
数あるSassの組み込み関数の中から、今回は色に関するものをピックアップして紹介しています。・lighten・darken・adjust-hue・transparentizeを使って、効率的にコード…
-
07:15初心者向け！改行のさせ方と余白の考え方を解説！br（break）タグの使い方について。HTMLコーディング必須。
入門者がつまづきやすいbrタグ使い方について説明しています。ただの改行タグではありますが、間違った使い方をしがちなタグでもあります。初心者はこの動画でしっかり理解していきましょう！
-
11:48CSSアニメーション【基礎】！animationプロパティとkeyframes（キーフレームズ）の考え方と使い方について
HTML/CSSコーディングで使うanimationやkeyframesの基本的な考え方から使い方まで紹介しています。fromやtoの意味やアニメーションの適用のさせ方、時間の設定方法などを初心者向…
-
11:38ul、ol、li タグ説明！HTMLコーディングにおけるリストの作り方と考え方
初心者むけに、ｕｌタグなどの解説をしています。よく使うタグではありますが、どういった書き方や考え方をしたら良いのか？がなかなか分かりづらいタグですので、この動画で理解していっていただければと思います。
-
11:39setTimeoutを解説！JavaScriptで◯◯秒後に処理をする、タイマーの実装をしてみましょう！
◯◯秒後に何かを処理をしたい！という時に使うのが、setTimeoutです。今回は基本的な書き方と、実際のコーディング例を交えながら紹介していきます。
-
15:15JavaScriptにおけるSwitch（スイッチ）文の書き方解説！case, default, breakの意味。
JSでのswitch文の書き方を解説しています。case（ケース）、default（デフォルト）、break（ブレイク）のそれぞれの意味と実際のコーディング例も紹介しています。if, else if…
-
19:49JavaScriptの比較演算子の意味解説！if文などでよく見る＜、＞、＜＝、＝＝＝などについてと＆＆と｜｜について
JavaScriptコーディングで必須の比較演算子、等価演算子、関係演算子などについて解説しています！＞、＜、＞＝、＜＝、＝＝、！＝、＝＝＝、！＝＝、＆＆、｜｜など見たことはあるけどよくわからないも…
-
07:55はみ出したらスクロールさせる方法！CSSのoverflowの使い方を紹介！
CSSのみで、コンテンツがはみ出したらスクロールさせる方法を紹介しています。overflowのhidden, scroll, autoを使っています。さらに、iPhone（アイフォン）でスムーズにス…
-
12:49CSSアニメーション！transition（トランジション）プロパティの基本的な使い方と、考え方について解説！
CSSのアニメーションができるプロパティの１つ、「transition（トランジション）」について解説しています。allの指定はなぜ通常不要なのか？どこにtransitionを指定するべきなのか？な…
-
27:44サイト制作のコーディングに必須！flexbox（フレックスボックス）の基礎的な書き方や考え方を学びましょう！
現在のサイト制作に必須のflexbox（フレックスボックス）について解説しています。・display: flexを記述すると、どんな動きになるのか？・align-itemsとは？justify-co…
-
20:03CSSセレクターの擬似クラス解説【基礎編】！:notや:first-of-typeなどを活用して、不要なクラスをつけず、効率的なコーディングをしましょう！
HTML/CSSのコーディングで覚えておくと便利な「擬似クラス」について説明しています。この動画では・複数クラスの指定・子要素のみの指定・次の兄弟要素の指定・first-of-type, first…
-
12:39JavaScriptでHTMLのクラスの切り替えをやってみましょう！classListについて解説しています。
JS（JavaScript）コーディングでよく使う、クラスの切り替えについて説明しています。classListのadd, remove, toggleを使い分けて、様々な処理ができるようになりましょ…
-
12:44JSでscrollしたら◯◯する！スクロールに紐づかせて処理をしましょう！
JavaScriptでスクロールしたら何か処理をするのを実装してみましょう！これを学ぶことによって、よくあるスクロールしたら何か要素を出すことや、スクロールしたらアニメーションさせるなどのことが出来…
-
18:45CSSのtransform（2D）について徹底解説！アニメーションなどによく使われるトランスフォームについて学びましょう！
transformを気軽にシミュレートするためのツールを作りました！是非ご活用ください。https://front-end-tools.com/generateTransform/要素を変形すること…
-
17:09CSSで背景（background）の指定！よく使う４つのプロパティと実例を紹介
この動画では、Webページの背景画像（background）の設定方法についてCSSを使用して解説しています。動画は主に以下の4つのプロパティに焦点を当てて、それらのプロパティを使用して背景を設定す…
-
14:26コーディングに必須！ブロック・インライン・インラインブロック解説！
HTMLやCSSのコーディングで必須の考え方・ブロック（block）・インライン（inline）・インラインブロック（inline-block）について解説しています。display: flexやg…
-
15:19セクショニングタグ解説！header, main, footer, aside, navの紹介と実際のコーディングまで！
HTML5から実装された、セクショニングタグの紹介と、使われ方を動画にしました。実際のコーディング例まで解説しています。headerやfooterの考え方、navタグの意味などもお話しします。
-
23:59タブの切り替え！JavaScriptを使って、タブ（tab）が複数あっても対応可能なコードを書きましょう。HTML/CSSの書き方から紹介！
HTML, CSS, JSを使ってタブ切り替えを行う方法を紹介しています。for文を上手く活用することによって、タブやコンテンツが増えても対応できるようにします。また、CSSの指定による見た目の変更…
-
19:05マウスを乗せた時にアニメーション！擬似クラスhover（ホバー）とtransition（トランジション）の役割や使い方解説！
サイト制作では当たり前になった、hoverについて解説しています。また、よく一緒に使われるtransitionの考え方や基本的な使い方や、スマホなどマウスの概念がないデバイスでの扱いについても、実例…
-
19:22なぜ指定したCSSが効かない？CSSの優先度・詳細度を解説。importantの意味まで
指定したCSSが効かないことがありませんか？それはCSSの優先度というものが関係している可能性があります。classやidやタグへの指定、!importantの指定の意味や活用について学び、原因を探…
-
20:26CSS擬似クラス！nth-childとnth-of-typeについて解説！使い方や役割、使い分けまで
コーディングをしている際、クラス名をたくさんつけすぎてわかりにくくなることはありませんか？擬似クラスを多くしていると、とても効率的にHTMLのスタイル指定ができます。複雑なサイト制作には必須のnth…
-
34:08CSSのposition徹底解説！relative, absolute, fixed, static, z-indexの使い方から、考え方・活用の方法まで！
初心者がつまづきやすい、CSSのposition（ポジション）プロパティについて解説しています！top, bottom, right, leftの事例から使われ方まで徹底的に解説しました。さらに、a…
-
17:04JavaScriptで関数（function）を使う方法と活用方法を紹介！実際の例を見ながら関数について理解しましょう！
JS（JavaScript）で関数（function）を使う方法と、関数を使って税込み価格を簡単に計算できるアプリケーションを作ってみましょう。returnとは何か？そして引数（ひきすう）とは何か？…
-
14:30ワードプレス独自テーマ作成！共通のパーツ（ヘッダーやフッター）の読み込みとCSSの読み込み方など
Wordpress（ワードプレス）でheader.php, footer.phpなどの共通パーツの読み込みについて説明しています。それから、初心者がつまづきやすいstyle.cssの読込み方法なども…
-
08:22ワードプレス独自テーマ作成！テーマを作って認識させてみましょう！
Wordpress（ワードプレス）の独自テーマの方法は若干複雑です。まずは、どのようにしたらオリジナルのテーマが読み込まれるのかをみていきましょう！
-
06:56ワードプレス独自テーマ作成！ローカル環境（PC上にサーバーを作る）の設定を「Local by Flywheel」でやってみましょう！
※ 03:40 あたりの環境設定ですが、Local by flywheelの仕様が変わりサイトを追加する際「Custom」を選択すると言語などの設定をしなければならなくなりました。Customを推奨…
-
19:18ドロップダウンメニュー・アコーディオンメニューの作り方！HTML / CSS / JavaScriptでシンプルに作る方法
この動画では、HTML、CSS、JavaScriptを用いて、ドロップダウンメニューの作成方法について解説しています。親メニューと子供のメニュー(サブメニュー)を含むドロップダウンメニューのHTML…
-
12:27JavaScriptで条件分岐「if, else if, else」を使ってみましょう！実践的な例までを紹介
JS（JavaScript)で条件分岐をおこなってみましょう！ifなどの使い方や、比較演算子（＝＝＝, ＞, ＜, ＞＝, ＜＝）などの違いも紹介しています。
-
21:43SASS/SCSSでループ処理（繰り返し）をする方法と、その活用方法！
Sass（サス）でのfor文（繰返し）の処理のやり方・考え方とどのように活用していったら良いかを解説しています。グラデーションを作ったり、アニメーションを上手くズラす方法などを実践的に説明しています…
-
10:03border（ボーダー）の使い方、見出しなどへの活用方法と、border-radius（角丸）について
borderを簡単に実装できる、ジェネレーターツールを作りました！是非ご活用ください！https://front-end-tools.com/generateBorder/border（枠線）の活用…
-
15:20サイト制作に必須のボックスモデルの考え方とmarginの相殺について解説！
【訂正】動画内でmarginの相殺の説明をしていて、横方向にも相殺が起きると説明していますが、実際には起きません。（合算されます）WebサイトをHTML/CSSでコーディングする際に必須のボックスモ…
-
17:30SASS/SCSSでif, else if, elseなどの条件分岐を使ってみましょう！実践的な活用の仕方まで紹介。
Sass（サス）で条件分岐を行う方法と、その活用を紹介しています。さらに、三項演算子の書き方まで実例をあげています。
-
20:38for文（繰り返し処理）を使ってみましょう！JavaScriptで同じような処理を効率化する方法を紹介
JavaScript（ジャバスクリプト）の基本的な機能の一つ、for文について学びます。このfor文（for loop）は、指定された条件下で同じ処理を繰り返し実行するための仕組みです。配列との組み…
-
11:36JavaScriptで配列を扱ってみましょう！配列の追加方法や実例とともに紹介！
プログラミングで必須となる配列（array）を学びましょう！なぜ、配列が必要なのかなどの考え方から実際に配列からデータを取り出してみる方法を学びます。また、天気を定義して取り出すことによる実践的な形…
-
13:08JavaScriptで「クリック（click）したら、◯◯する」を書いてみましょう！とても良く使うaddEventListener（イベントリスナー）を解説！
JavaScriptを利用して特定のイベント（この場合は「クリック」）が発生した際の動作を定義する方法を解説しています。主に「addEventListener」（イベントリスナー、イベントを監視する…
-
16:41JavaScriptで変数宣言を活用していきましょう！letやconst、実例なども紹介！
JS（JavaScript）で変数を宣言する方法や、そもそも変数を活用するにはどのようにすれば良いのかを解説していきます。この動画では、今ではあまり使われなくなってきているvarについては解説してい…
-
10:51【JavaScript 初めの一歩！超初心者向け】ファイルの読み込みと、よく使うconsole.logやalertについて
JavaScriptの初歩的な部分、特にファイルの読み込みやよく使われる機能について紹介していきます。JavaScriptのコードはHTMLが読み込まれた後に読み込むことで、エラーを防ぐことができま…
-
09:44ワードプレスの「メニュー（menu）」の設定や考え方について解説！固定ページを作った際の動線の作り方も紹介。
初心者の方にはなかなか難しいメニューの作成方法と、設定の方法や考え方について説明しています。
-
14:56ワードプレスのカテゴリー設定や考え方について！
Wordpressにおけるカテゴリー（category）の設定や考え方について解説しています。階層構造を設定したり、スラッグ（slug）photを指定する際どのように設定したら良いのかをご紹介してい…
-
17:58ワードプレスの新しいエディタ「Gutenberg（グーテンベルグ）」の使い方を覚えましょう！
新しくなって久しいですが、Wordpressの新しいエディタについて解説しています。Gutenberg「グーテンベルク」の使い方は今までのクラシックエディタとはちょっと違うので、戸惑う人も多いかもし…
-
17:43モーダルウィンドウ・ダイアログウィンドウの作り方１（HTML、CSS、JavaScriptで作る）
HTML、CSS、JavaScriptだけで、プラグインなどを使わずに簡単にモーダルウインドウ（modal window）やダイアログボックス（dialog box）やポップアップウィンドウ(pop…
-
17:44SASS/SCSS！@mixin（ミックスイン）を徹底解説！引数や実例、@includeでの呼び出しまで
Sass（サス）/Scssで使えるかなり便利な機能mixin（ミックスイン）について説明しています。他の言語でいう関数のようなものです（Sassの自作関数functionとは別です。）動画内で紹介し…
-
08:53SASS/SCSSの違い、それぞれのメリットや特徴について説明していきます！
Sass（サス）と言う言語自体は１つですが、書き方が2種類存在するのがSassです。広く普及しているscssの書き方と、少数派だけどメリットも多いsassの書き方を、それぞれ解説しています。
-
10:04SASS/SCSS解説！変数について
Sass（サス）/Scssで変数を使う時の方法を動画にしました。よく使うカラーコードやサイズなどを定義しておくと、いちいち覚えなくて済んだり、計算する際に変数を活用することができます。ぜひ、覚えて効…
-
08:06SASS/SCSS解説！最もよく使う機能、ネスト（nest）について
Sass（サス）/Scssでよく使うと思われる機能、「ネスト（入れ子）」について説明しています。初心者の方は最初に覚えておくと、かなり楽です！
-
07:27【ワードプレスのSEO対策！】パーマリンクとスラッグについて
SEO対策としてやらなければならないことはたくさんありますが、今回はパーマリンクやスラッグなど、URLのことについて解説しています。是非考え方を知って、適切な設定にしていきましょう！
-
07:25【ワードプレス・SEO対策】画像のalt（オルト）属性・代替テキストについて
SEO対策で必須と言われるimgタグのalt属性について解説しています。通常のHTMLタグではalt属性に直接追記しますが、Wordpressにおいては設定場所がありますので、この動画で学んでいきま…
-
05:19tableタグにおいてのセルの結合について（HTML）
HTMLのtableタグは、セルの結合ができます！この動画でやり方を学んでいきましょう。具体的には、・colspan・rowspanを使っていきます。前回の動画は以下（tableタグ基礎）https…
-
10:32表をtableタグで組んでみましょう！
初心者がつまづきやすい、HTMLで表を組むためのやり方です。thead、tbody、tfoot、tr、th、tdについても解説しています。
-
18:32レスポンシブ対応の基礎。スマホやタブレットに対応させましょう。
CSSのメディアクエリ（media query）を使って、レスポンシブ対応のサイト作りの基礎を学びましょう。一体どうやったら対応できるのか。なぜこんなコーディングの仕方なのか？を解説しています。具体…
-
16:01擬似要素について解説！beforeとafterの使い方と、コーディングについて
cssのbeforeとかafterって何？と思われている方向けへの解説です。それから、使い方がなんとなくわかっていても、コーディングの際にどう活用するのか分からないという方必見です。
-
06:47aタグを使ってリンクを張ってみましょう！外部サイト（別タブで開く）へのリンクも解説！
シンプルに１ページだけのサイトだとリンクは必要ないかもしれませんが、ページ数が増えてくると、リンクを貼らなければなりません。今回は基本的なaタグを使ったリンクの作り方と、外部サイトへリンクする方法と…
-
05:58セキュリティー対策！WordPressを攻撃から守りましょう！
小さいサイトだったとしても攻撃される可能性は少なからずあります！今回は特に狙われやすいワードプレスの対策をしていきましょう！初心者でも簡単に「SiteGuard WP Plugin」というものを使っ…
-
08:36なんとなくで使っていませんか？カラーコード（#fffなど）を徹底解説！
＃fffや＃000などのカラーコードの指定をなんとなくでやってしまっていませんか？今回はそんな曖昧なところを払拭しましょう！
-
08:18スクロールしてもついてくるボタンや要素の作り方
スクロールしても画面に勝手についてくる要素があると思います。固定のヘッダーや広告や上に戻るボタンです。こういった要素の作り方を簡単に解説しています。
-
06:39勝手にCSSがついている問題を解決！リセット（reset）CSSで余白や文字の装飾などを消してみましょう。
フロントエンド開発では当たり前となっている、「reset css」についてです。bodyタグや、hタグや、ulタグやに勝手にCSSがついていて困っていませんか？CSSをリセットすることによって、コー…
-
19:41リンクボタン（四角いボタン）の作り方！HTMLとCSSで作ろう
ボタンを簡単に作るためのツールを開発しました！こちらもご活用くださいhttps://front-end-tools.com/generateButton/一般的に使われているボタン（aタグ、butt…
-
05:15ワードプレスでお問い合わせフォーム（Contact Form7）を設置する方法（基礎編）
ホームページに必須とされるお問い合わせフォームの作り方を紹介しています。今回は簡単にWordpressのプラグイン、Contact Form 7（コンタクトフォーム７）を使ったものを紹介しています。
-
22:13imgタグ徹底解説！HTMLで画像を表示させる手順や、CSSで上手く指定する方法などを紹介しています！
初心者がつまづきやすいimgタグについて解説しました！表示はもちろん、サイズ（height, width）の指定やスマホなどに対応する方法、alt属性の書き方（SEO、 アクセシビリティ、代替テキス…
-
10:54WordPressの「最低限」やっておくべき４つの設定
レンタルサーバー（Xserver, さくらサーバー, ロリポップ ）などにワードプレスをインストールした後の、初心者・入門者がつまづきやすい４つのWordpressの設定を説明しています。
-
04:51Visual Studio Code（ビジュアルスタジオコード）のダウンロードからインストール、日本語化までの手順
Visual Studio Code（以下、VS Code）は、Microsoft（マイクロソフト）が開発している無料のエディタです。これはSublime Text（サブライムテキスト）、Atom（…
-
15:00HTML、CSS爆速コーディングツール！Emmet（エメット）基礎編
EmmetのチートシートURLは以下です。https://docs.emmet.io/cheat-sheet/紹介するのは、HTML（エイチティーエムエル）とCSS（シーエスエス）のコーディングを劇…
-
11:53ハンバーガーメニュー・ドロワーメニューの作り方２（全５回）
レスポンシブ対応（スマホやタブレットなどへの対応）が必須となった現在では、ハンバーガーメニュー・ドロワーメニュー（いわゆるスマホ用のメニュー）の実装が不可欠になっていると思います。全５回に渡りHTM…
-
15:28ハンバーガーメニュー・ドロワーメニューの作り方１（全５回）
第２回目https://factory-programming-mv.com/video/qxr9bmn8SUI/第３回目https://factory-programming-mv.com/vid…
-
14:21【CSS基礎！】HTMLのタグ（Tag）やクラス（class）名にCSSを指定してデザインを変更してみましょう！
今回は、CSSの基礎と、HTMLのタグやクラス名にCSSを適用する方法を学んでいきます。開発環境としては、マイクロソフトが提供する「Visual Studio Code（VSCode：ビジュアル ス…
-
13:04【最新！HTML基礎】HTMLの書いておいた方が良いことなど、コーディングの基本を覚えましょう！
追記※以下の記述はEmmetがアップデートされた為、現在では「! + Tabキー」では挿入されません。＜meta http-equiv="X-UA-Compatible" con…