有料会員限定を含む全ての動画リスト

• 

  13:04

  【最新！HTML基礎】HTMLの書いておいた方が良いことなど、コーディングの基本を覚えましょう！

  追記※以下の記述はEmmetがアップデートされた為、現在では「! + Tabキー」では挿入されません。＜meta http-equiv="X-UA-Compatible" con…

• 

  14:21

  【CSS基礎！】HTMLのタグ（Tag）やクラス（class）名にCSSを指定してデザインを変更してみましょう！

  今回は、CSSの基礎と、HTMLのタグやクラス名にCSSを適用する方法を学んでいきます。開発環境としては、マイクロソフトが提供する「Visual Studio Code（VSCode：ビジュアル ス…

• 

  15:28

  ハンバーガーメニュー・ドロワーメニューの作り方１（全５回）

  第２回目https://factory-programming-mv.com/video/qxr9bmn8SUI/第３回目https://factory-programming-mv.com/vid…

• 

  11:53

  ハンバーガーメニュー・ドロワーメニューの作り方２（全５回）

  レスポンシブ対応（スマホやタブレットなどへの対応）が必須となった現在では、ハンバーガーメニュー・ドロワーメニュー（いわゆるスマホ用のメニュー）の実装が不可欠になっていると思います。全５回に渡りHTM…

• 

  12:43

  ハンバーガーメニュー・ドロワーメニューの作り方３（全５回）

  ※アニメーションのカクつきに関して。コメントでいただいていますが、動画内のコードで実装した場合、三本線からバツになる際にカクつく現象が起こる場合があります。その場合は、「transform-orig…

• 

  15:00

  HTML、CSS爆速コーディングツール！Emmet（エメット）基礎編

  EmmetのチートシートURLは以下です。https://docs.emmet.io/cheat-sheet/紹介するのは、HTML（エイチティーエムエル）とCSS（シーエスエス）のコーディングを劇…

• 

  09:25

  HTML、CSS爆速コーディングツール！Emmet【応用編】

  爆速コーディングができるEmmetの使い方動画【応用編】です。以前はZen codingという名前で親しまれていた、ツールです。これを覚えるとタイピング量が1/5くらいになり、爆速でコーディングでき…

• 

  04:51

  Visual Studio Code（ビジュアルスタジオコード）のダウンロードからインストール、日本語化までの手順

  Visual Studio Code（以下、VS Code）は、Microsoft（マイクロソフト）が開発している無料のエディタです。これはSublime Text（サブライムテキスト）、Atom（…

• 

  10:54

  WordPressの「最低限」やっておくべき４つの設定

  レンタルサーバー（Xserver, さくらサーバー, ロリポップ ）などにワードプレスをインストールした後の、初心者・入門者がつまづきやすい４つのWordpressの設定を説明しています。

• 

  22:13

  imgタグ徹底解説！HTMLで画像を表示させる手順や、CSSで上手く指定する方法などを紹介しています！

  初心者がつまづきやすいimgタグについて解説しました！表示はもちろん、サイズ（height, width）の指定やスマホなどに対応する方法、alt属性の書き方（SEO、 アクセシビリティ、代替テキス…

• 

  05:15

  ワードプレスでお問い合わせフォーム（Contact Form7）を設置する方法（基礎編）

  ホームページに必須とされるお問い合わせフォームの作り方を紹介しています。今回は簡単にWordpressのプラグイン、Contact Form 7（コンタクトフォーム７）を使ったものを紹介しています。

• 

  19:41

  リンクボタン（四角いボタン）の作り方！HTMLとCSSで作ろう

  ボタンを簡単に作るためのツールを開発しました！こちらもご活用くださいhttps://front-end-tools.com/generateButton/一般的に使われているボタン（aタグ、butt…

• 

  06:39

  勝手にCSSがついている問題を解決！リセット（reset）CSSで余白や文字の装飾などを消してみましょう。

  フロントエンド開発では当たり前となっている、「reset css」についてです。bodyタグや、hタグや、ulタグやに勝手にCSSがついていて困っていませんか？CSSをリセットすることによって、コー…

• 

  08:18

  スクロールしてもついてくるボタンや要素の作り方

  スクロールしても画面に勝手についてくる要素があると思います。固定のヘッダーや広告や上に戻るボタンです。こういった要素の作り方を簡単に解説しています。

• 

  08:36

  なんとなくで使っていませんか？カラーコード（#fffなど）を徹底解説！

  ＃fffや＃000などのカラーコードの指定をなんとなくでやってしまっていませんか？今回はそんな曖昧なところを払拭しましょう！

• 

  05:58

  セキュリティー対策！WordPressを攻撃から守りましょう！

  小さいサイトだったとしても攻撃される可能性は少なからずあります！今回は特に狙われやすいワードプレスの対策をしていきましょう！初心者でも簡単に「SiteGuard WP Plugin」というものを使っ…

• 

  06:47

  aタグを使ってリンクを張ってみましょう！外部サイト（別タブで開く）へのリンクも解説！

  シンプルに１ページだけのサイトだとリンクは必要ないかもしれませんが、ページ数が増えてくると、リンクを貼らなければなりません。今回は基本的なaタグを使ったリンクの作り方と、外部サイトへリンクする方法と…

• 

  16:01

  擬似要素について解説！beforeとafterの使い方と、コーディングについて

  cssのbeforeとかafterって何？と思われている方向けへの解説です。それから、使い方がなんとなくわかっていても、コーディングの際にどう活用するのか分からないという方必見です。

• 

  18:32

  レスポンシブ対応の基礎。スマホやタブレットに対応させましょう。

  CSSのメディアクエリ（media query）を使って、レスポンシブ対応のサイト作りの基礎を学びましょう。一体どうやったら対応できるのか。なぜこんなコーディングの仕方なのか？を解説しています。具体…

• 

  10:32

  表をtableタグで組んでみましょう！

  初心者がつまづきやすい、HTMLで表を組むためのやり方です。thead、tbody、tfoot、tr、th、tdについても解説しています。

• 

  05:19

  tableタグにおいてのセルの結合について（HTML）

  HTMLのtableタグは、セルの結合ができます！この動画でやり方を学んでいきましょう。具体的には、・colspan・rowspanを使っていきます。前回の動画は以下（tableタグ基礎）https…

• 

  07:25

  【ワードプレス・SEO対策】画像のalt（オルト）属性・代替テキストについて

  SEO対策で必須と言われるimgタグのalt属性について解説しています。通常のHTMLタグではalt属性に直接追記しますが、Wordpressにおいては設定場所がありますので、この動画で学んでいきま…

• 

  07:27

  【ワードプレスのSEO対策！】パーマリンクとスラッグについて

  SEO対策としてやらなければならないことはたくさんありますが、今回はパーマリンクやスラッグなど、URLのことについて解説しています。是非考え方を知って、適切な設定にしていきましょう！

• 

  08:06

  SASS/SCSS解説！最もよく使う機能、ネスト（nest）について

  Sass（サス）/Scssでよく使うと思われる機能、「ネスト（入れ子）」について説明しています。初心者の方は最初に覚えておくと、かなり楽です！

• 

  10:04

  SASS/SCSS解説！変数について

  Sass（サス）/Scssで変数を使う時の方法を動画にしました。よく使うカラーコードやサイズなどを定義しておくと、いちいち覚えなくて済んだり、計算する際に変数を活用することができます。ぜひ、覚えて効…

• 

  08:53

  SASS/SCSSの違い、それぞれのメリットや特徴について説明していきます！

  Sass（サス）と言う言語自体は１つですが、書き方が2種類存在するのがSassです。広く普及しているscssの書き方と、少数派だけどメリットも多いsassの書き方を、それぞれ解説しています。

• 

  17:44

  SASS/SCSS！@mixin（ミックスイン）を徹底解説！引数や実例、@includeでの呼び出しまで

  Sass（サス）/Scssで使えるかなり便利な機能mixin（ミックスイン）について説明しています。他の言語でいう関数のようなものです（Sassの自作関数functionとは別です。）動画内で紹介し…

• 

  17:43

  モーダルウィンドウ・ダイアログウィンドウの作り方１（HTML、CSS、JavaScriptで作る）

  HTML、CSS、JavaScriptだけで、プラグインなどを使わずに簡単にモーダルウインドウ（modal window）やダイアログボックス（dialog box）やポップアップウィンドウ(pop…

• 

  18:24

  モーダルウィンドウ・ダイアログウィンドウの作り方２（HTML、CSS、JavaScriptで作る）

  HTML、CSS、JavaScriptだけで、プラグインなどを使わずに簡単にモーダルウインドウ（modal window）やダイアログボックス（dialog box）やポップアップウィンドウ(pop…

• 

  17:58

  ワードプレスの新しいエディタ「Gutenberg（グーテンベルグ）」の使い方を覚えましょう！

  新しくなって久しいですが、Wordpressの新しいエディタについて解説しています。Gutenberg「グーテンベルク」の使い方は今までのクラシックエディタとはちょっと違うので、戸惑う人も多いかもし…

• 

  14:56

  ワードプレスのカテゴリー設定や考え方について！

  Wordpressにおけるカテゴリー（category）の設定や考え方について解説しています。階層構造を設定したり、スラッグ（slug）photを指定する際どのように設定したら良いのかをご紹介してい…

• 

  09:44

  ワードプレスの「メニュー（menu）」の設定や考え方について解説！固定ページを作った際の動線の作り方も紹介。

  初心者の方にはなかなか難しいメニューの作成方法と、設定の方法や考え方について説明しています。

• 

  10:51

  【JavaScript 初めの一歩！超初心者向け】ファイルの読み込みと、よく使うconsole.logやalertについて

  JavaScriptの初歩的な部分、特にファイルの読み込みやよく使われる機能について紹介していきます。JavaScriptのコードはHTMLが読み込まれた後に読み込むことで、エラーを防ぐことができま…

• 

  16:41

  JavaScriptで変数宣言を活用していきましょう！letやconst、実例なども紹介！

  JS（JavaScript）で変数を宣言する方法や、そもそも変数を活用するにはどのようにすれば良いのかを解説していきます。この動画では、今ではあまり使われなくなってきているvarについては解説してい…

• 

  13:08

  JavaScriptで「クリック（click）したら、◯◯する」を書いてみましょう！とても良く使うaddEventListener（イベントリスナー）を解説！

  JavaScriptを利用して特定のイベント（この場合は「クリック」）が発生した際の動作を定義する方法を解説しています。主に「addEventListener」（イベントリスナー、イベントを監視する…

• 

  11:36

  JavaScriptで配列を扱ってみましょう！配列の追加方法や実例とともに紹介！

  プログラミングで必須となる配列（array）を学びましょう！なぜ、配列が必要なのかなどの考え方から実際に配列からデータを取り出してみる方法を学びます。また、天気を定義して取り出すことによる実践的な形…

• 

  20:38

  for文（繰り返し処理）を使ってみましょう！JavaScriptで同じような処理を効率化する方法を紹介

  JavaScript（ジャバスクリプト）の基本的な機能の一つ、for文について学びます。このfor文（for loop）は、指定された条件下で同じ処理を繰り返し実行するための仕組みです。配列との組み…

• 

  17:30

  SASS/SCSSでif, else if, elseなどの条件分岐を使ってみましょう！実践的な活用の仕方まで紹介。

  Sass（サス）で条件分岐を行う方法と、その活用を紹介しています。さらに、三項演算子の書き方まで実例をあげています。

• 

  15:20

  サイト制作に必須のボックスモデルの考え方とmarginの相殺について解説！

  【訂正】動画内でmarginの相殺の説明をしていて、横方向にも相殺が起きると説明していますが、実際には起きません。（合算されます）WebサイトをHTML/CSSでコーディングする際に必須のボックスモ…

• 

  10:03

  border（ボーダー）の使い方、見出しなどへの活用方法と、border-radius（角丸）について

  borderを簡単に実装できる、ジェネレーターツールを作りました！是非ご活用ください！https://front-end-tools.com/generateBorder/border（枠線）の活用…

• 

  11:19

  JavaScriptでランダムな数字を出す（乱数）方法と、配列と組み合わせて簡単なアプリ（おみくじ）を作る方法！

  JS（JavaScript）で乱数（ランダムな数値）を出す方法と、それを活用した実例を紹介しています。配列と組み合わせて、簡単なおみくじアプリまで作るところまでを解説しています。JSの配列についての…

• 

  21:43

  SASS/SCSSでループ処理（繰り返し）をする方法と、その活用方法！

  Sass（サス）でのfor文（繰返し）の処理のやり方・考え方とどのように活用していったら良いかを解説しています。グラデーションを作ったり、アニメーションを上手くズラす方法などを実践的に説明しています…

• 

  12:27

  JavaScriptで条件分岐「if, else if, else」を使ってみましょう！実践的な例までを紹介

  JS（JavaScript)で条件分岐をおこなってみましょう！ifなどの使い方や、比較演算子（＝＝＝, ＞, ＜, ＞＝, ＜＝）などの違いも紹介しています。

• 

  19:18

  ドロップダウンメニュー・アコーディオンメニューの作り方！HTML / CSS / JavaScriptでシンプルに作る方法

  この動画では、HTML、CSS、JavaScriptを用いて、ドロップダウンメニューの作成方法について解説しています。親メニューと子供のメニュー(サブメニュー)を含むドロップダウンメニューのHTML…

• 

  06:56

  ワードプレス独自テーマ作成！ローカル環境（PC上にサーバーを作る）の設定を「Local by Flywheel」でやってみましょう！

  ※ 03:40 あたりの環境設定ですが、Local by flywheelの仕様が変わりサイトを追加する際「Custom」を選択すると言語などの設定をしなければならなくなりました。Customを推奨…

• 

  08:22

  ワードプレス独自テーマ作成！テーマを作って認識させてみましょう！

  Wordpress（ワードプレス）の独自テーマの方法は若干複雑です。まずは、どのようにしたらオリジナルのテーマが読み込まれるのかをみていきましょう！

• 

  14:30

  ワードプレス独自テーマ作成！共通のパーツ（ヘッダーやフッター）の読み込みとCSSの読み込み方など

  Wordpress（ワードプレス）でheader.php, footer.phpなどの共通パーツの読み込みについて説明しています。それから、初心者がつまづきやすいstyle.cssの読込み方法なども…

• 

  17:04

  JavaScriptで関数（function）を使う方法と活用方法を紹介！実際の例を見ながら関数について理解しましょう！

  JS（JavaScript）で関数（function）を使う方法と、関数を使って税込み価格を簡単に計算できるアプリケーションを作ってみましょう。returnとは何か？そして引数（ひきすう）とは何か？…

• 

  34:08

  CSSのposition徹底解説！relative, absolute, fixed, static, z-indexの使い方から、考え方・活用の方法まで！

  初心者がつまづきやすい、CSSのposition（ポジション）プロパティについて解説しています！top, bottom, right, leftの事例から使われ方まで徹底的に解説しました。さらに、a…

• 

  20:26

  CSS擬似クラス！nth-childとnth-of-typeについて解説！使い方や役割、使い分けまで

  コーディングをしている際、クラス名をたくさんつけすぎてわかりにくくなることはありませんか？擬似クラスを多くしていると、とても効率的にHTMLのスタイル指定ができます。複雑なサイト制作には必須のnth…

• 

  19:22

  なぜ指定したCSSが効かない？CSSの優先度・詳細度を解説。importantの意味まで

  指定したCSSが効かないことがありませんか？それはCSSの優先度というものが関係している可能性があります。classやidやタグへの指定、!importantの指定の意味や活用について学び、原因を探…

• 

  19:05

  マウスを乗せた時にアニメーション！擬似クラスhover（ホバー）とtransition（トランジション）の役割や使い方解説！

  サイト制作では当たり前になった、hoverについて解説しています。また、よく一緒に使われるtransitionの考え方や基本的な使い方や、スマホなどマウスの概念がないデバイスでの扱いについても、実例…

• 

  23:59

  タブの切り替え！JavaScriptを使って、タブ（tab）が複数あっても対応可能なコードを書きましょう。HTML/CSSの書き方から紹介！

  HTML, CSS, JSを使ってタブ切り替えを行う方法を紹介しています。for文を上手く活用することによって、タブやコンテンツが増えても対応できるようにします。また、CSSの指定による見た目の変更…

• 

  15:19

  セクショニングタグ解説！header, main, footer, aside, navの紹介と実際のコーディングまで！

  HTML5から実装された、セクショニングタグの紹介と、使われ方を動画にしました。実際のコーディング例まで解説しています。headerやfooterの考え方、navタグの意味などもお話しします。

• 

  14:26

  コーディングに必須！ブロック・インライン・インラインブロック解説！

  HTMLやCSSのコーディングで必須の考え方・ブロック（block）・インライン（inline）・インラインブロック（inline-block）について解説しています。display: flexやg…

• 

  17:09

  CSSで背景（background）の指定！よく使う４つのプロパティと実例を紹介

  この動画では、Webページの背景画像（background）の設定方法についてCSSを使用して解説しています。動画は主に以下の4つのプロパティに焦点を当てて、それらのプロパティを使用して背景を設定す…

• 

  18:45

  CSSのtransform（2D）について徹底解説！アニメーションなどによく使われるトランスフォームについて学びましょう！

  transformを気軽にシミュレートするためのツールを作りました！是非ご活用ください。https://front-end-tools.com/generateTransform/要素を変形すること…

• 

  12:44

  JSでscrollしたら◯◯する！スクロールに紐づかせて処理をしましょう！

  JavaScriptでスクロールしたら何か処理をするのを実装してみましょう！これを学ぶことによって、よくあるスクロールしたら何か要素を出すことや、スクロールしたらアニメーションさせるなどのことが出来…

• 

  12:39

  JavaScriptでHTMLのクラスの切り替えをやってみましょう！classListについて解説しています。

  JS（JavaScript）コーディングでよく使う、クラスの切り替えについて説明しています。classListのadd, remove, toggleを使い分けて、様々な処理ができるようになりましょ…

• 

  20:03

  CSSセレクターの擬似クラス解説【基礎編】！:notや:first-of-typeなどを活用して、不要なクラスをつけず、効率的なコーディングをしましょう！

  HTML/CSSのコーディングで覚えておくと便利な「擬似クラス」について説明しています。この動画では・複数クラスの指定・子要素のみの指定・次の兄弟要素の指定・first-of-type, first…

• 

  16:34

  CSSセレクター・擬似クラス解説【上級編】！不要なクラスをつけず、もっと効率的なコーディングをしましょう！

  HTML/CSSのコーディングで覚えておくと便利な「擬似クラス」について説明しています。この動画では・属性と値・属性の値が指定したもので始まる・属性の値が指定したもので終わる・empty・check…

• 

  27:44

  サイト制作のコーディングに必須！flexbox（フレックスボックス）の基礎的な書き方や考え方を学びましょう！

  現在のサイト制作に必須のflexbox（フレックスボックス）について解説しています。・display: flexを記述すると、どんな動きになるのか？・align-itemsとは？justify-co…

• 

  12:49

  CSSアニメーション！transition（トランジション）プロパティの基本的な使い方と、考え方について解説！

  CSSのアニメーションができるプロパティの１つ、「transition（トランジション）」について解説しています。allの指定はなぜ通常不要なのか？どこにtransitionを指定するべきなのか？な…

• 

  07:55

  はみ出したらスクロールさせる方法！CSSのoverflowの使い方を紹介！

  CSSのみで、コンテンツがはみ出したらスクロールさせる方法を紹介しています。overflowのhidden, scroll, autoを使っています。さらに、iPhone（アイフォン）でスムーズにス…

• 

  19:49

  JavaScriptの比較演算子の意味解説！if文などでよく見る＜、＞、＜＝、＝＝＝などについてと＆＆と｜｜について

  JavaScriptコーディングで必須の比較演算子、等価演算子、関係演算子などについて解説しています！＞、＜、＞＝、＜＝、＝＝、！＝、＝＝＝、！＝＝、＆＆、｜｜など見たことはあるけどよくわからないも…

• 

  15:15

  JavaScriptにおけるSwitch（スイッチ）文の書き方解説！case, default, breakの意味。

  JSでのswitch文の書き方を解説しています。case（ケース）、default（デフォルト）、break（ブレイク）のそれぞれの意味と実際のコーディング例も紹介しています。if, else if…

• 

  11:39

  setTimeoutを解説！JavaScriptで◯◯秒後に処理をする、タイマーの実装をしてみましょう！

  ◯◯秒後に何かを処理をしたい！という時に使うのが、setTimeoutです。今回は基本的な書き方と、実際のコーディング例を交えながら紹介していきます。

• 

  11:38

  ul、ol、li　タグ説明！HTMLコーディングにおけるリストの作り方と考え方

  初心者むけに、ｕｌタグなどの解説をしています。よく使うタグではありますが、どういった書き方や考え方をしたら良いのか？がなかなか分かりづらいタグですので、この動画で理解していっていただければと思います。

• 

  11:48

  CSSアニメーション【基礎】！animationプロパティとkeyframes（キーフレームズ）の考え方と使い方について

  HTML/CSSコーディングで使うanimationやkeyframesの基本的な考え方から使い方まで紹介しています。fromやtoの意味やアニメーションの適用のさせ方、時間の設定方法などを初心者向…

• 

  07:15

  初心者向け！改行のさせ方と余白の考え方を解説！br（break）タグの使い方について。HTMLコーディング必須。

  入門者がつまづきやすいbrタグ使い方について説明しています。ただの改行タグではありますが、間違った使い方をしがちなタグでもあります。初心者はこの動画でしっかり理解していきましょう！

• 

  10:30

  SASS/SCSSの組込み関数紹介！色を明るくしたり、透明にして効率的にコーディングをおこないましょう。

  数あるSassの組み込み関数の中から、今回は色に関するものをピックアップして紹介しています。・lighten・darken・adjust-hue・transparentizeを使って、効率的にコード…

• 

  10:39

  HTML初心者向け！timeタグとその属性（datetime）・実際のコーディング例の紹介

  知っておくと便利な「time」タグについて紹介しています。前半はコーディング例、後半は属性の書き方などについて紹介しています。

• 

  20:35

  JavaScriptでオブジェクト（連想配列）を扱ってみましょう！初心者向けに実際のコーディング例までを紹介

  プログラミングにおいてよく使われる連想配列について説明しています。キー（key）と値（value)とは何か？どう使うのか？また、値に定義できる「文字列・数値・真偽値・配列」などの使い方と実際の呼び出…

• 

  12:42

  JavaScriptで定期的に処理をする！setIntervalとclearIntervalの使い方とそのコーディング事例

  JavaScriptでタイマーやカウントダウンなど定期的に処理をする方法を紹介しています。動画では実際にカウントダウンタイマーを作っているところを説明しながらsetIntervalとclearInt…

• 

  26:13

  【JavaScriptで戦闘ゲーム制作 #1】 まずは簡単なUIを整えて、ゲーム作りの土台作りから作っていきましょう！

  ※内容が若干古いので、意識できる方は以下のように書いてみてください。・アロー関数を使えるところはアロー関数で書きましょう。・オブジェクトからデータを取得するときは、ドットを使って書いてください。//…

• 

  12:00

  【JavaScriptで戦闘ゲーム制作 #2】勝敗の判定を実装して、ゲームに終わりを設定しましょう！

  第２回目はHPのダメージ計算とゲームの勝敗判定を実装しましょう！このシリーズの動画再生リストは以下です。活用してください！https://factory-programming-mv.com/pla…

• 

  23:07

  【JavaScriptで戦闘ゲーム制作 #3】 攻撃力と防御力を加味した計算と、指定した範囲数値で乱数を出してゲーム性を出す！

  第３回目の動画では、今まで敵と味方のダメージが一定だったところを見直し、ダメージをある範囲でランダムに出してゲーム性を高めてみることをやってみます。さらに敵と味方に攻撃力と防御力を設定することによっ…

• 

  17:06

  初心者向け！検証機能・デベロッパーツールの使い方解説！Google Chromeなどに搭載されている検証ツールを使って効率的なコーディングをおこないましょう！

  Google Chrome（グーグルクローム）の検証機能・デベロッパーツールについて解説しています。今やWeb開発においては必要不可欠なツールなので、是非覚えていきましょう！コーディングをおこなわな…

• 

  08:23

  初心者向け！コーディングに必須の考え方、HTMLの「親子関係」と「インデント」の揃え方解説

  初心者がつまづきやすい、HTMLの親子関係について解説しています。子要素や親要素、子孫要素、祖先要素とは何か？などを解説しています。

• 

  15:29

  初心者必見！margin, paddingの効率的な指定のやり方・考え方

  どうしても無駄なコードを書いてしまいがちなmargin（マージン）とpadding（パディング）について説明しています。margin: 10px;margin: 10px 20px;margin: …

• 

  22:52

  【JavaScriptで戦闘ゲーム制作 #4】 敵と味方のHPゲージを実装する！効果的なアニメーション処理（transition）まで

  第４回目の動画では、HPの表示をテキストベースだったところをさらに視覚的なゲージを追加してみます。HPがどんな数値だとしてもJSで計算させ、上手く割合に応じたゲージにしていきましょう。このシリーズの…

• 

  09:33

  classとidの違い、実際の挙動についての紹介！初心者が陥りがちなJavaScriptの挙動についてもコーディング事例とともに紹介！

  分かるようで分からない、classとidの違いについて説明しています。同一のidはなぜページ内に１つしか記述できないのか？複数idを記述すると、JSでどんな挙動になるのか？などを解説しています。

• 

  07:13

  line-height解説！実際にはどのような考え方で適用されるのか？行間を上手く空けるには？

  １行の高さを指定するline-heightですが、どのような動きをしているのか？を解説しています。また、どのくらいの数値が良いのかやどういった指定が実際にはされるのかまで紹介しています。

• 

  47:47

  【サイト模写コーディング】初心者向け！メリット・注意点・流れなどを解説！実際の模写をやるところまで。

  今回はWebサイトの模写についてお話しています。サイト制作の力が一番つく模写コーディングをやってみましょう！やってみることでのメリット・注意点・流れなどを解説していますので、この動画を見れば、模写を…

• 

  20:41

  Webアイコンフォント！Font Awesome（フォントオーサム）の読み込みの方法と使い方について解説！

  ※機材や設定の関係で若干音量が小さくなっております。イヤホンをしていただいた上で音量の調整をお願い致します。Web制作で必須となりつつあるWebフォントの１つFontAwesomeについて説明してい…

• 

  54:48

  【実践！サイト模写コーディング！超初心者向け】解説しながらHTML/CSSを書いていきます！レスポンシブ（スマホ）対応まで！

  模写の注意点や準備はこちらhttps://factory-programming-mv.com/video/一緒にサイト制作の練習をしましょう！今回、私が数年前に作成した非常にシンプルなサイトを基に…

• 

  11:22

  【JavaScriptで戦闘ゲーム制作 #5】 配列と連想配列を上手く使って、敵をランダムに表示する方法

  第５回目の動画では、単一の敵しか出なかったところを複数の敵を定義して、ランダムに出すようにします。このシリーズの動画再生リストは以下です。活用してください！https://factory-progr…

• 

  06:44

  Swiperでスライドさせる画像サイズカスタマイズ！上手い具合にスライダー上に画像を表示させるには？

  ※機材や設定の関係で若干音量が小さくなっております。イヤホンをしていただいた上で音量の調整をお願い致します。前回の動画（下記URL参照）に引き続き、今回はSwiperで画像を表示させた際のサイズの調…

• 

  19:28

  ローディング画面を実装する方法！ページの読み込み中にローディングアニメーションを表示させてみましょう！

  読み込みが遅いページに対してローディングアニメーション（loading animation）などを実装しないといけない場面があると思いますが、今回はユーザーに待たせているのを感じさせにくいローディン…

• 

  18:25

  多くのソフト（アプリ）で使えるショートカットキーを覚えて、爆速コーディングを目指す！

  コピーやペーストを行う時、マウスやトラックパッドをいちいち使ってクリックしてやっていませんか？この動画ではどのアプリ（PCソフト）でも使える汎用的なショートカットキーを紹介しています。できるだけたく…

• 

  01:23:54

  【実践！サイト模写コーディング！初心者向け】 記事の一覧が並ぶサイトの作り方！解説しながらHTML/CSSを書いていきます！レスポンシブ（スマホ）対応まで！

  サイトを１から作る練習を一緒にやっていきましょう！１回目の模写動画よりも少し複座なサイトを解説しながら模写しています（ただし、今回も前に私が作ったサイトです）実践的な為、分からないことがあれば下のH…

• 

  13:58

  ページ内リンク解説！HTMLだけでページ内のリンクを実装してみましょう！

  HTMLだけでページ内リンクを作る方法を解説しています。実際の動き方や活用の方法、URLとの関連性まで説明しています。※この動画ではスムーススクロールについては解説していません。

• 

  21:33

  text-shadowとbox-shadow解説！文字や要素自身に色々な影をつけるには？

  影をもっと直感的にCSSで生成するためのWebアプリを作りました！こちらもご活用ください！box-shadow ジェネレーターhttps://front-end-tools.com/generate…

• 

  01:12:11

  【実践！サイト模写コーディング！初心者向け】 解説しながら初心者向けにHTML/CSSを書いていきます！レスポンシブ（スマホ）対応まで！

  サイトを１から作る練習を一緒にやっていきましょう！今回は第三弾です前回のサイトで模写したサイトの下層ページを作っていきます。実践的な為、分からないことがあれば下のHTML/CSS再生リストを見て復習…

• 

  30:56

  CSSのアニメーション、イージング（easing）について解説！transitionとanimation

  ※お詫びと訂正。cubic-bezierの発音を「キュービックビザイアー」としていますが、正しくは「キュービックベジェ」です。今回は、Webデザインで非常に重要な要素である「CSSのアニメーション」…

• 

  12:42

  Visual Studio Code！おすすめの初期設定解説！コーディングの環境を整えていきましょう！

  ※撮影時点での設定方法と現在の方法には若干の違いがあります。10:40あたりで触れているEmmetのVariablesの設定について、現在の手順は以下の通りです。1. 検索欄で「emmet vari…

• 

  11:02

  Visual Studio Codeのデザイン（配色テーマ）変更や・ファイルアイコンのテーマ（アイコンのデザイン）変更の方法について解説！

  VSCodeの見た目を変更する方法を紹介しています！デフォルトでは黒ベースのダークな感じですが、白ベースのライトな感じに変更したりダークテーマにおいても様々なものがあります。さらにHTMLやCSSな…

• 

  20:00

  Visual Studio Codeのおすすめプラグイン（拡張機能）紹介！

  VSCode （ビジュアルスタジオコード）に拡張機能を追加することによってさらに使いやすくしていきましょう！全般的に使えるものや、HTML・CSS、JavaScriptなどに使えるプラグインなども紹…

• 

  19:24

  ユーザースニペット機能を使って爆速コーディング！Visual Studio Code（ビジュアルスタジオコード）の機能をフル活用しましょう！

  Visual Studio Code（ビジュアルスタジオコード）のスニペット機能（ユーザー辞書のようなもの）を使って、効率の良いコーディングをするための環境作りをしていきましょう！動画ではHTML・…

• 

  13:54

  dl, dt, ddについて解説！実際のコーディング例とulとの違い、コーディング例まで！

  ※機材の関係などで、音量が小さくなっています。ご注意ください。dl（description list）, dt, ddタグのそれぞれの意味と使い方について説明しています。formやQ&Aなど…

• 

  15:43

  初心者向け！hタグ（h1・h2・h3など）の使い方・考え方について解説！

  初心者がHTMLコーディングでつまづきやすいhタグについて解説しています。なぜ h1・h2・h3・h4・h5・h6タグがそれぞれあるのか？それぞれの使い分けは？h1タグは何回使って良いのか？などhタ…

• 

  20:11

  Visual Studio Code（VSCode）のよく使うショートカットなどを紹介！できるだけ無駄な動きを減らして、爆速コーディングに近づいていきましょう！

  Visual Studio Code（ビジュアルスタジオコード）のよく使うショートカット 集を紹介しています。エディタにはショートカット が用意されていることが多いですが、VSCodeも例外ではあり…

• 

  11:57

  初心者向け！text-align徹底解説！テキスト以外にも有効な理由とその事例について解説！

  ※機材の関係で音量が小さくなっております。ご注意ください。レイアウトでよく使うtext-alignについて紹介しています！実はこのCSSプロパティは文字だけに効く訳ではありません！画像やaタグなどの…

• 

  12:59

  formについて解説！基本的な考え方や、action, method, nameやコーディング例まで form#1

  HTMLのformタグについて解説しています。どの属性やタグがどのような働きをしているのか？そして、マークアップする際の基本的考え方などについても紹介しています。動画内で説明していたdl, dt, …

• 

  25:52

  formのinputタグについて解説！よく使うtype属性を紹介し、実際の表示なども確認していきます！ form#2

  HTML5以降から複雑になってきているformのinputについて解説しています。かなり種類が多いので、よく使うものを抜粋して紹介しています。それから、それぞれの機能やスマホで見たときにどう変わるか…

• 

  19:56

  HTML form解説！inputタグのcheckbox（チェックボックス）, radio（ラジオボタン）基礎 form#3

  HTMLのform（フォーム）でよく使う、チェックボックスとラジオボタンについて解説しています。この２つは設定しないといけないものが多く、若干複雑なので動画で繰り返し学び、慣れていきましょう！

• 

  09:56

  HTMLのform！selectタグ・optionタグの使い方解説！ form#4

  htmlのformでよく使う、selectタグoptionタグ（プルダウンメニュー）の実装の方法を紹介しています。それから、選択肢を表示する際にもっと見やすくする（optionをグループ化し、見出し…

• 

  11:56

  HTMLのform、textarea（テキストエリア）タグを解説！テキストを複数行入力してもらう為の場所を実装しましょう！ form#5

  お問い合わせフォームなどでよく使う、textareaタグの使い方を覚えましょう！意外とみなさんが知らないtextareaの機能やそれをCSSで制御する方法なども解説しています。複数行テキストを入力し…

• 

  12:36

  formで必須項目・入力例などを実装できる、required, placeholder, valueについて解説！ form#6

  formを作る際、必須項目や入力例などを予め表示しておくと、ユーザーがスムーズに入力をできるようになります。required, placeholder, valueはそれらを簡単に実装できるものです…

• 

  37:05

  HTMLのform（フォーム）におけるcheckbox（チェックボックス）、radioボタンのカスタマイズ方法解説！ form#7

  checkboxやradioはブラウザごとにデザインが異なる上、変更することが基本的にはできません。しかし、labelタグと上手く組み合わせることによって、様々なカスタマイズが可能です。この動画では…

• 

  16:20

  Google Chrome（クローム） のよく使うショートカットを紹介！

  ブラウザはPCを使う上で必ずと言って良いほど使うツールですが、意識してショートカットを使っている方は少ないのではないでしょうか？今回は、数あるショートカットの中からよく使うものをピックアップして、お…

• 

  22:49

  レスポンシブ対応・応用編！メディアクエリーをより深く知って、様々な大きさのスマホ・タブレットなどに対応していく方法を紹介します。

  サイトによっては、スマホ・PCに限らずタブレット用のデザインも必要になります。そうすると、かなり複雑な構造なCSSを書いていかなければなりません。この動画では複数の条件を一度に指定する方法から、実際…

• 

  19:42

  初心者必見！９つのググり方（情報の調べ方）のコツ！効率的に世界中の情報にアクセスしましょう！

  意外と皆さんが知らなくて困っているググり方（Googleなどの検索エンジンなどで、調べものをするやり方）についてお話ししています。標準でついているGoogleの様々な検索ツールやオプションですが、使…

• 

  14:05

  GoogleMap（グーグルマップ）の埋め込み方法と、CSSで大きさを整える方法！

  今やウェブ制作・ホームページ制作では当たり前となった、グーグルマップの埋め込みとそのカスタマイズ方法について説明しています。PCとスマホのそれぞれの考え方についても触れています。Twitter（ツイ…

• 

  29:34

  CSSアニメーション！transtion-delayとanimation-delayについて解説！実際のコーディング例まで紹介

  CSS animation（アニメーション）で、要素の動き方を少しずつずらさなければならないことがあります。delayプロパティを使わなくとも無理矢理できる方法もありますが、transition-d…

• 

  11:43

  CSSだけで、文字列の省略を簡単にする方法！

  JavaScriptなどでも実装できますが、CSSのみでも簡単に文字を途中で省略する方法はあります。今回はtext-ellipsisというプロパティを使って、記事の一覧に表示されている文字列を省略し…

• 

  22:58

  CSS アニメーションプロパティの知っておくべき４つのプロパティ解説！再生回数や再生方向などをCSSだけで制御していきましょう！

  複雑なCSSアニメーションを組む際に必要な以下のanimation propertyについて解説しています。- animation-iteration-count- animation-direct…

• 

  52:24

  文字を１文字ずつアニメーションさせる方法と、そのバリエーション・考え方を紹介！かっこいいCSSアニメーションを実装できるようになりましょう！

  transformについての動画はこちらhttps://factory-programming-mv.com/video/今回は、文字を1文字ずつアニメーションで動かす方法を紹介します。最近はアニメ…

• 

  13:00

  CSSでグラデーションを実装してみましょう！linear-gradientを使って線形グラデーションさせる方法を紹介

  グラデーションを直感的に生成できるツールを作りました！是非活用してみてください！https://front-end-tools.com/generateGradient/グラデーションは画像などを作…

• 

  14:39

  ハンバーガーメニュー・ドロワーメニューの作り方４！アイコンの色々なアニメーションパターンと実装方法を紹介！（全５回）

  リクエストにより、ハンバーガーメニュー・ドロワーメニュー動画の続編を配信しました。今回はハンバーガーメニュー・ドロワーメニューのアイコン自体のアニメーションのパターンや考え方・実装方法について解説し…

• 

  29:04

  ハンバーガーメニュー・ドロワーメニューの作り方５！メニューコンテンツ自体のアニメーションについてパターンを紹介！（全５回）

  ハンバーガーメニュー・ドロワーメニューの作り方動画シリーズの最終回です。（またご要望により続編を作る可能性もあります）今回は、前回のアイコン自体のアニメーションパターンの紹介に引き続き、メニューコン…

• 

  32:51

  JavaScriptで日付を取得・表示などをするための方法とある日付までのカウントダウンをする方法

  JavaScript（ジャバスクリプト）のDateオブジェクトを使って、今日の日時や曜日などを取得・表示してみましょう！基本が分かったら、明日の今の日時を表示したり、ある日付までのカウントダウン日を…

• 

  09:59

  初心者向け！おすすめの独自ドメインの取得方法と手順について紹介！

  動画内で説明していたドメインのサービス（お名前.com）はこちらhttps://px.a8.net/svt/ejp?a8mat=2HHJ1S+FH9R02+50+2HEVMR今回はなかなか初心者の方…

• 

  10:13

  初心者向け！おすすめのレンタルサーバー契約手順紹介！オススメの理由と流れ、実際に使えるようになるまで

  動画内で説明しているサービスURLはこちらhttps://px.a8.net/svt/ejp?a8mat=2ZLBND+DML78Y+CO4+6H729レンタルサーバーのサービスはたくさんありますが…

• 

  52:47

  スクロールしたら要素をフワっとアニメーションして、表示させる方法を紹介！

  動画内で紹介していた私のプロフィールサイトURLはこちらです。https://kazuma-takeda.com/Webページがスクロールされた際に、特定の要素がフワっと表示されるアニメーションの実…

  ダウンロード有
• 

  11:11

  初心者向け！ドメイン（domain）とサーバー（server）の紐付け・関連付けについて

  初心者がつまづきやすい、ドメインとサーバーの紐付けの手順について説明しています。別の動画で説明している、お名前.comとエックスサーバー（X SERVER）の説明をしていますが、基本的な流れは別のサ…

• 

  10:43

  サーバーにワードプレス（WordPress）を簡単にインストールしてすぐに使えるようにする方法！エックスサーバー（X SERVER）でのやり方を紹介！

  ワードプレスを使おうと思っても、初心者の方はなかなかどうやって設定したら良いのか分からないと思います。この動画では、サーバーにWordpressをインストールし、簡単にサイト制作を始める準備を整える…

• 

  16:26

  自分で作ったサイトを公開する方法！契約したサーバーと（FTP）接続して、ファイルを追加・変更・削除する方法を学びましょう！

  せっかくホームページを制作しても、ネットに公開できなければいけません。この動画では、初心者がつまづきやすいサーバーと（FTP）接続してファイルをアップロードなどをする手順を紹介しています。今回はどの…

• 

  13:37

  各言語のコメントアウトについて解説！メモをコード内に残しておいたり、コードを無効化する方法を紹介しています。

  一時的にコードを無効化したり、コード内にメモを残しておきたいと思ったことはありませんか？コメントアウト機能を使えば多くの言語でこういったことが可能になります。さらにVSCodeではコメントアウトのシ…

• 

  14:10

  SSL証明書の取得と、サイトを常時SSL化（常にhttpsで接続）する方法を解説！

  今回はSEOやサイトの表示速度などにも関わるSSL化についての動画です。なかなか初心者の方には難しい設定かと思いますが、動画で一緒に学んでいきましょう！XSERVERの無料独自SSL設定の記事はこち…

• 

  17:46

  ワードプレスって何？WordPressの機能や特徴を紹介！まずはどんなものかを知って活用していきましょう！

  この動画で紹介している記事は以下で公開しています。https://factory-programming-mv.com/posts/whats-wordpress/世界の多くのシェアをもつCMS（C…

• 

  16:43

  ワードプレス（WordPress）のテーマとは？テーマの追加・削除の方法と、テーマの検索方法・アップロードの考え方から方法までを紹介！

  ワードプレス（WordPress）の基本的なシステムである「テーマ（theme）」について説明しています。テーマとは簡単に言うと「テンプレート」のようなものですが、テーマの大きな違いを画面を一緒にみ…

• 

  31:10

  CSSで、記事（リンクなど）にマウスホバー（hover）したら画像を拡大・大きくするアニメーションの実装方法！

  メディアサイトなどでよくある、記事にマウスを乗せた時に画像を大きくする処理について紹介しています。よくJavaScriptを使わないとできないのではないか？と質問を受けますが、HTML / CSSの…

• 

  13:30

  SASS / SCSS の自作関数（function）を作る方法とその仕組みについて学んでいきましょう！

  ＠functionや＠returnとは何か？引数（ひきすう）をどう使えば良いのか？まで説明しています！Sassにはmixin（ミックスイン）というものがあり、どちらかというとmixinの方が使われる…

• 

  15:41

  SASS / SCSS でz-indexを効率よく管理する方法

  レイヤー（重なり）が複雑なサイトを作っていると、z-indexの管理に困ることがありませんか？この動画ではそういった悩みをSassの自作関数を使うことによって解消します。有名な管理方法ですので、今回…

• 

  12:29

  CSSでフォントを指定する方法！font-familyについて解説

  Web制作でも必ずと言って良いほど使う、フォントの指定について解説しています。また、初心者がなかなかわかりづらいフォントの優先度のお話や、ゴシック体・明朝体（serifとsans-serif）の違い…

• 

  19:23

  Webフォント（Googleフォント API）を読み込んで、CSSで適用させる方法！

  Web上でどの端末やブラウザでも同じ様にフォントを表示させるのはなかなか難しいですが、Webフォントだったら手軽に実装することができます。この動画では無料サービスであるGoogle fontを使って…

• 

  15:46

  Sassでeach文を使って、コーディング効率をあげる方法！

  同じようなクラス名・セレクタや、CSSプロパティを書く時、Sassでは効率的に書く方法があります！JSのforEachと同じようにSassでeach文を書けるようになることで、修正時などにスムーズに…

• 

  15:36

  どのブラウザでどのCSS・JavaScriptg使えるのか調べる方法！Can I Useの紹介と見方を解説

  どのブラウザでどのCSS・JavaScriptが使えるのか知りたいことはありませんか？そういった時、Can I Useというサイトがあります。ただし、英語なのでなかなか抵抗がある人も多いと思いますの…

• 

  21:41

  ワードプレス（WordPress）の子テーマとは？そしてその設定方法・活用方法とは？

  既存のワードプレステーマの細かい部分をカスタマイズしていきたい際には、子テーマというものを作らなければなりません。今回は子テーマとは何か？とその活用法などを紹介していきたいと思います。CSSの詳細度…

• 

  50:00

  初心者必見！様々な方法でHTML・CSSで要素を上下・左右真ん中にする方法！

  HTML / CSSでコーディングをしていると、うまくレイアウトを揃えられないことはありませんか？この動画では、・インライン（inline）要素・インラインブロック（inline-block）要素・…

• 

  45:16

  スクロールアニメーション！CSSとJSでカーテンが開くように要素を表示！

  モダンなサイトで見かける、カーテンが開いていくような要素の表示アニメーションについて解説しています。CSSとJavaScriptをうまく組み合わせることによって実現できますが、少々難しい部分もあるの…

• 

  15:36

  型（type）とは？JavaScriptにおける型の紹介と扱い方、型変換の方法について紹介！

  本やWeb上のドキュメントなどを読んでいると、「型」という言葉が出てくると思います。この型について初心者の方から多く質問をいただくので、今回基礎的な部分を紹介するための動画を作りました。他のプログラ…

• 

  08:08

  独自テーマでトップページを作る際の考え方・作り方を解説！

  Wordpress Codexのテンプレート階層のページはこちらhttps://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%B…

• 

  27:44

  独自テーマでトップページに投稿データを表示させる方法

  ワードプレス（Wordpress）の主要機能の１つである「投稿」をトップページにループ（while文）で表示させる方法について解説しています。各ワードプレスが用意している関数やメソッドの解説から、ル…

• 

  14:36

  初心者向け！PHP基礎。基本的な考え方と、書き方について解説！

  ※動画内では「page-phptest.php」ファイルに書き込み、表示していますが、front-page.phpやheader.phpなど、表示できるファイルであればどこに記載しても問題ありません…

• 

  39:12

  初心者向け！ワードプレスでよく使うPHPの構文を紹介！for文、while文、if文など

  ※動画内では「page-phptest.php」ファイルに書き込み、表示していますが、front-page.phpやheader.phpなど、表示できるファイルであればどこに記載しても問題ありません…

• 

  14:45

  独自テーマで、アイキャッチ・サムネイル画像を表示する方法！imgタグとbackground-imageで出力する手順を紹介！

  投稿などのデータを出力する際の、アイキャッチ画像を出力する方法を紹介しています。the_post_thumbnailでimgタグ出力する方法とwp_get_attachment_url・get_po…

• 

  25:50

  独自テーマで、投稿と固定ページの詳細ページを表示する方法！

  独自テーマを作る際の投稿ページや固定ページのコンテンツを表示させる方法を見ていきます。必須となる関数や書き方などがありますので、この動画で学んでいきましょう！ちなみにこの動画では基本的な部分しか紹介…

• 

  10:40

  独自テーマでサイドバー（sidebar.php）を設定・表示する方法と、レスポンシブ対応の為のCSS

  今回はブログサイトなどでよくあるサイドバーの作り方について紹介しています。具体的なファイルの作成方法から呼び出し方、HTML/CSSを用いたコーディング例を紹介しています。また、スマホ対応時のCSS…

• 

  12:20

  独自テーマでJavaScriptを、functions.phpを使って読み込ませる方法！

  独自テーマにおいてJavaScriptを読み込ませる方法について紹介しています。今回は公式でも推奨されているfunctions.phpに記載する方法を使っています。また、wp_enqueue_scr…

• 

  18:25

  独自テーマでカスタムメニューを設定・表示させる方法！ワードプレスサイトのヘッダーに実際に表示してみましょう！

  独自テーマにおいて、サイト全体のメニューを簡単にダッシュボードで管理できるようにする為の機能「カスタムメニュー」を使ってみましょう。functions.phpで設定する方法から、呼び出したい任意の場…

• 

  10:41

  独自テーマでウィジェット（widget）を設定・表示させる方法！複数設定や表示させる方法まで！

  ワードプレスにおいてウィジェットは特徴的な機能ですが、今回は独自テーマで設定して、HTMLに出力する方法を紹介していきます。また、一箇所ではなく複数箇所で設定・表示する方法も学んでいきます。動画内で…

• 

  13:52

  コーディングしたページを表示させる！独自テーマでカスタムテンプレートを設定・切り替える方法

  ワードプレス（Wordpress）の独自テーマでカスタムテンプレートを設定・使用してみましょう！この動画では、管理画面上のエディター（グーテンベルグ）でサイドバーなどの有無を切り替える方法を紹介して…

• 

  16:26

  カテゴリーに紐づく投稿一覧ページをcategory.phpを使って、作る方法！

  ワードプレス（Wordpress）では、投稿にカテゴリーを設定することができますが、この動画では各カテゴリーページに関連する投稿データを一覧で表示する方法を紹介しています。独自テーマで、catego…

• 

  12:15

  ワードプレスでページが見つからない場合のページ（Not Found・404ページ）の作り方！

  記事のURLなどを管理していると、意図せずリンク切れを起こしてしまい、ユーザーを離脱させてしまう場合があります。ワードプレス（Wordpress）ではそういったことを防ぐために、あらかじめ404ペー…

• 

  20:09

  ワードプレスでカスタムフィールドの定義と表示方法・プラグイン（Advanced Custom Fields。ACF）について解説！

  ワードプレス（Wordpress）には様々な機能が搭載されていますが、サイトによってはワードプレスの基本機能だけでは入力項目が不足したり物足りなくなってきます。そんな時使えるのが、このカスタムフィー…

• 

  16:04

  ヘッダーが固定されているページで、スクロールしたらヘッダーを表示・非表示する方法！

  ファーストビューを効果的に表示したい際に、ヘッダーの表示・非表示をする方法を学んでいきましょう！JavaScriptとCSSを使えば簡単に実装することができます。動画内で紹介していた、ファイルのサン…

• 

  19:37

  アロー関数について解説！ES6（ES2015）で追加された新しい書き方を学びましょう！

  今回はJavaScriptのアロー（arrow）関数について説明しています。よく質問をいただくfunction()との書き方の違いや、thisの挙動の違い、また使い所やメリットなどについてお話してい…

• 

  10:25

  windows（ウィンドウズ）10以降でbashをインストールして使えるようにする方法！

  Windowsでコマンドラインを操作する場合、macやlinuxと違うコマンドになってしまいます。巷で流れている情報はmac向けのことが多いので、この動画ではwindows（10以降）の方向けに同じ…

• 

  24:21

  コマンドラインツール（Command Line Tool）概要。macのターミナルや、Windowsのコマンドプロンプトとはなんなのか？概要やメリット・基本的な使い方を紹介します！

  GulpやWebpack、Gitなどフロントエンドを主に触っていても、基本的にコマンド操作をおこなうことでしか扱えないツールがあると思います（一部GUIツールもありますが）今回はその一番基本的なもの…

• 

  08:13

  新しいグーグルアナリティクス（Google Analytics4）の登録から設定までを紹介！2020年10月リリースの最新バージョン４について

  SEO対策や、ECサイトのコンバージョン管理など、サイト運用に欠かせないGoogle analyticsについて紹介しています。2020年10月にバージョン４（version4）へと更新されたGoo…

• 

  10:42

  古いブラウザやIEに、新しいJavaScriptやCSSを対応させる方法！polyfill（ポリフィル）やBabel（バベル）とは？

  JavaScriptはECMAScript2015やES6と呼ばれる新しいものがどんどん追加されています。CSSも同様にIEなどでは使えないものの、便利なプロパティが追加されています。こういったもの…

• 

  12:52

  テンプレートリテラル（テンプレート文字列）とは？ES2015（ES6）で追加された、文字列を扱う便利な構文を学びましょう！

  今回はES2015で追加された、テンプレートリテラルについて説明しています。今までは文字列の中に変数を組み合わせる時に＋（プラス）記号をたくさん使っていましたが、この書き方を学ぶと、文字列連結する際…

• 

  17:24

  配列を効率よく処理する！JavaScriptのforEach（フォーイーチ）解説！

  for文をもっと書きやすくするJavaScriptのforEach文の紹介動画です。３つの引数（ひきすう）を取ることができるforEach文ですが、それぞれの意味や特徴、使い方などについて解説してい…

• 

  33:34

  【JavaScriptでパスワード生成ツールを作る！】パスワードジェネレーターを１から作ってみましょう！ まずはファイルの作成や簡単なパスワード生成から #1

  JavaScriptでWebアプリケーション作成を作ってみるシリーズの動画です。ライブコーディングをおこないながら、実際にアプリケーションを作っていきます。実践的なツールを作ることでJavaScri…

• 

  18:26

  【JavaScriptでパスワード生成ツールを作る！】英語の小文字と大文字を含めたパスワードを生成できるようにJavaScriptを書き換えてみましょう！ #2

  JavaScriptでWebアプリケーション作成を作ってみるシリーズの動画です。今回はシリーズ第二弾で、前回までパスワードが数字のみだったものに加えて英字を追加してみます。英字を追加すること自体は簡…

• 

  08:38

  少しずつ画像が変化する、スライダーの作り方解説！JavaScriptの有名プラグイン「スワイパー（Swiper）」と簡単なオプション変更で、よくあるアニメーションを実装してみましょう！

  今回は、少しずつ画像や要素が変わっていく、Swiper（スワイパー）のfadeオプションについて解説しています。スライダープラグインで少しずつ変化するアニメーションが組めることを知らない方も多いよう…

• 

  09:26

  立体的な箱が回っているように見えるスライダーの実装方法紹介！Swiper（スワイパー）で奥行きのある印象的なアニメーションを実装してみましょう！

  今回はかなり印象的になる、奥行きのあるスライダーの実装方法を紹介しています。この動画で紹介しているような3D表現はCSSやJavaScriptの実装だとなかなか手間ですが、Swiperのオプションな…

• 

  33:47

  【JavaScriptでパスワード生成ツールを作る！】間違われやすい文字列を除外する欄を生成して、さらにユーザーが追記・編集できるようにしましょう！！ #3

  JavaScriptでWebアプリケーション作成を作ってみるシリーズの動画です。今回はシリーズ第三弾で、ユーザーがよく見間違えやすいような文字列を除外する為の機能を実装します。配列と文字列を変換する…

• 

  17:37

  奥行きのある、オシャレなスライダー実装！Swiper（スワイパー）で左右のスライドを回転させるオプションと考え方を紹介します！

  今回はSwiperで奥行きのあるスライダーの実装方法を紹介しています。メイン表示しているスライダーの左右のスライダーを少し回転させることで立体感を出すことができ、まるでアルバムアートワークの選択UI…

• 

  14:33

  スライダーの上に文字を固定で表示させる方法！Swiperで各スライダーの上と、スライダー全体の上に固定でコンテンツを置いておく方法を紹介します！

  今回の動画では、Swiper（スワイパー）でスライダー上に固定のコンテンツを常に表示させておく方法を紹介しています。各スライダーと、スライダー全体の上に固定で表示することで、ユーザーへの訴求コンテン…

• 

  09:44

  レスポンシブ対応（スマホや大きな画面に対応）したスライダーをSwiper（スワイパー）で作る方法！

  スライダーを扱っていると画面幅に応じて要素数を増減させたり、見せ方を変えたくなることがあります。この動画では。スワイパーのオプションを使って要素数を変更したり、余白を変更する方法を紹介しています。S…

• 

  37:10

  スライダーのページネーションやナビゲーション（左右の矢印）をカスタマイズしておしゃれにする方法！Swiper（スワイパー）を使いこなしましょう！

  今回はSwiperで基本的に使えるページネーションとナビゲーションをカスタマイズする方法を紹介しています。こういったプラグインなどはバージョンが上がっていくと、カスタマイズ方法も変わっていく為注意が…

• 

  10:45

  ナビゲーションとページネーションをスライダーの外に出す方法！人気のプラグインSwiper（スワイパー）での方法を紹介！

  公式ドキュメントなどには紹介されていない、ナビゲーションやページネーションをスライダーの外側に配置する手順を紹介しています。なかなか調べても初心者にとっては難しいことが多い為、この動画で一緒に学んで…

• 

  22:55

  【JavaScriptでパスワード生成ツールを作る！】 どんな文字列でパスワードを生成するか、ユーザーに選択してもらう為の機能を追加しましょう！ #4

  JavaScriptでWebアプリケーション作成を作ってみるシリーズの動画です。今回はシリーズ第四弾で、ユーザーにパスワードの文字列の生成のされ方を選択してもらう機能を実装します。数値のみなのか、数…

• 

  18:15

  真ん中のスライド以外を小さくしたり、透明にして、Swiper（スワイパー）で独自性のあるインパクトあるスライダーを作る方法！

  Swiperのような高機能なJavaScriptプラグインには、様々なオプションが用意されており、それを使うだけも多種多様なスライダーを作ることができます。しかし、サイトによってはオプションなどでは…

• 

  20:13

  【JavaScriptでパスワード生成ツールを作る！】生成するパスワードの文字数をユーザーが選択できるような機能を追加しましょう！ #5

  JavaScriptでWebアプリケーション作成を作ってみるシリーズの動画です。今回はシリーズ第五弾で、ユーザーが、生成されるパスワードの文字数を選択できる機能を追加していきます。選択肢としてよく使…

• 

  13:16

  【新サービスリリースのお知らせ】コピペで簡単！text-shadow（テキストシャドウ）生成（ジェネレーター）ツール！

  サービスURLはこちらhttps://front-end-tools.com/generateTextshadow/英語版はこちらhttps://front-end-tools.com/en/gen…

• 

  18:58

  【新サービスリリースのお知らせ】コピペで簡単！box-shadow（ボックスシャドウ）生成（ジェネレーター）ツール！

  サービスURLはこちらhttps://front-end-tools.com/generateBoxshadow/英語版はこちらhttps://front-end-tools.com/en/gene…

• 

  23:39

  【JavaScriptでパスワード生成ツールを作る！】生成するパスワードの個数をユーザーが選択できるような機能を追加しましょう！ #6

  JavaScriptでWebアプリケーション作成を作ってみるシリーズの動画です。今回はシリーズ第六弾で、ユーザーが、生成されるパスワードの個数を選択できる機能を追加していきます。選択肢としてデフォル…

• 

  44:42

  【JavaScriptでパスワード生成ツールを作る！】生成したパスワードを気軽にコピーできるような機能を付けましょう！ #7（最終回）

  JavaScriptでWebアプリケーション作成を作ってみるシリーズの動画です。今回はシリーズ第七弾で最終回です。生成したパスワードそれぞれに「コピーする」ボタンを設定し、気軽にユーザーがコピーでき…

• 

  09:48

  【新サービスリリースのお知らせ】画像などが簡単に加工できる！CSS Filter（フィルター）生成（ジェネレーター）ツール！

  サービスURLはこちらhttps://front-end-tools.com/generateFilter/英語版はこちらhttps://front-end-tools.com/en/generat…

• 

  08:33

  【新サービスリリースのお知らせ】背面の要素にエフェクトがかかる！CSS backdrop-filter（フィルター）生成（ジェネレーター）ツール！

  サービスURLはこちらhttps://front-end-tools.com/generateBackDropFilter/英語版はこちらhttps://front-end-tools.com/en…

• 

  12:51

  【新サービスリリースのお知らせ】複雑なグラデーションを初心者でも簡単に作ることができる！CSS ジェネレーター！

  サービスURLはこちらhttps://front-end-tools.com/generateGradient/英語版はこちらhttps://front-end-tools.com/en/gener…

• 

  08:55

  JavaScriptのfor of 文について解説！そもそもfor ofって何？という説明から実例まで！

  ※動画内で、forEachとの比較をしていませんが、forofのメリットとしてはbreakやcontinueが使える点です。普段配列などを順番に処理する際は、for文を使うと思いますが、この動画では…

• 

  16:41

  初心者向け！box-sizingについて解説！活用の方法を理解して、HTML / CSSのコーディングをやりやすくしましょう！

  サイト制作でHTML / CSSを使用する際、widthやheightをしているのに何故かそれ以上のサイズになってしまうことってありませんか？それは、paddingやborderの値が影響してしまっ…

• 

  20:07

  CSSのcalc関数について解説！異なる単位の計算をJavaScriptを使わずにする方法を学びましょう！

  サイト制作をしていると、単位の違う計算をしなければ目的のデザインを作れないことがあります。この動画では、そんな時に使えるCSSの「calc」（カルク）関数の使い方・考え方を紹介しています。また、実際…

• 

  15:58

  JavaScriptで使う代入演算子について解説！++ や += がどんな意味なのか？どうやって使うのか？

  JavaScriptでコーディングをしているとよく見かける、++, --, +=, -=について解説しています。初心者があまり気にしないで使っていることが多い、この辺の演算子をきちんと理解することに…

• 

  07:09

  初心者向け！JavaScriptの配列を追加・削除してみましょう！

  JavaScript（ジェバスクリプト）で、配列を扱うと追加や削除をしなければならない場面があります。この動画では、・push・unshift・pop・shiftメソッドそれぞれの紹介と実例を紹介し…

• 

  16:44

  初心者向け！フォルダやファイルの階層構造と指定の方法まとめ！

  この動画では初心者向けにフォルダやファイルの階層構造と指定方法を説明しています。ファイルのパスが正しくないと、画像などが表示されないため、パスの基本的な考え方を説明します。具体的にはHTMLでの画像…

• 

  14:54

  初心者向け！JavaScript（ジャバスクリプト）で要素を取得する基本的な方法を紹介！

  JSでクラスを追加・削除したり、スタイルを変更したりする際には、要素を取得する必要があります。今回は、よく使う基本的なものを解説しています。この動画では、特に・getElementById・quer…

• 

  18:43

  CSSを使って、複雑なグラデーションを指定してみましょう！linear-gradient応用編！

  CSSで指定できるグラデーションは単に２つの色の組み合わせのみではありません。この動画では、より高度なグラデーションの指定方法について学びます。動画内で紹介していたツールURLはこちらhttps:/…

• 

  17:55

  CSSで円形グラデーション！（radial-gradient） 中心から外側に向かって、グラデーションさせる方法を学んでいきます！

  CSSでは様々なグラデーションをかけることができますが、今回は円形にグラデーションをかける方法を学びます。・色を複数指定する方法・中心位置を変更する方法・グラデーション開始位置を変更する方法などにつ…

• 

  14:01

  CSSで扇形にグラデーション！（conic-gradient） 時計回りに色を段々と変化させる方法を解説します！

  CSSでは様々なグラデーションをかけることができますが、今回は扇形にグラデーションをかける方法を学びます。・色を複数指定する方法・中心位置を変更する方法・グラデーション開始位置を変更する方法などにつ…

• 

  45:47

  パララックス（視差効果）について解説！Rellax.jsでスクロールエフェクト（効果）をかけて、奥行きのある演出をしてみましょう！

  今回は、最近のサイトでよく見かけるパララックス（parallax）・視差効果の実装方法について解説しています。自前で実装するのは難しいため、Rellax.js（リラックス）というjQuery（ジェイ…

• 

  08:55

  JavaScriptで繰り返し文！while（ホワイル）文について解説！for文との違いと活用方法

  プログラミング言語でよく使われる、while文について説明しています。for文と比較すると、シンプルですが書き方や活用の方法はどのように違うのでしょうか？基本的な書き方から実例までを簡単に説明します…

• 

  16:23

  JavaScriptでCSSを直接、変更・削除・取得する方法！様々な方法で、JSでデザインを変更しましょう！

  他の動画では、JavaScriptでクラスを切り替えることによって要素を表示・非表示したり、デザインを変更することを紹介してきましたが、今回の動画ではstyleメソッドやcssTextメソッドを使っ…

• 

  31:30

  CSSだけで背景パターン・模様を生成する方法！グラデーションのrepeating（リピーティング。繰り返し）プロパティを使って、様々なパターンを作ってみましょう！

  今回は、グラデーションを指定する為のCSSのみで、ストライプなどの背景パターンを作る方法を紹介しています。linear-gradient・radial-gradient・conic-gradient…

• 

  13:59

  JavaScriptで属性（attribute）を設定（setAttribute）・取得（getAttribute）・確認（hasAttribute）する方法と活用例！

  今回はHTMLタグに設定する属性を、新たに追加したり取得したり存在を確認するための方法を紹介しています。活用例としては、外部サイトへのリンクに別タブで開くtarget="_blank&qu…

• 

  08:57

  CSSだけでテキストにマーカーを引いたような線を実装する方法！

  画像などで文字にマーカーを引くことはできますが、今回はlinear-gradientの技術を応用して、文字にCSSのみでマーカーを引いてみましょう！

• 

  10:26

  CSSだけで画像の上にグラデーションや背景パターンを重ねる方法！

  PhotoShopなどで背景の上にグラデーションを合成することはできますが、今回はCSSのbackground-imageとlinear-gradientなどを使ってCSSのみで実装する方法を紹介し…

• 

  11:46

  CSSだけで、文字にグラデーションをかける方法！

  画像を作ることにより、文字にグラデーションをかけるものを表示することはできますが、文字を変更したり色を変更したりする際にいちいちPhotoShopなどの画像編集ソフトを使わなければなりません。今回は…

• 

  10:42

  JavaScriptで切り捨て・切り上げ・四捨五入・絶対値・べき乗をする方法

  JavaScriptで様々な数値の処理を学んでいきましょう！・切り捨て Math.floor / Math.trunc・切り上げ Math.ceil・四捨五入 Math.round・絶対値 Math…

• 

  09:29

  JavaScriptで子要素・兄弟要素・親要素を取得する方法！

  この動画では特定の要素の子要素・兄弟要素・親要素を取得する方法を解説しています。・子要素 children・最初の子要素 firstElementChild・最後の子要素 lastElementCh…

• 

  47:37

  JavaScriptでプラグインを使わずに（画像を切り替える）スライダーを作ってみましょう！

  簡単に画像を切り替えるくらいのスライダーは、プラグインの使い方を学習するよりも自作したほうが早く作れることがあります。この動画ではHTML, CSS, JavaScriptを使って１からギャラリーの…

• 

  09:43

  【新サービスリリースのお知らせ】CSSで変形を制御する、transform（トランスフォーム）ジェネレーター！

  サービスURLはこちらhttps://front-end-tools.com/generateTransform/英語版はこちらhttps://front-end-tools.com/en/gene…

• 

  09:05

  【新サービスリリースのお知らせ】CSSで枠線をつける！border ジェネレーター

  サービスURLはこちらhttps://front-end-tools.com/generateBorder/英語版はこちらhttps://front-end-tools.com/en/generat…

• 

  04:38

  【新サービスリリースのお知らせ】CSSで三角形・矢印作る！三角形ジェネレーター

  サービスURLはこちらhttps://front-end-tools.com/generateTriangle/英語版はこちらhttps://front-end-tools.com/en/gener…

• 

  18:57

  filter関数について徹底解説！JSで効率よく配列データをフィルタリングして、目的の配列に作り替えましょう！

  今回は、JavaScriptで配列をフィルタリングできるfilter関数について説明しています！ある配列から特定の条件で別の配列を作ることができるとても便利なものなので、是非この動画で学んでいきまし…

• 

  14:43

  【新サービスリリースのお知らせ】サンプルから選択して編集できる！ボタンジェネレーター

  サービスURLはこちらhttps://front-end-tools.com/generateButton/英語版はこちらhttps://front-end-tools.com/en/generat…

• 

  14:12

  JavaScriptで配列内のデータを順番に足していく reduce, reduceRightメソッドについて解説！

  配列内の数値や文字列を足していく（連結していく）ために便利なreduce（リデュース）とreduceRight（リデュースライト）の紹介です！数値であれば、総数を計算させることができますが、文字列だ…

• 

  15:01

  CSSで3Dの表現をするには？transform-styleとperspectiveについて紹介！

  近年、CSSやブラウザの対応によってWebGLを使わなくてもCSSのみで3Dの表現ができるようになりました。ただし、transformで3Dの指定を施したとしても、立体的にはなりません。この動画では…

• 

  24:39

  HTML/CSSで奥行きのある立方体を描画してみましょう！１からコーディングするチュートリアルを公開

  HTMLやCSSで３D表現をすることが出来ますが、実際どのようにコーディングしたら良いか分からないこともあると思います。この動画ではまず基本的な立方体をHTML / CSSのみで１から作ることによっ…

• 

  20:46

  JSで配列をシャッフル（shuffle）する（ランダムに並べ替える）方法！フィッシャー・イェーツのアルゴリズム（Fisher–Yates shuffle）

  JavaScriptで配列内の要素をランダムに並べ替える際、ライブラリを使うことでも実現できますが、意外と数行のコードで実現できてしまいます。今回はフィッシャーイェーツのアルゴリズムと呼ばれるものを…

• 

  07:41

  JSのオブジェクト（連想配列）のキー（key）とバリュー（value）をそれぞれ配列で取得する、Object.keys, Object.values, Object.entries について解説！

  JavaScriptでオブジェクトを扱っていると、keyやvalueのみのデータを取得したい場合があります。そういった時に使えるのが、・Object.keys()・Object.values()・O…

• 

  10:58

  if, else文を１行で書ける！三項演算子について解説！JavaScriptをもっと効率的に書く方法。

  この動画では、if文を短縮して書くことができる、三項演算子（条件演算子）について説明しています！他のプログラミング言語でも採用されているこの書き方を学んで、簡単なif文を今後はもっと効率よく書いてい…

• 

  57:24

  ページ内スムーススクロールと、モーダルメニューをクリックした後の自動メニュー閉じについて！

  今回はJavaScriptのwindow.scrollToメソッドを使って、シンプルなページ内スムーススクロールを実装する方法を紹介しています。単にヘッダーのメニューにページ内リンクを設定する方法と…

• 

  09:31

  オブジェクト（連想配列）を繰り返し処理することができる、for...in 文を紹介！

  オブジェクト（連想配列）を反復処理させるには、Object.keysとforEach文などを使う方法もありますが、今回はもう少し短く書くことのできる for in文について説明しています。様々な繰り…

• 

  16:33

  JSのsome（サム）とevery（エブリー）メソッドについて解説！配列をもっと効率的に扱ってみましょう！

  今回の動画では、配列を効率的に扱うことができる、someとeveryメソッドについて解説しています。配列内のデータがある条件に１つでも一致しているかを判定するsomeと、配列内のデータがある条件に全…

• 

  15:29

  find, findIndexの使い方解説！JavaScriptで配列から条件に合うデータやindex（位置）を簡単に取得

  【追記】以下の２つも使えるようになりました！- findLast() 条件に合う最後のものを取得- findLastIndex() 条件に合う最後のindexを取得今回は、配列から条件に応じて目…

• 

  22:07

  【新サービスリリースのお知らせ】直感的にアニメーションを生成できる！CSS transition ジェネレーター

  サービスURLはこちらhttps://front-end-tools.com/generateTransition/英語版はこちらhttps://front-end-tools.com/en/gen…

• 

  11:43

  プロが教える！SEO対策解説！SEO（Search Engine Optimization）とは？検索エンジン最適化するメリットとは？

  この動画では、SEOとはそもそもなんなのか？やどういったところに使われているのか？などについて解説しています。SEO対策について知っていると様々なメリットがありますが、意外と知っている人が少なかった…

• 

  23:42

  JavaScriptで配列の中身をソート（並び替え）させる sort メソッドを学びましょう！

  今回は配列の内容をsortさせるメソッドについて紹介しています。降順・昇順に並べ替える方法の他、任意の順に配列内を並び替える方法までを実践的に紹介しています。配列についての動画はこちらhttps:/…

• 

  21:04

  JSではなくて、HTML側にデータを定義できる！カスタムデータ属性（data-◯◯）の活用方法と実践的な活用法について

  サイトを制作していると、JavaScriptではなくHTML側にデータを定義した方が管理が楽な場合があります。そういった時に使えるのが、このカスタム属性です！この動画では実際の設定方法や活用方法など…

• 

  17:24

  とても便利なposition stickyについて解説！特定の条件でスクロール時に要素を固定しましょう！

  比較的新しい、CSSのpositionプロパティ「stikcy」について学びましょう！この値の特徴を学ぶことで、absoluteとfixedを組み合わせたような機能を実装することができます！

• 

  22:20

  CSS Filterプロパティについて解説！要素や画像にエフェクトをつけて、さまざまな表現をしてみましょう！

  今回は、CSSのみで色々なエフェクトをかけることができる、CSSのfilter（フィルター）プロパティについて説明しています。このプロパティは・blur（ぼかし）・brightness（明るさ）・c…

• 

  17:57

  JavaScriptで配列内のデータを削除・挿入・差し替えることができる splice メソッドについて解説！

  JSで配列のデータを追加・削除できるメソッドは他にもありますが、spliceを使用することで、さらに効率的にこういったことができるようになります。この動画では、実践的なデータを編集しながら、処理の流…

• 

  13:31

  JavaScriptで、ある配列を元に編集された別の配列を生成する mapメソッドについて解説！

  今回は、違う配列データに手を加え他の配列を作ることがmap（マップ）メソッドについて解説しています。実践的なデータを元に、mapを使用するとどういった結果を得ることができるのか？を一緒に見ていきまし…

• 

  17:00

  JavaScriptで文字列を切り取ることができる、slice, substring, substr メソッドの解説！

  文字列を切り取って、処理を返すメソッドは大きく・slice（スライス）・substring・substrがありますが、これらの処理の違いや挙動の違いなどをこの動画で説明していきます！

• 

  20:42

  なぜ意図せずデータが同期する！？JavaScriptにおける値渡しと参照渡しについて解説！

  JSで配列やオブジェクトを扱っていると、意図せず別の変数に格納したデータが同じものになってしまうことがあります。この動画では、なぜこういったことが起こるのか？そしてどうやって解決すれば良いのか？を解…

• 

  10:49

  JavaScriptで特定のaタグのみtarget="_blank"をつける方法！（特定の属性値を持つタグに属性を付与する方法）

  サイト制作をしていると、特定の条件下においてタグに特定の処理をしたいことがあります。この動画では、aタグのhref属性がhttpから始まる場合にのみ、別のタブで開くtarget属性を指定する方法を紹…

• 

  27:16

  初心者向け！CSS Flexbox（フレックスボックス） 実践編。４つのよくある基本的なレイアウトをFlexboxで組んでみましょう！

  初心者の方に講義をしていると、よくflexboxの活用の仕方を聞かれます。CSSのflexboxはとても便利なものですが、機能も多くてなかなか活用が難しいのだと思います。この動画では初心者向けに簡単…

• 

  15:18

  画像などを上手く表示できる、object-fit・object-positionについて解説！

  以前はbackground-sizeやbackground-positionでしかできなかった表現を新しく登場した・object-fit（オブジェクトフィット）・object-position（オブ…

• 

  27:51

  fetch（フェッチ） API を使って、外部サイトやローカルファイルを読み込んで、HTMLに出力してみましょう！

  今回は、fetchの基本的な流れや仕組みを解説した上で、外部サイトや、ローカルファイル（テキストファイルやjsonファイル）を読み込んで、HTMLなどに出力する流れまでを見ていきます。今回呼び出す外…

• 

  18:29

  よくある、郵便番号から住所自動入力を実装する方法を紹介 1/2

  コンタクトフォームや会員登録の画面などでよく見かける、住所の自動登録の実装をしていきます！第１回目のこの動画では、簡単な見た目とJSを書いていきます。２つ目の動画は会員専用です。登録は以下から出来ま…

• 

  13:38

  JavaScriptのアニメーションライブラリ「GSAP」を紹介！まずは機能とできることを見ていきます GSAP #1

  様々なサイトでよく使われている、GSAP（GreenSock Animation Platform。読み方はジーサップ）について紹介します！CSSやSASSだけでは難しいアニメーションの制御ができる…

• 

  18:33

  GSAPでよく使う基本の４つのメソッド（to, from, fromTo, set）について紹介！ GSAP #2

  JSのアニメーションライブラリ「GSAP」の導入と、基本的な４つのメソッドについて紹介しています。特に４つ目のsetについては使い方が分からない方も多いので、是非動画で覚えていきましょう！trans…

• 

  07:45

  GSAPで一番基本的なduration（アニメーション時間）とdelay（アニメーション開始時間の遅れ）について解説！ GSAP #3

  CSSで言うと、・transition-duration・transition-delay・animation-duration・animation-delayにあたる、duraitonとdelay…

• 

  29:40

  GSAPでよく使うアニメーションの動きと、実際の指定方法を解説！transformやopacityなど GSAP #4

  この動画では、ちょっとわかりにくいtransformの・translate（移動）・scale（伸縮）・rotation（回転）・skew（歪み）それぞれのGSAPにおける指定方法と動き方の解説を主…

• 

  14:06

  GSAPで、簡単に複数の要素をズラしてアニメーションさせる方法を学びましょう！全２回（第１回目） GSAP #5

  今回はGSAPのstaggerというものを使って、delayを少しずつズラしていく処理を簡単に書く方法を説明していきます。第１回目のこちらの動画では、まず基本的なHTMLとCSSを組んでGSAPのt…

• 

  11:21

  GSAPでアニメーションを繰り返す方法と、その際のオプションについて解説！ GSAP #7

  CSSのアニメーションプロパティでは繰り返しなどを簡単に指定することができましたが、GSAPではどのように指定するのでしょうか？また、オプションはどのようなものがあるのかを見ていきます。具体的には・…

• 

  15:30

  GSAP keyframes（キーフレーム）の使い方を紹介！複数の状態をアニメーションする方法 GSAP #8

  今回はCSSにも存在するkeyframesの使い方を見ていきます。toメソッドやfromメソッドのみだとなかなかアニメーションの順序などを制御しづらいですが、keyframesを知っていると、より複…

• 

  10:08

  GSAPでアニメーションを繋げて処理することが出来る Timeline（タイムライン）について学びましょう！ GSAP #9

  より直感的にアニメーションの順序などを決めることができる、GSAPの「Timeline」について説明しています。基本的な概念を理解し、より複雑なアニメーションを組めるようにしましょう！

• 

  26:29

  GSAPのより高度なメソッドを扱えるようにしましょう！停止・逆再生・再生速度など GSAP #10

  GSAPのアニメーションをインタラクティブに制御することが出来るようになる、メソッドについて説明しています。この動画では・play（再生）・pause（一時停止）・restart（最初から再生）・r…

• 

  37:58

  GSAPのイージング（easing）について解説！アニメーションのしかたを制御して、様々な動きを表現できるようにしましょう！ GSAP #6

  ※この動画は内容を修正したものを再掲載したものです。この動画ではアニメーションの始まりから終わりまでの変化のしかたを制御できる「イージング」について説明しています。・in, out, inOut・p…

• 

  16:17

  GSAPの label （ラベル）について解説！デバッグなどに便利な seek（シーク）との使い方も GSAP #11

  この動画では、GSAPのラベルという概念について説明しています。タイムライン上でラベルという目印のようなものをつけて、アニメーションを再生する際に活用することができます。また、長くなってしまったタイ…

• 

  25:38

  GSAPのアニメーションの開始位置を制御する様々な方法を紹介！ GSAP #12

  GSAPのdelay以外にもアニメーションの開始位置を指定することができるオプションは色々とあります。この動画では・'数値'・'+=数値'・'-=数…

• 

  13:52

  GSAPのコールバック（callback）関数を理解しましょう！ GSAP #13

  GSAPにはいくつかのコールバック関数が用意されています。この動画では- onStart- onComplete- onUpdate- onRepeat- onReverseCompleteについて…

• 

  09:59

  GSAPのTimline（タイムライン）を連結したり、ネスト・グルーピングしてみましょう！ #14

  GSAPではTimelineをつなげたり、１つの大きなTimelineに入れ子にしたりすることができます。この動画はその方法と、実際の動きやメリットについて説明しています。

• 

  11:51

  クリックした所から広がるようにGSAPでアニメーションしてみましょう！ 全２回（第１回目） GSAP #15

  この動画では、staggerの機能を使ったインタラクティブなアニメーションの実装を紹介しています。staggerの・grid・axis・from・amount・yoyoEaseなどを使って、より高度…

• 

  19:22

  丸をJSで生成して、テキストと一緒にアニメーションさせてみましょう！ 全２回（第１回目） ※後編は動画の概要欄にあります

  ※後編の動画ページに、完成版のコードをダウンロードすることができるリンクを用意しています！JavaScriptとCSSを組み合わせて、図形とテキストを組み合わせたアニメーションを実装してみましょう！…

• 

  11:15

  テキストアニメーション実装！GSAPで一文字ずつ色や位置をランダムに配置して、その後アニメーションしながらフェードアウトする！ 全２回（第１回目） ※後編は動画の概要欄にあります

  ※後編の動画ページに、完成版のコードをダウンロードすることができるリンクを用意しています！この動画では、一文字ずつ色や位置や角度をランダムに設定したものを段々と整列させ、その後文字列の両端から非表示…

• 

  24:12

  自動で円形にメニューを並べて、順番にアニメーションさせる方法！ 全２回（第１回目） ※後編は動画の概要欄にあります

  ※後編の動画ページに、完成版のコードをダウンロードすることができるリンクを用意しています！この動画ではJavaScriptのアニメーションライブラリ「GSAP」を使って、開閉するメニューを実装します…

• 

  14:02

  クリックしたら、星が散りばめられる「クリックエフェクト」をGSAPで実装してみましょう！全２回（第１回目） ※後編は動画の概要欄にあります

  ※後編の動画ページに、完成版のコードをダウンロードすることができるリンクを用意しています！この動画では、クリックした座標をJSで取得し、そこを中心にアイコンを外側に広がるように表示させてみます。動画…

• 

  31:14

  クリックすると、たくさんの箱が集まってできていくようなグローバルメニューをGSAPで作ってみましょう！ 全２回（第１回目） ※後編は動画の概要欄にあります

  ※後編の動画ページに、完成版のコードをダウンロードすることができるリンクを用意しています！今回の動画では、画面のサイズに応じてJavaScriptで箱を作り、それをメニューを開く際にランダムに表示さ…

• 

  06:32

  最新のFont Awesome（フォントオーサム）バージョン６の読み込み方法と、アイコンの探し方について解説！

  以前別の動画でも読み込み方と使い方は紹介しましたが、公式サイトのUIなどが刷新されたので、再度こちらの動画で説明しています。動画内で紹介していた、過去のFontAwesomeの動画は以下です。htt…

• 

  10:47

  pictureタグとsourceタグについて解説！メディアクエリではなくて、HTMLタグで画像を切り替えてみましょう！

  この動画では、比較的新しいタグである・picture（ピクチャー）タグ・source（ソース）タグについて説明しています。sourceタグに記述することができる・media属性・type属性について…

• 

  12:17

  １つのページで複数のswiper（スワイパー）を動かす方法！

  この動画では、ページ内で複数のSwiperを動作させる方法を紹介しています。やり方としては簡単ですが、意外と変数などを分けなければならないことは調べても出てこないので、是非この動画で学んでいきましょ…

• 

  07:09

  下にスクロールでヘッダーを隠し、上にスクロールでヘッダー表示させる機能を実装してみましょう！全２回（第１回目）

  この動画では、JavaScriptとCSSを使ってページの途中でスクロールを上下にした際に、ヘッダーの表示を切り替えるアニメーションを実装していきます。第２回目の動画はこちらhttps://fact…

• 

  11:23

  CSSでアスペクト比（縦横比）を簡単に指定できる、aspect-ratio解説！画像や動画の比率を簡単に設定できるようにしましょう！

  今回は、比較的新しいCSSであるaspect-ratioについて紹介しています。aspect-ratioの簡単な使い方・考え方・複数の書き方についてお話ししていきます。動画内で紹介していた、obje…

• 

  06:02

  CSS Grid（グリッド）解説！CSS Gridとはなんなのか？どういう場面で使われるのか？などを紹介します！ #1

  今回からいくつかの動画でCSS Gridのシリーズを配信していきます。第１回目のこちらの動画では、CSS Grid（グリッド）とはなんなのか？どういった部分で使われるのか？を紹介していきます。要素を…

• 

  08:52

  CSS Grid（グリッド）の各用語と考え方の解説！グリッドコンテナー・グリッドアイテムとは？ #2

  今回の動画では、CSS Gridを検証しやすいFirefoxを使って、各用語の解説をおこなっています。・コンテナー・アイテム・ライン・セルについて解説しています。CSS Gridの記事などを調べる時…

• 

  23:03

  サイトに雪を降らせるアニメーションをGSAPを使って実装してみましょう！ 全２回（第１回目）

  ※後編の動画ページに、完成版のコードをダウンロードすることができるリンクを用意しています！今回は、GSAP（アニメーションライブラリ）を使って、雪を降らせるアニメーションを作ってみます。画像を使わず…

• 

  23:39

  CSS Gridで横幅や縦幅を指定できる、grid-template-columnsとgrid-template-rows について紹介！その他特殊な単位や関数も！ #3

  この動画では、CSS gridで列と行の数やサイズを定義できる以下プロパティを紹介しています。・grid-template-columns・grid-template-rows・grid-templ…

• 

  07:02

  CSS Gridで要素（アイテム）の間に余白をgapで設定する！ #4

  これまで格子状に並べてある要素と要素の間に余白を設定する場合はmarginなどが主流でしたが、gapという簡単に余白を指定できるものを使って、簡単に設定できるようになりました。この動画では使い方と、…

• 

  18:31

  CSS Gridでライン番号を指定して、要素を自由に配置する方法と様々な指定方法を紹介！ #5

  CSS Gridには、順番に要素を配置する以外に、自由に配置する方法があります。今回は番号を指定して、要素を配置する方法を紹介していきます。プロパティは以下について紹介しています。- grid-ro…

• 

  12:11

  CSS Gridでエリア名を指定して、要素を自由に配置する方法！ #6

  この動画では、CSS Gridのエリア名を指定することができるプロパティを使って、自由に要素を配置することについて紹介しています。様々な指定の１つですが、覚えておくと便利な機能です！

• 

  11:34

  CSS Gridで範囲外（コンテナーの外）の幅を指定する、grid-auto-rowsとgrid-auto-columnsについて解説！ #7

  grid-template-rowsやgrid-template-columnsで指定した外側に要素が配置されることがあります。もしくは、表示される要素の数が決まっていなくて、何列になるのか分からな…

• 

  07:45

  CSS Gridで配置した要素の順番を任意の順にする、order（オーダー）について解説！ #8

  Flexboxでも使うことができますが、CSS Gridでも要素の順番を任意に変更することができる、orderを指定することができます。この動画では、設定の方法と実際の動きについて見ていきます。

• 

  08:15

  CSS Gridのgrid-auto-flowで配置方向を変える方法と、空いたセルを埋める方法 について #9

  CSS Gridで要素を配置した場合、基本的には横方向に並びますが、grdi-auto-flowのcolumnを使うことで縦方向に並べることができます。この動画では、使い方と実際の動きを見ていきます…

• 

  27:31

  CSS Gridでalign-contentやplace-itemsなど、要素の配置を指定する様々なプロパティを紹介！ #10

  この動画では、CSS Gridによって並べたアイテムのレイアウトを変更できる以下のプロパティについて説明しています。・justify-content・align-content・justify-it…

• 

  15:31

  CSS Gridで折り返しの処理を自動でする、auto-fitとauto-fillについて #11

  Flexboxでアイテムを折り返す際は、flex-wrap: wrapという処理をしていましたが、Gridでも似たような処理をおこなうことができます。今回はそのような処理ができるauto-fitとa…

• 

  15:20

  CSS Grid 実践！メディアサイトのようなレイアウトを組んでみましょう！レスポンシブにも対応！ 全２回（第１回目）

  この動画では、CSS Gridを活用した実践的な内容を紹介しています。いくつかの記事が並ぶようなサイトを想定したコーディングをしながら、レスポンシブ対応を考慮した上で２回に分けて解説していきます。動…

• 

  10:16

  for文の中で処理を飛ばしたり、処理を止める、continueとbreakについて解説！

  for分や、for..of、for..in 文で使える・continue・breakについて説明しています。これらの処理を覚えると、より様々な処理を行えるようになりますので、是非覚えて活用していきま…

• 

  07:54

  簡単にタグを挿入できる insertAdjacentHTML メソッドの紹介！

  createElementメソッドでタグを生成し、appendChildなどでタグを挿入する方法がありますが、insertAdjacentHTML（インサートアジェーソン）はもっと簡単にタグを挿入す…

• 

  11:02

  タグ・要素の挿入をすることができる、３つのメソッドappendChild, before, afterを紹介

  JSにおいてタグを挿入する際によく使う、・appendChild・before・afterメソッドについて、それぞれ実践的に解説していきます。

• 

  06:02

  画像や動画などのテーマフォルダ直下のファイルを呼び出す方法！

  この動画では、ダッシュボードなどからアップロードした画像ではなく、テーマフォルダに保存したファイルを呼び出す方法を紹介しています。get_template_directory_uriという関数の紹介…

• 

  04:44

  パララックスや、スクロールと紐づいてアニメーションできるGSAPのScrollTrigger（スクロールトリガー）の機能や実例を紹介！GSAP ScrollTrigger #1

  この動画から、ScrollTriggerについての解説をいくつかの動画に分けて配信していきます。初回の動画では、実例や公式サイトのコンテンツなどの紹介をしています。JavaScript（JS）を基礎…

• 

  34:25

  GSAP ScrollTrigger（スクロールトリガー）実践編！様々な要素を同時に動かして、より印象的なアニメーションを作る。第２回目（全２回）

  GSAPやScrollTriggerの動画をこれまで配信していますが、今回は多くの機能を取り入れて、より実践的な実装をしていきます。第１回目の動画はこちらhttps://factory-progra…

  ダウンロード有
• 

  16:49

  GSAPのScrollTriggerを読み込んで、基本的な使い方を覚えていきましょう！ GSAP ScrollTrigger #2

  まずははじめの一歩。GSAPとScrollTrigger（スクロールトリガー）を読み込み、基礎的な考え方や記述方法などを学んでいきましょう！動画内で説明していた、GSAPの各URLはこちらhttps…

• 

  09:48

  スクロールとアニメーションの進行度を同期！GSAPのScrollTriggerでscrub, end の使い方を紹介！ GSAP ScrollTrigger #3

  GSAPのスクロールトリガーでスクロールとアニメーションの同期ができる、scrubなどについて学んでいきましょう！この技術を学ぶことで、パララックスなどの演出もできるようになります。

• 

  12:39

  スクロールに紐づいたアニメーション実践編！GSAP ScrollTriggerのscrubとTimelineを使ってみましょう！ 全２回（第１回目）GSAP ScrollTrigger #5

  この動画では、GSAPのスクロールトリガーの技術である、scrubとTimelineを使った実践的なコーディング方法を学んでいきます。今回は、ファーストビューで通常のGSAPのアニメーションをおこな…

• 

  14:18

  アニメーションが終わるまで、要素を固定し続ける pin（ピン） について解説！ GSAP Scroll Trigger #4

  今回は、スクロールトリガーで指定したアニメーションが終わるまで、要素を自動で固定表示にしてくれる、「pin」について説明しています。このオプションを使う時には、要素が自動で追加されるので、そちらの注…

• 

  08:25

  スクロール量に応じて要素のクラスを切り替える toggleClass（トグルクラス） 解説！ GSAP ScrollTrigger #7

  ScrollTriggerでおこなう制御以外で、クラスの付け外しをすることで何か要素の状態を変更したい場合があります。このtoggleClassはそういった時に対応できるオプションです。

• 

  12:45

  GSAP ScrollTriggerの コールバック（callback）関数を解説！ GSAP ScrollTrigger #8

  この動画では、スクロールトリガーの以下のコールバック関数について紹介しています。・onEnter・onLeave・onEnterBack・onLeaveBack・onRefresh・onToggle…

• 

  11:10

  ScrollTriggerで様々なタイミングでアニメーションさせることができる toggleActions（トグルアクション）解説！ GSAP ScrollTrigger #9

  ScrollTrigger（スクロールトリガー）の各コールバックであるonEnter, onLeave, onEnterBack, onLeaveBack時にアニメーションを操作することができるto…

• 

  10:16

  Scrolltriggerで、レスポンシブ対応できる matchMedia（マッチメディア）を紹介！GSAP ScrollTrigger #10

  アニメーションの処理を書いていると、画面幅によってアニメーションの内容を変えなくてはならないことがあります。通常のJSでも処理することができますが、GSAPのScrollTriggerにはあらかじめ…

• 

  22:09

  GSAP ScrollTrigger（スクロールトリガー）実践編！様々な要素を同時に動かして、より印象的なアニメーションを作る。第１回目（全２回）

  ※後編の動画ページに、完成版のコードをダウンロードすることができるリンクを用意しています！GSAPやScrollTriggerの動画をこれまで配信していますが、今回は多くの機能を取り入れて、より実践…

• 

  08:54

  要素の最大値・最小値を設定できる、max-width, min-width, max-height, min-height などについて学びましょう！

  この動画では、画像や動画などにも使用できる、サイズの最小値・最大値が設定できるプロパティについて説明しています。- max-width- min-width- max-height- min-hei…

• 

  08:45

  CSSの便利なプロパティ max-content, min-content, fit-content 解説！

  内包する文字列に応じたサイズが指定できる３つのプロパティを紹介しています。- max-content- min-content- fit-content今まではHTMLを増やすなどで対応していたのを…

• 

  21:59

  CSSの便利な関数 min, max, clamp（クランプ） 解説！

  これまでメディアクエリ（@media）を細かく指定しないとできなかったり、max-width, min-widthなどを組み合わせないと出来なかった処理を簡単にできるようになりました。- min関数…

• 

  13:37

  CSSの便利な単位 vw, vh, vmin, vmax 解説！

  CSSでも比較的新しい単位 vw, vh, vmin, vmax を紹介しています。今までJSを使わないと計算できなかった面倒な処理をCSSのこの単位を使えば簡単に実装することができます。是非覚えて…

• 

  04:18

  ワードプレスでアーカイブページ・投稿一覧ページを作る方法解説！

  archive.php で専用の投稿一覧ページの作り方を紹介しています。functions.phpに記載すべきことや、やらなくてはいけないことも解説しています。

• 

  09:04

  Sassのファイル分割@useと@forwardの使い方！後編

  これまでファイルを分割し他のファイルに読み込ませるには、@importという記述でしたが、廃止になりました。新しく使えるようになったのが、この@useと@forwardです。しっかりと覚えて、ファイ…

• 

  22:29

  Sassのおすすめのフォルダ、ファイル構成について。ある程度の大きさのサイトやWordPressにおけるSassの構成について

  Sassでファイル分割をしていくようになると、構成が複雑になりがちになってしまいます。この動画では、１つの例としてSassのファイル構成を紹介しています。規模によっても違ってきますが、まずはこういっ…

• 

  09:26

  ワードプレスの投稿一覧ページなどで、ページネーションを自動生成する方法！前編（全２回）

  この動画では、アーカイブページやカテゴリーに紐づく一覧ページなどで、ページネーションを自動生成する方法を紹介しています。意外と複雑な関数などを使う為、初心者がつまづきやすいポイントなのでこの動画でし…

• 

  14:43

  初心者向け！SASSをCSSに変換して、使ってみましょう！Dart sass対応の「Live Sass Compiler（ライブサスコンパイラー）」

  Visual Studio Code（ビジュアルスタジオコード）というエディターを使って、簡単にSassをCSSに変換（コンパイル）してみましょう。また、Sassの便利なWebツールも紹介していきま…

• 

  18:24

  Sassのファイル分割@useと@forwardの使い方！前編

  これまでファイルを分割し他のファイルに読み込ませるには、@importという記述でしたが、廃止になりました。新しく使えるようになったのが、この@useと@forwardです。しっかりと覚えて、ファイ…

• 

  05:10

  ワードプレスで、バックアップを自動で定期的に取ってくれる！UpdraftPlus 紹介

  ワードプレスで、定期的にバックアップを取ってくれるプラグインは他にもありますが、今回は復元のしやすい、UpdraftPlus（アップドラフトプラス）を紹介します。

• 

  16:07

  カスタム投稿を簡単に追加できる！Custom Post Type UIの使い方紹介！カスタムタクソノミーの設定方法も

  functions.phpに記述して、カスタム投稿を管理することは可能ですが、記述量が多いので大変です。この「Custom Post Type UI」というプラグインを使えば、簡単に分かりやすくカス…

• 

  18:17

  最新版！初心者向け！JavaScriptの有名なスライダーライブラリ「Swiper（スワイパー）」を使って、簡単にスライダーアニメーションを実装してみましょう！

  ウェブサイトの制作においてスライダーアニメーション（slider animation）は必要不可欠なものになってきました。ただ、自力で１から実装するのは困難を極めるので、今回紹介するようなJSのスラ…

• 

  11:42

  CSSだけで、ページ内スムーススクロールが実装できる！scroll-behaviorについて解説！

  以前は、JSでしかできなかったページ内スムーズスクロールが、CSSのみで実装できるようになりました！この動画では、・scroll-behavior・scroll-margin-topを使って、実装し…

• 

  06:23

  メディアクエリーのhoverについて解説！マウスがホバーできるデバイスでのみアニメーションさせる方法！

  マウスを乗せることができるPCなどのデバイスでのみ、CSSのhoverの指定をしないと、スマホなどではタップした瞬間にアニメーションが動いてしまいます。今回の動画では、そういったことを防ぐための書き…

• 

  10:09

  CSSで変数を定義できる「カスタムプロパティ」を紹介！よく使う値を定義して効率化しましょう！

  近年CSSでも、Sassなどのように変数を定義できるようになりました！カスタムプロパティ（CSS custom properties for cascading variables）といいます。今回…

• 

  05:05

  onclickとaddEventListener clickの違いについて解説！この２つは微妙に意味が違います。

  on◯◯とaddEventListenerで定義されたイベントの違いについて説明しています。意外と知らずにいる方も多いので、この機会に知っておきましょう！

• 

  01:59

  Contact Form 7（コンタクトフォーム）でメールの届く先を設定する方法！

  意外とメールが届く先を変更できないと思っている方が多いですが、簡単に変更することができます。初期設定ではなく、任意のアドレスを設定いたしましょう。

• 

  14:39

  Contact Form 7（コンタクトフォーム）の項目の追加・変更・削除の方法について

  フォームでのユーザーの入力する内容を追加・変更・削除する方法を紹介しています。また、そういった場合にきちんと届くメールの内容に反映される方法も併せて紹介しています。ラジオボタンやセレクトボックスやチ…

• 

  05:43

  Sassの@contentの活用について解説！メディアクエリなどのmixinの記述の幅を広げて、効率的なコードを書いていきましょう！

  @media や @hover などのメディアクエリなどを記述していく際に便利な、@content について説明しています。レスポンシブなサイトを作成するには必須の機能なので、是非覚えていきましょう！

• 

  11:19

  CSSだけで連番を表示させることができる、「counter」紹介！JavaScriptを使わなくても、連番で表示できるようにしてみましょう！

  1, 2, 3... などの数字を自動的にリストの最初に表示させるには、JavaScriptの力が必要と思われている方が多いと思います。しかし今回紹介するCSSを使えば、簡単にその処理をすることがで…

• 

  14:35

  requestAnimationFrame 解説！画面のリフレッシュレート（切り替わり速度）に応じた処理をおこないましょう！

  この動画では、requestAnimationFrame（リクエストアニメーションフレーム）について説明しています。JSでアニメーションやパフォーマンスチューニングをおこなうときに必須のメソッドです…

• 

  14:41

  【JavaScriptで数を当てるゲーム #6】ゲームの難易度を設定して、最後にゲームを完成させましょう！

  このシリーズ最後の動画です！easy / normal / hard を選択して、その際にゲームの難易度が設定できるように実装して、ゲームを完成させましょう！最後までお疲れ様でした！この動画シリーズ…

• 

  11:03

  CSSだけで、子要素が親要素をはみ出す方法！右側だけや左側だけはみ出す方法も！

  Web制作をしていると、どうしても途中ではみ出せたいことがあります。この動画ではCSSだけで特殊な計算をすることで、それを実現する方法を紹介しています！

• 

  13:10

  【JavaScriptで数を当てるゲーム #1】まずは完成版の確認と、基本的なUIから！

  今回のシリーズから、JavaScriptとSassを使って、JSの練習のためのアプリケーション作成をおこなっていきます！１回目は、完成系の確認と、基本的なHTMLなどを組んでいくところから始めていき…

• 

  25:12

  【JavaScriptで数を当てるゲーム #2】スタートボタンを押したら、ランダムな数値を並べてみる。

  前回の実装に引き続き、機能を追加していきます。今回はスタートボタンを押したらランダムに数を生成し、それをパネル上に並べていきます。この動画シリーズの再生リストはこちらhttps://factory-…

• 

  16:46

  【JavaScriptで数を当てるゲーム #3】パネル上の数値をクリックしたら、一番大きな数値を当てられたか判定してみましょう！

  前回に引き続きゲームの実装を進めていきます。今回は、色々な数値が並んでいるパネルをクリックして、あたりかハズレかを判定してみます。この動画シリーズの再生リストはこちらhttps://factory-…

• 

  23:35

  【JavaScriptで数を当てるゲーム #4】タイマーを設定して、秒数と残り時間のゲージを実装してみる。

  前回に引き続き、ゲームの実装を進めていきます。今回は残り時間の秒数と時間のゲージをrequestAnimationFrameというメソッドと、Dateオブジェクトを使ってやってみます。この動画シリー…

• 

  16:17

  【JavaScriptで数を当てるゲーム #5】自動的に問題を次に移行して、最後に正答数と回答数を表示してみましょう！

  引き続きゲームの実装を進めていきます。今回は、一番大きいと思われるパネルをクリックした際に、きちんと次の問題が自動表示され、さらには最後までゲームを進めた時に正答数と回答数を表示するようにします。こ…

• 

  24:30

  データベースなしで、データが保存できる！Webストレージ（セッションストレージ・ローカルストレージ）について解説！

  今までもCookie（クッキー）という技術で、Webにデータを保存することはできましたが、新しく出てきたWebストレージを使えば、さらに大きなデータを長期間保存可能となりました。この動画では・Ses…

• 

  09:58

  カスタム投稿の一覧ページ・アーカイブページを作る方法！

  今回の動画では、カスタム投稿のアーカイブページ・一覧ページの作成方法について詳しく解説します。カスタム投稿:「ニュース」というカスタム投稿を追加して、これをもとに一覧ページやアーカイブページを作成し…

• 

  04:40

  長くなってしまいがちな、functions phpを分割して、読み込ませる方法！

  Wordpressの開発をしていると、どうしてもfunctions.phpのファイルは長くなりがちになってしまいます。ただし、この動画で説明している方法を使えば分割して、読み込ませることができますの…

• 

  12:25

  マウスの座標をJavaScriptで取得する方法と、マウスを変更・編集する方法 2/2

  JavaScriptでマウス座標を取得する方法はいくつかありますが、今回はその中でも・offset (X/Y)・client (X/Y)・page (X/Y)とそれぞれの特徴について、説明していきた…

• 

  05:55

  WordPressでグローバルな変数・関数を定義する方法。サイト全体で共通して呼び出したいデータをまとめて、管理しましょう！

  Wordpressに限らずですが、サイト制作をおこなっているとサイト全体で共通して扱いたいグローバルな変数や関数を定義したい場合があります。そういった場合に使えるのが、このグローバル変数・グローバル…

• 

  14:09

  formのselectタグのカスタマイズについて解説！ブラウザが違っても、CSSでカスタマイズしたスタイルを適用する！

  form周りのタグは、ブラウザが変わるとデザインも変わってしまいますが、今回はselectタグについて解説しています。また、selectボックス内の矢印の変更方法も紹介しています。動画内で説明してい…

• 

  14:58

  マウスの座標をJavaScriptで取得する方法と、マウスを変更・編集する方法 1/2

  JavaScriptでマウス座標を取得する方法はいくつかありますが、今回はその中でも・offset (X/Y)・client (X/Y)・page (X/Y)とそれぞれの特徴について、説明していきた…

• 

  04:50

  JavaScriptの再帰関数についてと、その注意事項を解説！

  JavaScriptの勉強をしていると、「再帰関数」という言葉が出てくると思います。今回はこの用語と実際の記述例を書いていきます。この関数は使い所によってはとても便利ですが、無限ループに陥り、スタッ…

• 

  12:10

  SEO基礎！何をやったら良いのかわからない、具体的にどうしたら良いかわからない方必見！Googleが公式で出しているSEOマニュアル解説！

  SEO対策と１口に言っても項目は多岐に渡り、初心者にとってはなかなか難しいことも多いと思います。また、SEOが変わっていく部分と変わっていかない部分があったりして混乱することもあるかと思いますが、公…

• 

  21:06

  SEO対策の基本とも言える、title（タイトル）タグとdescription（ディスクリプション）タグについて解説！

  今回は、SEO対策の基礎中の基礎であるタイトルタグと（meta）ディスクリプションタグについて解説しています。そもそもどこに設定するのか？HTMLでコーディングしている場合とワードプレスの場合。適切…

• 

  19:30

  SEO対策の目線で考える適切なURL構造について！

  SEO対策を考えるとき、実はURLの構造やパス名も大事になってきます。この動画では、初心者がつまづきやすいURLの考え方やワードプレスなどにおける、設定の方法についてお話しています。

• 

  34:57

  SEO対策から考える、サイト内のメニューやパンくずメニューなどのナビゲーションについて

  今回の動画では、グローバルメニューやサイドバーのメニュー・パンくずリスト・サイトマップなど、ユーザーを誘導するナビゲーションのお話をしています。正しくユーザーを誘導することで、ユーザーにも検索エンジ…

• 

  22:26

  SEO対策に大きく関わるコンテンツ！「質の高いコンテンツ」とは？Googleが考える質の良さとは何かを見ていきます。

  動画内で言及していた、hタグの動画はこちらhttps://factory-programming-mv.com/video/iPAEjnWnBPA/

• 

  12:27

  SEOから考える、「リンク」について解説！適切なアンカーテキスト設定とは？

  サイトで何気なく使っている「リンク」ですが、きちんと設計を考えてあげることでユーザービリティを高め、検索エンジンにもユーザーにも優しいサイトにしましょう！

• 

  14:16

  画像の利用の最適化について！画像ファイルの取り扱いや画像を表示する際の注意点とは？

  SEO視点で考える、画像の利用最適化について考えます。ディレクトリ構造などのファイル管理はどうすれば良いのか？alt属性をどのように考えれば良いのか？などを解説しています。動画内で説明していた、Wo…

• 

  22:12

  Googleキーワードプランナーの使い方と、検索ボリュームの考え方などについて

  キーワード選定をするのに必須なキーワードプランナーの使い方や考え方について説明しています。ただ単に検索ボリュームなどを見て満足していませんか？きちんと書き出して比較することによって、どんなキーワード…

• 

  19:09

  Google広告を出すことによるメリット！データの分析について紹介！

  Google広告を出した際の分析データは、Webマーケティングをしていくのにかなり役立つ情報です！今回は実際のデータと、どのように見ていけばいいのかを解説していきます！Google広告の登録の方法は…

• 

  10:17

  Googleリスティング広告の登録の流れと、各項目について解説！

  この動画では、Google広告を出すための方法を紹介しています。なかなか各項目が難しいというお声を聞くので、詳しく説明していますが、動画内でも説明している通りUIが変わりやすいので、その場合は画面の…

• 

  07:22

  郵便番号から住所自動入力を実装する方法を紹介 2/2

  前回に引き続き、郵便番号から住所を自動入力する実装をしていきます。JSでフォーム周りの実装はなかなかとっつきにくいと思いますが、この動画で是非やってみていただければと思います。今後他の外部APIなど…

• 

  08:30

  GSAPで、簡単に複数の要素をズラしてアニメーションさせる方法を学びましょう！全２回（第２回目） GSAP #5

  こちらは会員専用の動画です！登録は以下から出来ます。https://factory-programming-mv.com/subscription/registerSubscription/今回はG…

• 

  09:58

  クリックした所から広がるようにGSAPでアニメーションしてみましょう！ 全２回（第２回目） GSAP #15

  この動画は全２回の動画の２回目です。第１回目で実装した基本的な要素の配置と、tweenの設定に、さらにずらしてアニメーションさせる実装をしていきます。こちらの動画は会員専用です。以下から登録すること…

• 

  11:14

  GSAPでよく使うアニメーションを管理できるEffects（エフェクト）解説 GSAP #16

  GSAPにはアニメーションを管理することができる、registerEffectメソッドがあります。この動画では基本的な使い方と、Timeline内での使い方や- name- effect- defa…

• 

  15:38

  丸をJSで生成して、テキストと一緒にアニメーションさせてみましょう！ 全２回（第２回目）

  前半の動画に引き続き、GSAPでアニメーションを実装していきます。第１回目の動画はこちらhttps://factory-programming-mv.com/video/CY2boZqUzdU/

  ダウンロード有
• 

  14:59

  テキストアニメーション実装！GSAPで一文字ずつ色や位置をランダムに配置して、その後アニメーションしながらフェードアウトする！ 全２回（第２回目）

  この動画では第１回目に引き続き、一文字ずつアニメーションさせる実装をしていきます。特にeaseにこだわって、それぞれのアニメーションをブラッシュアップしていきます。１回目の動画はこちらhttps:/…

  ダウンロード有
• 

  35:33

  自動で円形にメニューを並べて、順番にアニメーションさせる方法！ 全２回（第２回目）

  この動画ではJavaScriptのアニメーションライブラリ「GSAP」を使って、開閉するメニューを実装します。sin（サイン）やcos（コサイン）を使って、円周上にアイコンを並べて、それをGSAPの…

  ダウンロード有
• 

  22:14

  クリックしたら、星が散りばめられる「クリックエフェクト」をGSAPで実装してみましょう！全２回（第２回目）

  この動画では、クリックした座標をJSで取得し、そこを中心にアイコンを外側に広がるように表示させてみます。第１回目の動画はこちらhttps://factory-programming-mv.com/v…

  ダウンロード有
• 

  25:47

  クリックすると、たくさんの箱が集まってできていくようなグローバルメニューをGSAPで作ってみましょう！ 全２回（第２回目）

  今回の動画では、画面のサイズに応じてJavaScriptで箱を作り、それをメニューを開く際にランダムに表示させることで面白い動きをしたアニメーションを作ってみます。さらに、今回はメニュー内の文字も下…

  ダウンロード有
• 

  06:29

  下にスクロールでヘッダーを隠し、上にスクロールでヘッダー表示させる機能を実装してみましょう！全２回（第２回目）

  この動画では、JavaScriptとCSSを使ってページの途中でスクロールを上下にした際に、ヘッダーの表示を切り替えるアニメーションを実装していきます。

• 

  16:38

  サイトに雪を降らせるアニメーションをGSAPを使って実装してみましょう！ 全２回（第２回目）

  今回は、GSAP（アニメーションライブラリ）を使って、雪を降らせるアニメーションを作ってみます。画像を使わずに、背景と雪をそれぞれCSSで生成し、GSAPを使ってより自然な動きになるようにしてみまし…

  ダウンロード有
• 

  04:44

  CSS Grid 実践！メディアサイトのようなレイアウトを組んでみましょう！レスポンシブにも対応！ 全２回（第２回目）

  この動画では、CSS Gridを活用した実践的な内容を紹介しています。いくつかの記事が並ぶようなサイトを想定したコーディングをしながら、レスポンシブ対応を考慮した上で２回に分けて解説していきます。１…

• 

  05:12

  数値を変化させるカウントアップのアニメーションをGSAPで簡単に実装する方法！

  グラフなどと共に変化していく数値のアニメーション（カウントアップなどの）のやり方を紹介しています。

• 

  12:24

  ワードプレスの投稿一覧ページなどで、ページネーションを自動生成する方法！後編（全２回）

  この動画では、アーカイブページやカテゴリーに紐づく一覧ページなどで、ページネーションを自動生成する方法を紹介しています。意外と複雑な関数などを使う為、初心者がつまづきやすいポイントなのでこの動画でし…

• 

  06:33

  スクロールに紐づいたアニメーション実践編！GSAP ScrollTriggerのscrubとTimelineを使ってみましょう！ 全２回（第２回目）GSAP ScrollTrigger #5

  2022/10/15追記視聴者の方からのご指摘で、mainコンテンツ部分のCSSが抜けていることに気づきました。すみません。つきましては、コメント欄に該当コードを記載しておきますので、そちらを参照し…

• 

  23:50

  任意のスクロール位置にユーザーを誘導することができる snap（スナップ） について解説！ GSAP ScrollTrigger #6

  この動画では、GSAPのScrollTriggerのオプションである、snap（スナップ）について解説しています。任意のスクロール位置にユーザーを移動させることができます。snapには様々なオプショ…

• 

  08:51

  文字列と配列を変換するsplitとjoinメソッドを紹介！

  文字列を特定の文字で区切って配列にする、「split」（スプリット）と配列を特定の文字列で連結して文字列にする、「join」（ジョイン）について紹介しています！これを知らないと、自力で面倒な処理をし…

• 

  14:44

  JavaScriptの変数のスコープ（範囲）について解説！グローバルスコープとローカルスコープってなに？

  プログラミング言語において、変数の影響範囲について知ることは、とても重要です。この動画では・グローバルスコープとローカルスコープについて・ローカルスコープの種類。関数スコープ（引数も含む）とブロック…

• 

  22:31

  よくあるJavaScriptのエラーと解決法・対処法について！初心者やJSの学び始めの人へ！

  よくJSを学び始めた人から質問を受けることについて、まとめてみました。変数・関数名のエラー、スコープ、型などについてと、その対策や普段から気をつけることなどについて説明しています。動画内で紹介してい…

• 

  12:44

  Vue jsとは？その特徴とメリットについて解説！最新Vue.js３対応

  この動画から、Vue.jsのバージョン３の動画シリーズを公開していきます。まずは、特徴やメリット、jQueryではなくVue.jsが使われるようになってきた理由や、特徴の１つである「リアクティブ」の…

• 

  14:01

  Vue js3の読み込みと、基本的な書き方について！

  今回は、Vue.jsの読み込みと、基本となる書き方や考え方について説明しています。バージョン2からバージョン3で書き方が少し変更されたので、注意しましょう。また、JSから移行する際にとりあえず書いて…

• 

  07:26

  Vue jsのディレクティブとデータバインディングについて解説！

  Vue.jsにはv-◯◯という形で書くことができる、ディレクトティブというものがあります。そして、その中でも今回は v-bind という属性をVueのデータと紐付けることができるものを紹介しています…

• 

  14:13

  Vue.jsにおける、クラスとスタイルのバインディングについて解説！

  この動画では、属性をバインド（紐づける）できるv-bindをclassとstyleで活用する方法についてお話ししています。この辺の技術について理解できると、動的にクラスやスタイルを変更できるようにな…

• 

  12:22

  Vue.jsのmethodsを使って、共通メソッド（関数）を定義する方法と、その使い方について

  この動画では、通常のJSでもよく使う関数を定義する方法と、その使い方について説明しています。Vue.jsのメソッドが理解できてくると、一気にできることの幅が増え、Vueを使う意味も大きくなってくると…

• 

  15:29

  【Vue.js実践！】Vueのmethodsとdataを使って、メニューの切り替えをしてみましょう！

  Vueのmethodsやdataを学んでも、なかなか活用の仕方が分からないという声をいただきます。そんな方の為に、どのようにどうやったら活用できるのかを実践形式で紹介しています。今回はよくあるメニュ…

• 

  18:21

  GSAPで、丸とテキストを効果的にアニメーションさせて、簡単なモーショングラフィックスを作ってみましょう！後編

  今回は全２回の動画で、GSAPを用いたアニメーションの作例を紹介しています。縁取りやストライプの円をランダムに配置し、イージングを工夫することで効果的なモーショングラフィックスを展開します。前半の動…

  ダウンロード有
• 

  10:36

  Vue.jsのcomputedについて解説！methodsの違いとは？キャッシュしてくれるとは？

  この動画では、初心者がなかなか理解しにくいcomputedについて説明しています。一見するとmethodsとほとんど変わりないように見えますが、処理結果を保持（キャッシュ）してくれるというメリットが…

• 

  18:02

  GSAPで、丸とテキストを効果的にアニメーションさせて、簡単なモーショングラフィックスを作ってみましょう！前編

  ※後編の動画ページに、完成版のコードをダウンロードすることができるリンクを用意しています！今回は全２回の動画で、GSAPを用いたアニメーションの作例を紹介しています。縁取りやストライプの円をランダム…

• 

  16:24

  条件付きレンダリング！v-if・v-show などを解説。条件に応じて表示を切り替えられるようにしましょう！

  この動画では、設定した変数やメソッドに応じて、表示を切り替える方法について学んでいきます。具体的には・v-if・v-else-if・v-else・v-showのそれぞれの挙動と使い方について解説して…

• 

  17:31

  無限にアニメーションし続ける円。重なった時に反対色になる実装と組み合わせて、表現の幅を広げましょう！後編

  GSAPを使ったアニメーション作品のシリーズです。最初、テキストを１文字ずつアニメーションさせながら表示させた後、円をぼかした状態と透明な状態から、通常の円の状態に戻します。それから、CSSを使って…

  ダウンロード有
• 

  06:17

  HTMLタグを（エスケープさせず）そのまま処理してくれる、v-htmlについて解説！

  vueで定義した変数などに含まれるHTMLタグをそのまま表示したいことがあります。そういった時に使えるのが、この動画で紹介している v-html です。普段内容を表示する際はマスタッシュと呼ばれる …

• 

  18:31

  v-forで配列やオブジェクトを繰り返し処理する方法解説！

  Vue.jsには配列やオブジェクトを繰り返しできる v-for という機能があります。今回は、実際に配列とオブジェクトを処理した際の挙動などを確認します。それから、それぞれを処理した場合の引数の意味…

• 

  08:57

  v-forの中でv-forを回す方法！配列やオブジェクトに含まれる配列などをどのように処理すればいいかを解説

  配列やオブジェクトの中に配列などが含まれているデータ形式はよく存在します。こういった場合にどのように処理すればいいのか、実際の挙動を確認しながら解説しています。複雑なデータ形式の外部APIや変数など…

• 

  11:34

  v-modelでinputタグのデータと、Vueのdataを紐づける（バインドする）方法とその活用方法

  checkbox, radio, select をv-modelで管理・活用する方法についてはこちらhttps://factory-programming-mv.com/video/qT4OFD7S…

• 

  22:26

  HTMLのcheckbox, radio, select をv-modelで管理！活用する方法も

  この動画ではHTMLのチェックボックス(checkbox)、ラジオボタン(radio)、セレクトボックス(select)をv-modelでどのように管理し、実際にどう活用するのかを解説します。動画シ…

• 

  15:13

  データの変更を監視して処理する watch について解説！設定可能な引数やオプションも

  この動画では、dataなどの変更に基づいて別の処理をすることができるwatchについて解説しています。また、引数に設定できる・newValue・oldValueについてや、deepやimmediat…

• 

  16:55

  無限にアニメーションし続ける円。重なった時に反対色になる実装と組み合わせて、表現の幅を広げましょう！前編

  ※後編の動画ページに、完成版のコードをダウンロードすることができるリンクを用意しています！GSAPを使ったアニメーション作品のシリーズです。最初、テキストを１文字ずつアニメーションさせながら表示させ…

• 

  11:31

  Vue jsのライフサイクルフックについて解説！適切なタイミングで処理させる方法

  この動画では、Vue jsのライフサイクルフックについて説明しています。以下動画で説明している内容の概要です。・beforeCreate: これは、Vueコンポーネントがまだ作られていない時点で実行…

• 

  16:17

  Vue jsでドロップダウン・アコーディオンメニューを実装する方法 後編

  この動画では、Vueの基礎的な技術を活用したよくあるWebサイトの機能を実装していきます。今回はドロップダウン・アコーディオンメニューを実装していきますが、実装方法としては色々な形があるので、今回の…

• 

  07:25

  vue.jsのrefsで要素を取得する方法と、その活用方法！

  通常のJSでは、getElementByIdやquerySelectorなどで要素を取得しますが、Vueのrefを使うことで要素を取得・参照することができます。この動画では、実際の使い方と、v-fo…

• 

  27:42

  コンテンツに応じた目次とページ内リンクを自動生成する方法と、CSS変数を使った効率的な開発！

  今回は、コンテンツの見出しをJSで読み取り、自動で目次を生成する方法を紹介します。また、ページ内スムーススクロールの実装とCSSのカスタムプロパティを活用した、修正などに強いコードを書いていきます。…

• 

  16:45

  Vue jsでドロップダウン・アコーディオンメニューを実装する方法！前編

  この動画では、Vueの基礎的な技術を活用したよくあるWebサイトの機能を実装していきます。今回はドロップダウン（dropdown）・アコーディオン（accordion）メニューを実装していきますが、…

• 

  16:49

  VueのComponent（コンポーネント）解説！機能や要素ごとに分割して、呼び出せるようにしましょう！

  サイトやアプリケーションが大きくなってくると、重複したコードが多くなってきます。そんなときに効率化できて便利なのが、このComponent（コンポーネント）です。引数などで、呼び出す際にテキストや属…

• 

  16:34

  CSSだけでスライダーを作る方法！scroll-snapを使って、縦にも横にもスライドできるスライダーを作っていきましょう！

  この動画では、以下のCSSプロパティを使った、スライダーの作成方法をお伝えしていきます。・scroll-snap-type・scroll-snap-alignスクロール位置の制御を可能にするプロパテ…

• 

  11:29

  ゆっくりと流れ続ける、スライダーを実装する方法！Swiperを使って、永遠に横に流れ続けるスライダー

  この動画では、よくある画像がゆっくりと永遠に流れ続けるスライダーを実装する方法を紹介しています。Swiperは通常一定速度でスライドする機能はありませんが、transitionのCSSなどを上書きす…

• 

  08:46

  Vue3 Composition API（コンポジションエーピーアイ）とは？Options API との違い

  Vue3から追加された、Composition APIについて解説しています。今までは、関連している変数やメソッドが離れてしまうことにより、視覚的にみづらくなってしまっていた問題を解決するものです。…

• 

  08:44

  VueのComposition APIでリアクティブなデータを定義する、refとreactiveについて

  今まで、Vue2などで使われてきたOptions API では、dataメソッド内にデータを定義することで、リアクティブなデータを定義してきました。Vue3ではComposition APIが導入さ…

• 

  10:43

  Vue3でref, reactiveで定義したデータにアクセスし、データを書き換える方法

  Vue3において、Composition APIを使用して、refやreactiveを用いて定義したデータを操作する方法について説明します。Composition APIの利用: Vue3ではCom…

• 

  06:12

  Vue3でComposition APIにおける、Computed の定義と呼び出しについて

  Vue3の新しいComposition APIを活用したComputed（コンピューティッド/計算プロパティ）の定義とその呼び出し方法について詳しく解説します。前回の動画では、Composition…

• 

  09:26

  Composition APIにおける、WatchとWatchEffectについて解説！

  この動画では、Vue.jsの「コンポジション API(Composition API)」における「ウォッチ(Watch)」と「ウォッチエフェクト(WatchEffect)」について、初心者向けにわか…

• 

  09:01

  Vue3 の Composition API における、ライフサイクル（Lifecycle）メソッドについて

  動画内で説明していた、Vue3 の公式ドキュメントはこちらhttps://ja.vuejs.org/api/composition-api-lifecycle.htmlVue.js（ビュージェイエス…

• 

  10:38

  CSSの新しいセレクタ、:isと:where関数について解説！効率的にまとめて要素を指定可能！

  今回は、比較的最近使えるようになった、is と where 関数について解説しています。Sassを使っている方は、ネストして書けるので、あまりメリットを感じないかもしれませんが、CSSのみで記述して…

• 

  12:16

  JSでお知らせなどの日付が、◯日以内のものに自動でNEWをつける方法！ 後編

  この動画では、time属性のdatetimeから日付のテキストを取得し、それをJS側で処理することによって、指定した日付以内の日付かどうかを判断する処理を実装していきます。実際に指定した日数以内であ…

• 

  09:24

  JSでお知らせなどの日付が、◯日以内のものに自動でNEWをつける方法！ 前編

  この動画では、time属性のdatetimeから日付のテキストを取得し、それをJS側で処理することによって、指定した日付以内の日付かどうかを判断する処理を実装していきます。実際に指定した日数以内であ…

• 

  15:35

  jQuery（ジェイクエリー）とは何か？なぜjQueryは不要になったのか？

  動画内で説明していた記事はこちらhttps://factory-programming-mv.com/posts/about-jquery/今回の動画では、以前よく使われていたjQueryについて説…

• 

  11:21

  jQueryでDOM（HTML）の読み込み後に処理をする、$（function） についてと、JSでの書き方について

  jQueryを学ぶとおそらく最初に学ぶことになる、＄（function）｛｝などについての説明と、それをJSで書き換えることについて説明しています。現代においてはdefer属性をJSの読み込み時につ…

• 

  13:57

  jQueryでの要素の取得と、JavaScriptでの書き換え方について解説

  jQueryからJavaScriptに移行するときに最初につまづくのが要素の取得です。そもそも取得のされ方が若干違うので、それぞれの要素の取得の流れと書き方の違いを見ていきましょう！動画内で紹介して…

• 

  09:02

  jQueryにおける兄弟要素・親要素の取得とJavaScriptにおける書き方

  jQueryで兄弟要素や親要素を取得する際には、next, prev, parentsなどのメソッドを使って取得することができましたが、JavaScriptでも簡単に書くことができますので、見てみま…

• 

  11:19

  jQueryでクリックイベントなどの処理とJavaScriptでの書き方について。thisの意味と使い方も

  このYouTube動画は、jQueryを使用してイベント処理（特にクリックイベント）を行う方法と、それをJavaScriptに書き換える方法について解説しています。また、動画では「this」の使い方…

• 

  09:26

  jQueryでのクラスの切り替えとJavaScriptでの書き換えについて

  この動画では、jQueryとJavaScriptのクラスの切り替え方法について説明しています。クラスを追加、削除、切り替える方法をデモンストレーションしています。クラスを追加するためには、'…

• 

  12:24

  jQueryでのテキストとHTMLの挿入・取得・書き換えと、JavaScriptでの書き方について

  この動画では、「jQueryを用いたテキストやHTMLの操作方法」について詳しく解説しています。特に、テキストやHTML要素の取得、挿入、そして書き換えに重点を置いています。動画の初めでは、jQue…

• 

  21:32

  jQueryで簡単にフェードイン・フェードアウトができる、fadeIn・fadeOut・fadeToggleとJSでの書き換え 後編

  前半の動画はこちらですhttps://factory-programming-mv.com/video/mKlK9jy8Ieo/この動画では、前回の続編として、フェードイン・フェードアウト・フェード…

• 

  12:24

  jQueryでのCSSの書き換えとJSでの記述方法について

  この動画は、jQueryを使ったCSSの追加・削除・書き換え、そしてJavaScriptでの記述方法について説明しています。主な内容は以下のとおりです。1. jQueryを使ったCSSの追加、削除、…

• 

  22:55

  jQueryのslideUp, slideDown, slideToggleについてと、JSでの書き換え 後編

  ※お知らせとお詫び動画内で、Web Animation APIの説明で、ease: 'ease-in-out'と紹介している部分がありますが。正しくはeasing: '…

  ダウンロード有
• 

  11:50

  jQueryで表示の切り替えとshow・hideメソッドの紹介。それぞれのJSでの書き換え

  この動画では、jQueryとJavaScriptを使ったウェブページの要素の表示・非表示（表示切替・表示非表示・視覚表現の切り替え）の操作と、jQueryのshow・hideメソッド（表示・非表示メ…

• 

  09:34

  jQueryで簡単にフェードイン・フェードアウトができる、fadeIn・fadeOut・fadeToggleとJSでの書き換え 前編

  後半の動画はこちらです。https://factory-programming-mv.com/video/vu2hvAWuq5Q/この動画では、jQueryのフェードエフェクト（フェードイン、フェー…

• 

  07:53

  jQueryのslideUp, slideDown, slideToggleについてと、JSでの書き換え 前編

  この動画の後編はこちらhttps://factory-programming-mv.com/video/gNn-1dErYAk/この動画では、ウェブページ上の要素の表示切り替えをスライドの形式で行う…

• 

  08:19

  jQueryでの属性値の取得・設定・変更とJSでの記述方法

  この動画では、Webフロントエンド開発におけるjQueryとJavaScriptでの属性値の取得、設定、変更方法について解説しています。まず、HTML要素の属性値（属性: "attr&qu…

• 

  11:24

  プログラミングにおける変数や関数、クラス名などの命名規則について

  この動画では、変数名、関数名、CSSのクラス名、オブジェクト指向のクラス名など、プログラミングでよく使われる命名規則について解説しています。・スネークケース。これは単語間をアンダースコア(_)で繋ぐ…

• 

  09:08

  JSONについて解説！特徴や注意点・JavaScriptでの読み込みまで！

  動画内で説明していた記事の内容はこちらhttps://factory-programming-mv.com/posts/about-json/動画内で説明していたfetchの動画はこちらhttps:…

• 

  17:35

  jQueryのeach文の書き方と、JSでの書き換え方について解説！

  JSの配列の動画はこちらhttps://factory-programming-mv.com/video/nFggLCIvC1k/JSのオブジェクトについてはこちらhttps://factory-p…

• 

  09:08

  jQueryのAjax（非同期通信）とJSでの書き換え（Fetch API）について解説！

  JSのfecth APIについてはこちらhttps://www.youtube.com/watch?v=pzIxzegWVu8&t=537sJSONの解説についてはこちらhttps://fa…

• 

  05:44

  CSSだけで現在の文字色を取得して、様々な値に活用できる「currentColor」紹介！

  今回は、CSSの非常に便利な機能、「currentColor」について説明します。この機能を使えば、現在の文字色を簡単に取得し、その色を他のスタイルに活用することができます。「currentColo…

  ダウンロード有
• 

  14:21

  【JavaScriptで戦闘ゲーム制作 #7】 クリティカルヒットを実装してみましょう！

  第７回目の動画では、クリティカルヒットという概念を作ります。クリティカルヒット率を設定し、敵も見方もランダムにクリティカルヒットが入るようにし、ダメージを操作します。このシリーズの動画再生リストは以…

• 

  01:01:03

  【JavaScriptで戦闘ゲーム制作 #8】討伐数を実装して、より複雑なゲームを作っていきましょう！

  第８回目の動画では、敵の討伐数を実装してさらにゲームを複雑化していきます。今どのくらい敵を倒したのか？どのくらい敵を倒せばクリアするのか？を数値として出していきましょう！また、次の敵とエンカウントす…

• 

  47:36

  【JavaScriptで戦闘ゲーム制作 #6】 攻撃のログを分かりやすく加工して出してみよう！

  第６回目の動画では、攻撃などの内容をログ画面に動的に生成する処理を書くことによって、処理の内容を分かりやすくし、デバッグなどを楽にします。このシリーズの動画再生リストは以下です。活用してください！h…

• 

  19:59

  -webkit-, -moz- ってなに？ベンダープレフィックス（Vendor Prefixes）について解説！

  動画で説明していたメモのURLはこちらhttps://hackmd.io/0NhgNFbQSwKkTQ381rfDnAコーディングをしていると、必ず出会う、-webkit-, -moz-, -o-,…

• 

  12:23

  フロントエンド開発に無くてはならない！色々な情報を確認できる、Stat Counterについて紹介！

  動画内で表示していた、メモのURLはこちらhttps://hackmd.io/rpf1go3MS9ujeU7yf-DZTw特定のブラウザでしか使えないCSSやJavaScriptが存在しますが、そも…

• 

  11:09

  モーダルウィンドウなどを簡単に真ん中に配置できる、「inset（インセット）」と関連するCSSプロパティを解説！

  動画内で説明していた、fit-contentの動画はこちらhttps://factory-programming-mv.com/video/2nS-Vc_9Wb4/今回の動画では、「inset」プロ…

  ダウンロード有
• 

  10:12

  メニューやモーダルウィンドウのスクロールをサイトに連動させない！overscroll-behaviorについて解説

  以前は面倒な指定をしなければならなかった、モーダルウィンドウやハンバーガーメニューのスクロールをサイトに連動させない為のCSSを紹介しています！このoverscroll-behavior を使えば、…

  ダウンロード有
• 

  18:02

  モーダルウィンドウを実装する最新のタグ、「dialog（ダイアログ）タグ」を活用した実装！全２回 前編

  後半の動画はこちらhttps://factory-programming-mv.com/video/viThCBnja9U/この動画チュートリアルでは、新しいダイアログタグの使い方に焦点を当て、初心…

• 

  23:17

  モーダルウィンドウを実装する最新のタグ、「dialog（ダイアログ）タグ」を活用した実装！全２回 後編

  前編の動画はこちらhttps://factory-programming-mv.com/video//前回の動画に続き、モーダル画面を作成しています。モバイルウィンドウの開閉とアニメーションに焦点を…

  ダウンロード有
• 

  25:52

  JavaScript（ジャバスクリプト）を最速で学ぶには？初心者向けロードマップを解説！

  動画内で紹介していたメモはこちらhttps://factory-programming-mv.com/posts/js-loadmap/この動画では、JavaScriptの学習に関する初心者向けのロ…

• 

  15:18

  ヘッダーやモーダルの裏側をおしゃれなすりガラス風に実装する方法！

  AppleのサイトやiOSなどでよく使われている、ヘッダーやモーダルウィンドウの裏側をぼかしてすりガラス風にする実装をしてみましょう！具体的には、backdrop-filter（バックドロップフィル…

  ダウンロード有
• 

  21:30

  階層が深い、ドロップダウン「多階層ドロップダウンメニュー」を実装する方法！WordPress（ワードプレス）のカスタムメニューにも対応！前編

  後編の動画はこちらhttps://factory-programming-mv.com/video/yM-uZIKpB3s/SassをCSSにコンパイルする方法はこちらhttps://factory…

• 

  27:37

  階層が深い、ドロップダウン「多階層ドロップダウンメニュー」を実装する方法！WordPress（ワードプレス）のカスタムメニューにも対応！後編

  前編の動画はこちらhttps://factory-programming-mv.com/video/bma-7TabXCc/JSのfindメソッドについてはこちらhttps://factory-pr…

  ダウンロード有
• 

  08:29

  GSAPを使って、途中のコンテンツを横スクロールにする方法！前編

  後編の動画はこちらhttps://factory-programming-mv.com/video/S-YkozogQQU/GSAPの動画リストはこちらhttps://factory-program…

• 

  09:01

  GSAPを使って、途中のコンテンツを横スクロールにする方法！後編

  前編の動画はこちらhttps://factory-programming-mv.com/video/-6d0mTnhcLE/この動画では、GSAP（GreenSock Animation Platf…

  ダウンロード有
• 

  10:23

  本格的なフロントエンド開発に必須のNode.js（ノード）解説！Node.jsとは？どんなものなのか？

  個別で講義もおこなっています！詳細は以下のページからご覧いただけます。https://personal-lesson-programming.com/独自の動画サービスを公開しました！内容はYout…

• 

  04:40

  macの開発を助けるコマンドラインツールのセット、Command Line Tools（CLT）について解説しています。

  この動画では、Macを使った開発作業に不可欠な「コマンドラインツール(Command Line Tools、CLT)」について解説しています。このツールは、ソフトウェア開発をする際に必要なプログラム…

• 

  08:54

  macに、必要なアプリやツールを簡単にインストールできるHomebrew（ホームブルー）について解説！

  動画内で説明していた、Command Line Tools（CLT）のダウンロードの動画はこちらhttps://factory-programming-mv.com/video/ZDCP7LVfXq…

• 

  09:01

  GSAP不要？ブラウザ標準APIのWeb Animations APIについて紹介！

  この動画で説明している内容は、こちらの記事です。https://factory-programming-mv.com/posts/about-web-animation-api/Web Animat…

• 

  10:51

  JSで簡単にアニメーションできる！Web Animations APIの基礎

  Web Animation APIを使うと、Webページにアニメーションを実装することができます。基本的にはHTML、CSS、そしてJavaScriptの三つのファイルを用意して進めます。CSSの部…

• 

  11:33

  Web Animations APIでイージング（easing）を指定する方法と、それぞれのパターンと動き方を解説

  CSSのイージングについての動画はこちらhttps://factory-programming-mv.com/video//イージングをカスタマイズできるツールはこちらhttps://front-e…

• 

  06:54

  Web Animations API でkeyframes（キーフレーム）を使って、任意の順番でアニメーションさせてみましょう！

  この動画は、Webのフロントエンド技術に関する内容で、特にWeb Animations API（バーションAPI）のキーフレームに焦点を当てています。キーフレームは、アニメーションの進行状況や状態を…

• 

  06:49

  アニメーションの流れを細かくコントロールする「offset（オフセット）」について。Web Animation s API で細かい調整をしましょう。

  この動画では、Web アニメーションAPI (Web Animations API) のオフセット機能について解説しています。オフセットは、アニメーションの各段階をカスタマイズするために使用されます…

• 

  05:48

  Web Animations APIでアニメーションの繰り返しを指定できる、iterations（イテレーション）とiterationStartについて

  この動画では、Web アニメーションAPI (Web Animations API) の一部であるアニメーションの繰り返し（イテレーション）に焦点を当てています。このプロパティにより、アニメーション…

• 

  06:19

  Web Animations APIでアニメーションの再生方向を制御することができる、direction（ディレクション）について解説！

  この動画は、アニメーションの再生方向（ディレクション、direction）について紹介しています。動画内では、ボックスが画面上でどのように動くか（例えば、右に移動し、元に戻る動き）をJavaScri…

• 

  06:37

  Web Animations APIでアニメーション再生時の前後の状態を制御する「fill（フィル）」について解説！

  この動画では、アニメーション再生時の前後の状態に関するオプションに焦点を当てて説明しています。オプションとして、アニメーション再生前後の状態を調整するために「fill」オプションを紹介しています。初…

• 

  11:03

  WordPressでユーザーを追加する方法と各権限について紹介！

  ワードプレスサイトを複数人で管理する場合、ユーザーを追加することで、それぞれ記事を作成・編集したり、ユーザーごとの設定をすることができるようになります。また、各権限（管理者・編集者・投稿者・寄稿者・…

• 

  06:02

  トップページの一部をワードプレスの管理画面で編集する方法！

  クライアントなどユーザーが管理画面上から自由にトップページのコンテンツを編集したいといった場合に、ワードプレス（WordPress）ではウィジェットなどの選択肢もありますが、今回は固定ページとしてあ…

• 

  05:04

  ワードプレスでどのテンプレートが表示されているのかを確認する方法！

  WordPressサイトを作っているときに、現在のページはどのPHPファイルが表示されているのか分からなくなることがあります。そういった時に、どのように確認すると良いのかを紹介しています。この動画で…

• 

  07:32

  ワードプレスで固定ページのbodyタグにページのスラッグをクラス名として追加する方法！

  WordPressサイトを作っていると、ある特定のページのみスタイルを当てたり機能を追加したいことが出てきます。トップページだけなどでしたらbody_class関数が出力するクラス名を使えばいいです…

• 

  26:57

  ワードプレスでページの種類ごとの処理をしたい場合の条件分岐の関数を紹介！

  動画内で紹介していた、if文などの動画はこちらhttps://factory-programming-mv.com/video/jmPRbA2X7_k/WordPressでサイト制作をしていると、同…

• 

  05:37

  ワードプレスで抜粋を任意の文字列に変更する方法と、文字が長くなった時の省略文字を変更する方法！

  WordPressの記事の抜粋などを the_excerpt で表示する際、デフォルトでは記事の書き出し部分が表示されてしまいますが、記事ごとに表示内容を変更することが可能です。この動画ではそのやり…

• 

  10:31

  ワードプレスの記事などの投稿をSwiper（スライダー）でスライド表示する方法！

  WordPressサイトを制作していると、投稿やカスタム投稿で作成した記事の表示を、スライド形式で表示したいことがあります。今回は、スライダーライブラリの中でも有名なSwiper（スワイパー）という…

• 

  14:19

  JavaScriptでよく使われる、callback関数（コールバック関数）について

  よくコールバック関数について聞かれるので、今回の動画で説明してみました。実はaddEventListenerなどで使われていますが、どこで使われているのか？や自作の関数で設定する場合の例を詳しく解説…

• 

  05:02

  JSの同期処理と非同期処理（非同期通信）について解説！

  JSを勉強しているとよく出てくる、同期処理（Synchronous Processing）・非同期処理（Asynchronous Processing）について解説しています！あまり意識しない場面も…

• 

  06:40

  JSのスプレッド演算子について解説！

  JavaScriptのスプレッド演算子について解説しています。３つのドット「...」から始まるこの演算子は、配列やオブジェクトを展開させることができます。ただ、少し分かりづらく、質問も多いので今回紹…

• 

  08:38

  JSの分割代入について解説！

  分割代入 (Destructuring assignment) 構文は配列やオブジェクトから別のそれぞれの変数に代入することができる代入方法です。知らなくても実装はできますが、場合によってはかなり効…

• 

  04:27

  便利なVSCodeの拡張機能BookMarks（ブックマーク）を紹介！

  Visual Studio Codeで開発していると、行をブックマークして後で戻ってきたいと思うことがあります。現在VSCodeではそういった機能がないのですが、この拡張機能（プラグイン）を入れれば…

• 

  04:36

  入れ子（ネスト）になったコードが見やすくなる！VSCodeの標準機能Sticky Scroll（スティッキースクロール）を紹介！

  今回はVisual Studio Code（ビジュアルスタジオコード）の便利な機能である、スティッキースクロールについて紹介しています！コードが長くなってくると段々見づらくなってきますが、この機能を…

• 

  06:11

  エラーを見やすく表示！VSCodeの便利なプラグインError Lens（エラーレンズ）を紹介！

  Visual Studio Code（ビジュアルスタジオコード）は標準でエラーを検知しお知らせしてくれますが、標準機能だと見づらい部分があります。このError Lensプラグインをインストールする…

• 

  19:15

  JSのイベントフェーズについて解説！キャプチャリングフェーズとバブリングフェーズとは？

  今回は、JavaScriptを勉強しているとぶつかる問題である、・キャプチャリングフェーズ（Capturing Phase）・バブリングフェーズ（Bubbling Phase）について説明しています…

• 

  14:24

  定義と実行を同時に行える関数「即時関数」について解説！

  この動画では、JavaScriptでよく使用される「即時関数」(Immediately-Invoked Function Expression, IIFE)について説明しています。即時関数は、その定…

• 

  16:33

  videoタグで動画を設置・再生させる方法を紹介！様々なオプションについても解説

  動画内で説明していた、aspect-ratioの動画は以下です。https://factory-programming-mv.com/video/jeaRVM9_HS4/HTMLで動画を簡単に再生さ…

• 

  17:51

  CSSのtransformプロパティの新しい書き方と挙動について

  動画内で説明していた、以前のtransformの書き方の説明動画はこちらhttps://factory-programming-mv.com/video/TQ1_PSS31W8/動画内で説明していた…

• 

  17:42

  API（エーピーアイ）とは？インターフェース・リクエスト・レスポンスについても解説！

  講義内で使用していた資料のURLは以下です。https://factory-programming-mv.com/posts/whats-api/この動画では、API（アプリケーション・プログラミン…

• 

  12:48

  入れ子のレイアウトがもっと楽に！subgrid（サブグリッド）解説。CSS Gridの新機能を使いましょう。後編

  動画内で説明していた、CSSのカウンター（counter）の動画はこちらhttps://factory-programming-mv.com/video/G3kvmKeJsl8/前編の動画はこちらh…

• 

  20:22

  入れ子のレイアウトがもっと楽に！subgrid（サブグリッド）解説。CSS Gridの新機能を使いましょう。前編

  動画内で説明していたaspect-ratioの動画はこちらhttps://factory-programming-mv.com/video/jeaRVM9_HS4/動画内で説明していたobject-…

• 

  25:55

  コンテンツを一定の幅で固定する効率的な方法！前編

  動画内で説明していた、カスタムプロパティ（CSS変数）の動画はこちらhttps://factory-programming-mv.com/video/bg1ne6Ztk7I/動画内で説明していた、m…

• 

  13:44

  コンテンツを一定の幅で固定する効率的な方法！後編

  前編の動画はこちらhttps://factory-programming-mv.com/video/XydJmNOogeQ/動画内で説明していた、mixinについてはこちらhttps://facto…

• 

  21:20

  CSSで背景に動画を設定し、綺麗にレイアウトして自動再生させる方法！

  動画内で説明していた、videoタグの動画はこちらhttps://factory-programming-mv.com/video/2TAc7dljEUg/動画内で説明していた、object-fit…

• 

  11:55

  VSCodeの便利なプラグインLive Server（ライブサーバー）を紹介！

  HTML/CSSでサイト制作をしていると、毎回ブラウザの手動でのリロードが手間となります。それから、JSのfetchなどの処理はサーバー上でないと動作しないことがあります。それらの問題を解決するのが…

• 

  11:14

  GSAPでパララックス（視差効果。parallax）の実装をする方法！後編

  前編の動画はこちらhttps://factory-programming-mv.com/video/W28JudaswI0/GSAP（JavaScriptのアニメーションライブラリ）の再生リストはこ…

• 

  13:58

  GSAPでパララックス（視差効果。parallax）の実装をする方法！前編

  今回は、GSAPでパララックスの実装をする方法を学んでいきます。この動画では、画像をスクロールに合わせて少しずつ移動させることによってパララックスを実現していますが、アイコンやテキストなど要素であれ…

• 

  14:16

  Location API（ロケーション） とそれを使ってページごとにJavaScriptの処理を分ける方法！WordPressでページごとに処理を分ける方法も

  動画内で説明していたLocation APIのドキュメントはこちらhttps://developer.mozilla.org/ja/docs/Web/API/Location動画内で説明していたワー…

• 

  14:53

  移動後のページにデータを渡せる、URL「パラメーター」について解説！後編

  前編の動画はこちらhttps://factory-programming-mv.com/video/p9lwT_0oHo4/この動画では、検索システムなどでよく使われる、WebサイトのURLに含まれ…

• 

  15:21

  移動後のページにデータを渡せる、URL「パラメーター」について解説！前編

  この動画では、検索システムなどでよく使われる、WebサイトのURLに含まれる「パラメーター（parameter）」について説明しています。そもそもパラメーターとは何か？どのような構造になっているのか…

• 

  11:53

  簡単に値をスライドで変更できる inputタグの range（レンジ）を紹介！

  今回の動画では、Webページ内でスライダー（スライドバー）として機能するHTMLのinputタグのtype属性の一つ、「range（レンジ）」について説明しています。このtypeを使うと、数値の入力…

• 

  08:59

  配列の何番目に対象の文字列があるか確認する、indexOf, lastIndexOfメソッドについて紹介！

  この動画では、JavaScript (ジャバスクリプト) で頻繁に使用される indexOf と lastIndexOf メソッドについて説明しています。これらのメソッドは、特定の文字列が配列や他の…

• 

  14:21

  数値の桁数を自動で合わせるpadStart・padEndメソッドを紹介！

  連番の数字や、日付などの特定の桁数を調整するには、今まではsliceメソッドなどを使ってきましたが、新しく出てきた、padStart・padEndを使うことによって自動で調整できるようになります！ゼ…

• 

  08:21

  チェックボックスやラジオボタンの色を統一できるaccent-colorについて解説

  フォームなどでよく使われる「チェックボックス（checkbox）」「ラジオボタン（radio）」の色を簡単に変更できる、CSSのアクセントカラー（accent-color）プロパティについて解説して…

• 

  13:03

  CSSの:has擬似クラスを紹介！今まではJavaScriptでしかできなかった指定をCSSのみで実装

  動画内で説明していた、過去のセレクターの動画は以下です。・基礎編https://factory-programming-mv.com/video/AYp_SDYuEB8/・応用編https://fa…

• 

  18:46

  軽量なスライダーライブラリ「Splide」（スプライド）の紹介と基本的な使い方！

  Swiperよりも軽量で、日本語ドキュメントも充実している「Splide」について解説しています。公式サイト：https://ja.splidejs.com/今回は、概要と使うメリット、必要な読み込…

• 

  07:54

  スライダーライブラリのSplide (スプライド)で「１つのスライダーに複数のスライドを表示させる方法」

  この動画では、軽量で高機能なスライダーライブラリ「Splide (スプライド)」の基本的な使い方から、さらに応用的な設定方法までを解説しています。前回の動画では、Splide の基本的な読み込み方法…

• 

  09:06

  軽量スライダーライブラリのSplideで、スライド間の余白や、左右のスライドの見え方を設定する方法

  スライダーライブラリ「Splide（スプライド）」の・gap（ギャップ）・padding（パディング）・fixedWidth（フィックスドウィズス）の3つのオプションについて解説しています。スライド…

• 

  08:10

  スライダーライブラリSplideの、自動再生・速度の変更・マウスホバー時の挙動・ドラッグ操作について

  本動画では、軽量なスライダーライブラリ「Splide（スプライド）」の ・自動再生（autoplay）・スライドの速度（speed）・マウスホバー時の挙動（pauseOnHover）・スライド移動間…

• 

  14:37

  スライダーライブラリSplideで、左右の矢印をカスタマイズする方法

  この動画では、JavaScriptの軽量スライダーライブラリSplideの左右矢印（ナビゲーションボタン）のカスタマイズ方法について解説しています。矢印（arrow）のデザインや配置を変更したい場合…

• 

  13:24

  軽量スライダーSplideでページネーションをカスタマイズする方法！

  軽量スライダーライブラリ「Splide」 のページネーション（ページインジケーター・スライダー下の丸いボタン）のカスタマイズ方法について解説します。Splide を用いたスライダーの基本設定を理解し…

• 

  05:53

  軽量スライダーライブラリSplideのレスポンシブ対応について解説！

  この動画では、Splide（スプライド）を使ったレスポンシブ対応について解説しています。画面サイズ（ウィンドウ幅）が変化した際に、スライドの表示数や余白（マージン）を適切に調整する方法を紹介していま…

• 

  07:17

  １つのページで複数のSplideを動かす方法と、効率的に記述する方法

  １ページ内で、複数のSplideを動作したいことがあると思います。今回は、同一オプションで複数箇所にSplideを設定したい時などにfor文を使って効率的にコードを書く方法などを紹介しています。この…

• 

  13:22

  React（リアクト）とは？コンポーネントなどの特徴などについて解説

  React（リアクト） は、Meta（旧Facebook）が開発した JavaScript（ジャバスクリプト） のライブラリです。主に UI（ユーザーインターフェース） を効率的に構築するために使わ…

• 

  10:01

  Splideで流れ続ける自動スクロールを実装する方法

  動画内で説明していた、公式ドキュメントのURLはこちらhttps://ja.splidejs.com/extensions/auto-scroll/通常、流れ続ける自動スクロールを実装する場合、そこ…

• 

  17:00

  React.js入門！はじめの一歩。初心者向けにまずは基本的な読み込みと設定から！

  React.jsの入門・初心者向けの動画です。以下はReact.jsを使う上で必要なURLです。「開発用」と「本番用」のscriptタグを書くときは、「crossorigin」属性をscriptタグ…

  ダウンロード有
• 

  13:15

  Reactで、基本的なイベント処理を書く方法。clickイベントやinputイベントについて

  初心者が最初につまづく、基本的なイベント処理の書き方を解説しています。クリックしたら、メニューを開くなどイベント処理はReactにおいて頻出しますので、この動画で基礎的な書き方を覚えていきましょう！

• 

  14:14

  Reactで最もよく使うuseStateの基本的な考え方と使い方を解説！

  Reactでリアクティブな変数を定義するための、useStateについて解説しています。基本的な動きを学ぶために、ボタンをクリックした回数をuseStateで管理し、表示してみましょう！

• 

  14:34

  useStateでクラス名やスタイルの切り替えをする方法

  サイト制作やWebアプリの制作で必ずといっていいほどやる、基本的なクラス名の変更やスタイルの変更処理をuseStateを使って、便利に実装していきましょう！

• 

  11:34

  Reactを使って、メニューを表示・非表示する方法 前編

  Reactでよく使う、useStateの挙動をさらに詳しく知るために、メニューの切り替え処理をやってみましょう。単純にメニューを開閉するだけではなく、メニューを開くボタンと閉じるボタン、そしてメニュ…

• 

  10:36

  Reactを使って、メニューを表示・非表示する方法 後編

  Reactでよく使う、useStateの挙動をさらに詳しく知るために、メニューの切り替え処理をやってみましょう。単純にメニューを開閉するだけではなく、メニューを開くボタンと閉じるボタン、そしてメニュ…

• 

  37:42

  Reactで簡単なメモアプリを作りながら、配列を表示・追加・削除する方法

  動画内で説明していた、mapの動画はこちらhttps://factory-programming-mv.com/video/UFVbtcyu4MI/動画内で説明していた、filterの動画はこちらh…

• 

  11:06

  Splideでスライダーのアニメーションのしかたを変えるeasing（イージング）オプション

  easingを変更すると、ただ横に移動するだけではなく、色々な動きをスライダーに設定することができます。この動画では、linear、ease-out、ease-in、ease-in-outなどの基本…

• 

  15:05

  Reactでよく使う機能、useEffectについて解説

  コンポーネントのマウント後や、ある値を監視（watch）し変更を検知したら処理をしたい時などに使うuseEffectについて紹介しています。useEffectを理解していないとできない処理はたくさん…

• 

  12:13

  useMemoで値をキャッシュ（メモ）化し、パフォーマンスを改善する方法

  Webサイトやアプリケーション制作では、依存する値が変更された時のみ再計算すれば良いだけの場合があります。ReactのuseMemoを使うと、内容をキャッシュして依存する内容が変更された時のみ再レン…

• 

  17:32

  Splideサムネイルと連動するスライダーを実装する方法

  この動画では、軽量スライダーライブラリ「Splide（スプライド）」を使って、スライダーと下部のサムネイルを連動させる実装方法を解説しています。Splideは「ギャラリー」としても紹介されています。…

• 

  08:54

  vim（ビム）とは？概要と簡単な使い方について

  macなどで開発環境を整えていると、一時的に特定のファイルを編集したいことがよくあります。この動画では、コマンドライン上で簡単に扱える、vimの概要と簡単な使い方について説明しています。動画内で説明…

• 

  13:30

  Node.jsのインストールと、複数バージョン管理できるnvmについて

  この動画では、フロントエンド開発の環境構築に必須のNode.js（ノード）のインストールと、バージョン切り替えが可能なnvm（Node Version Manager）についての説明をしています。昔…

• 

  14:03

  nvmでディレクトリを移動したら自動でNode jsのバージョンを変える方法

  前回の動画（nvmの概要と使い方について）はこちらhttps://factory-programming-mv.com/video/hsa2nXnpAtI/

  ダウンロード有
• 

  18:09

  フロントエンド開発環境のまとめ。Grunt、Gulp、Webpackとは何だったのか？Vite、Turbopackとは？

  近年複雑になっている、Webフロントエンド開発環境についてですが、ここではGruntの時代からの流れや関係性について説明しています。Grunt、Gulp、Webpack、Vite、Turbopack…

• 

  11:10

  パッケージマネージャーとは？npm・yarn・pnpm・bun について紹介します！

  Node.jsを使った開発環境を使用していると、必ず出てくるのがこのパッケージマネージャーです。今回は、そもそものパッケージの概念と・npm（エヌピーエム）・yarn（ヤーン）・pnpm（ピーエヌピ…

• 

  17:29

  最新のフロントエンド開発環境を簡単に構築できる「Vite（ヴィート）」解説

  具体的なコマンドを使って、Vite（ヴィート）で環境構築から実際に動かしてみるところまでをやってみます。React・Angular・Vue・solid・svelte・preact・astro・rem…

• 

  14:32

  npm・yarn・pnpm・bunの導入と使い方をViteを使って解説

  各パッケージマネージャーの導入から、パッケージのインストール・アンインストール・アップデートコマンドの実行などを紹介しています。動画ではviteを使って紹介していますnpm・yarn・pnpm・bu…

• 

  11:20

  Viteで作るReact.js環境と、ファイル構成の説明

  以前は少し面倒だったReact.js（リアクト）環境も現在Vite（ヴィート）を使うことで、簡単に構築することができます。この動画では実際にViteでReact環境を構築し、その際に生成されるファイ…

• 

  13:58

  JavaScriptでファイル分割する方法と、import, export文の書き方を解説！

  JS、React.js、Vue.js、Next.js、Nuxt.jsなどでサイト制作やアプリケーション開発をしていると、ファイルを分割したくなってくるタイミングがあります。JSではその機能が用意され…

• 

  09:57

  React必須の機能「コンポーネント」（Component）について解説。前編

  Reactを使う上で必須のコンポーネントの基本的な使い方について学んでいきましょう！前編で基本的な使い方を紹介し、後編でさらに詳しい使い方（props、children、event）について解説して…

• 

  20:13

  React必須の機能「コンポーネント」（Component）について解説。後編

  動画内で紹介していた、Objectオブジェクトについてはこちらhttps://factory-programming-mv.com/video/sH5kYDoJNH0/後編の動画はこちらhttps:…

• 

  18:34

  ロジックを再利用・分離可能にする「カスタムフック」について

  React.jsやNext.jsでロジック（Logic、モジュール、module、メソッドなど）を書いていると、長くなってしまったり、同じ内容なのに複数箇所で定義してしまうことが出てきてしまいます。…

• 

  14:17

  Reactでよく使う「useRef」の使い方と２つのメリット

  Reactで開発をおこなっていると、useStateなどの仕様で不要なレンダリングがたくさん発生してしまうことがあります。また、DOM（HTMLの要素）の取得をする際に安定して取得できないことがあり…

• 

  07:23

  コンポーネントをメモ化できる、React memoについて解説！

  Reactにおいて、コンポーネントを一般的に定義し使用すると意図せぬ再レンダリングが発生することがあります。この動画では、コンポーネントをメモ化することによって、そういったことを防いでいく方法につい…

• 

  09:48

  関数をメモ化（キャッシュ）できる「useCallback」解説！

  今までの動画では、値をメモ化できる「useMemo」や、コンポーネントをメモ化できる「React.memo」などを紹介してきましたが、今回は関数をメモ化することによって、パフォーマンスを改善していき…

• 

  21:58

  propsのバケツリレー問題とそれを解決するZustand（ツースタンド）ライブラリについて 後編

  ReactやNext.jsでコンポーネント間のprops（プロップス）の受け渡しは、propsを受け渡すコンポーネントが途中にたくさんあるとその分たくさん処理をしなければならない上に、コードも多くな…

• 

  13:22

  propsのバケツリレー問題とそれを解決するZustand（ツースタンド）ライブラリについて 前編

  ReactやNext.jsでコンポーネント間のprops（プロップス）の受け渡しは、propsを受け渡すコンポーネントが途中にたくさんあるとその分たくさん処理をしなければならない上に、コードも多くな…

• 

  05:56

  Next.jsとは？React.jsとの違いは？特徴やメリット

  この動画では、Next.js（ネクストジェイエス）について紹介しています。React.jsとの違いは何か？特徴やメリットや具体的な機能などについて説明しています。React.js（リアクト）の再生リ…

• 

  11:18

  Next.js入門！初心者向けに開発環境の構築の手順と内容について解説。

  コマンドを使用して、Next.js（ネクストジェイエス）の環境構築をしていく方法を紹介しています。環境構築の際に聞かれるいくつかの質問の解説などもおこなっています。Next.jsの公式のinstal…

• 

  15:36

  Next.jsの環境構築後のファイル構成について説明

  前回までの動画で、Next.jsの環境構築の動画を配信してきました。今回は環境構築直後のディレクトリやファイル構成の説明をしていきます。フロントエンド開発の環境構築などの動画リストはこちらhttps…

• 

  06:01

  Next jsで下層ページを作る方法！基本的なルーティング設定について

  トップページ以外のページをNext.jsでどのように作っていくかを解説しています。Next.jsはルーティングを非常に簡単に設定できるようになりましたので、是非活用していきましょう！※動画のNext…

• 

  11:34

  ブログ詳細ページなどに活用できる、ダイナミックルーティング（Dynamic Routing）について

  ブログの詳細ページなどに使うことができる、Next.jsのダイナミックルーティングについて説明しています。ブログ以外にも、今回紹介しているようなメンバーのページや、商品詳細ページなどにも使えるかと思…

• 

  05:35

  GSAPのtimlineでデフォルト値を設定する方法！

  タイムライン機能を使っていると、durationやeaseやdelayなどを全体で設定したい時があります。今回defaultsというオプションで、デフォルト値を設定する方法を紹介しています。GSAP…

• 

  10:17

  Next.jsのlayoutjsの仕組みを使ってヘッダーなどの共通パーツを定義する方法！

  Next.jsでサイトやアプリケーションを作っていると、共通パーツの定義と呼び出しが必要になります。今回は、layout.jsを使った共通コンポーネントの活用について解説しています。

• 

  11:46

  Next.jsでaタグを拡張した「Linkコンポーネント」を解説！

  Next.jsでは、内部リンクを実装するための手段として、Linkコンポーネントが内蔵されています。Linkコンポーネントは以下のメリットや特徴があります。・ページの再読み込みが発生しない。（クライ…

• 

  11:06

  imgタグよりもメリットの多い、Next.jsのImageコンポーネントについて解説！

  Webサイトで画像を扱う際には、表示そのものだけではなく、CLS (Cumulative Layout Shift）の問題など、様々な技術的に考えなければならないことがあります。Next.jsが用意…

• 

  11:53

  Nextjsでtitleタグやdescriptionなどのmetadataを設定する方法！

  タイトルタグやディスクリプションなどサイト全体や下層ページで状況に応じたmetaタグを設定したいことが出てきます。この動画では、Next.jsが用意している仕組みを活用してmeta情報を定義し表示さ…

• 

  23:30

  NextjsにおけるCSS設計について

  Next,jsで開発する際の、CSSの考え方は様々あります。この動画では以下についてお話ししています。・Tailwind CSS・BootstrapなどのCSS フレームワーク・Chakra UI,…

• 

  45:46

  SPA？CSR？SSG？サイトのレンダリング方式について解説

  サイトを開発するときや公開するときに今だと様々なレンダリングの方法があります。聞いたことはあるけど、よく分からないというかたの為に以下について今回は話していますMPA（Multi Page Appl…

• 

  14:39

  use clientとは？コンポーネントごとにクライアントサイド、サーバーサイドの処理を分ける方法

  開発をしていると、use stateなどのReact Hookの処理でエラーが出ることがあります。これはクライアントサイド（client side）でしか使えないフックを使っていることが原因です。こ…

• 

  14:37

  環境変数について解説！ローカルと本番環境で処理を分ける

  開発をしていると、開発環境のみでおこないたいことや、逆に本番環境のみでおこないたいことが出てきます。（env.process.NODE_ENV）この動画では、それぞれの書き方や考え方を紹介しています…

• 

  07:03

  文字選択時のスタイルを指定できる！::selection擬似要素について

  文字をマウスなどで選択した時の色を変更できる、selection（セレクション）というものがあります。これが指定されていると、サイトのデザインとの統一性が取れるので、是非覚えておきましょう！

• 

  11:23

  任意のタイミングでリンクさせることができる、useRouterのpush, replaceについて解説！

  サイト、アプリ開発をしているとクリックした瞬間ではなく、アニメーション後など任意のタイミングで遷移させたいことがあります。そういったときにNext.jsでは、useRouterのpush, repl…

• 

  44:13

  Next.jsでAPIを自作（バックエンド側の処理）し、問い合わせフォームなどを実装する！

  Next.jsではバックエンド側の処理を記述することができます。この内容が理解できると、SendGridやResendなどの問い合わせフォームを実装することができます。今回は実際のフォームの流れをハ…

• 

  36:43

  初心者向け。Git（ギット）について解説！基本的な考え方、用語、流れについても

  開発をしていく上ではほぼ必須のgitについて説明しています。また、Github・GitLab・Bitbucket・CloudForgeなどのホスティングサービスについてもお話ししています。動画の中で…

• 

  29:06

  テキストが流れるような、リッチなローディングアニメーションを実装してみましょう！

  ローディングアニメーションのパターンは色々とありますが、今回は文字を使ったいくつかのパターンを実装してみましょう。アイディア次第で色々な形にできますので、この動画で基本的な考え方を学びましょう。JS…

• 

  25:35

  四角形を使ったリッチなローディングアニメーションを実装してみましょう！

  ローディングアニメーションのパターンは色々とありますが、今回は四角を使ったいくつかのパターンを実装してみましょう。アイディア次第で色々な形にできますので、この動画で基本的な考え方を学びましょう。JS…

• 

  14:22

  Webサイトで3D表現ができるThree jsとは？特徴やできることなどを紹介！

  WebGLやWebGPUを効率的に扱うことができる、Three.js（スリージェイエス）について説明しています。ライティング（Lighting）・や物理演算・３Dモデルの読み込みなどができ、３Dのゲ…

• 

  19:44

  フロントエンドエンジニアの各レベル別の「月収」。簡単なロードマップと一緒に説明します！

  Webフロントエンジニアの収入について紹介しています。勉強していると、どのスキルでどのくらいまでの収益を得られるのだろう？と不安になり質問してくる生徒さんが多いので、ここで解説しています。動画内でお…

• 

  13:22

  Typscript（タイプスクリプト）とは？初心者向けにメリットや特徴を紹介！

  TypeScript（タイプスクリプト）とは、Microsoftが開発したJavaScriptの上位互換言語（superset）です。TypeScriptはJavaScriptの機能をすべて含みつつ…

• 

  19:34

  TypeScript（タイプスクリプト）入門！初心者向けに基本的な使い方や考え方について解説。前編

  前回の動画で、TypeScriptは何か？やメリットをお伝えしました。https://factory-programming-mv.com/video/ZFtQf6DLa6w/今回の動画では、基本的…

• 

  18:54

  TypeScript（タイプスクリプト）入門！初心者向けに基本的な使い方や考え方について解説。後編

  以前の動画で、TypeScriptは何か？やメリットをお伝えしました。https://factory-programming-mv.com/video/ZFtQf6DLa6w/今回の動画では、基本的…

• 

  20:26

  Webフロントエンジニアが自宅で効率的かつ快適に作業するために必要なもの

  フリーランス・副業・リモートワークを始めた方が、自宅などで効率的に作業するために必要なものなどを紹介しています！ディスプレイと周辺機器（マウス、キーボード、モニターアーム、Webカメラ・マイク・イヤ…

• 

  15:34

  Web制作の流れ。ヒアリングからワイヤー、デザイン、コーディング、テスト、公開までの流れを把握しましょう！

  フリーランスや副業でやる方が初めて案件を受注する時、Web制作の流れがよくわからないという話を聞きます。この動画では、以下のような全体的な流れを説明しています。・ヒアリング、要件定義・サイト構成、ワ…

• 

  36:30

  Three js入門！まずは初心者向けに読み込みと簡単な表示を紹介します。

  今回はThree.jsを使って立体的な箱を回転させた上で表示させるところまでをやってみましょう！動画内で紹介していた、Three.jsの読み込み先URLはこちらhttps://unpkg.com/t…

• 

  22:24

  Three.jsで床を生成し、OrbitControlsでカメラを自由に動かす方法。

  今回は、PlaneGeometryを使って、床を追加することで奥行きを演出し、さらにOrbitControlsを使ってカメラを自由に動かせるようにしてみましょう。画面をリサイズした際のレンダリングの…

• 

  17:00

  オブジェクトの影を生成し、別オブジェクトに反映させる方法

  この動画では、DirectionalLightを使って一定方向からの光源を追加し、それによって影を別のオブジェクトに反映させる方法について説明しています。影を落とすだけなのに意外とThree.jsで…

• 

  15:00

  位置を直感的に分かりやすくするヘルパー！axesHelper・gridHelperとFPSなどを計測するstatsについて 前編

  Three.jsで開発をおこなっていると、カメラやオブジェクトの移動などでどのような動きになっているか分かりづらいことがあります。この動画では、axesHelper・gridHelperを使うことに…

• 

  09:34

  位置を直感的に分かりやすくするヘルパー！axesHelper・gridHelperとFPSなどを計測するstatsについて 後編

  前編の動画はこちらhttps://factory-programming-mv.com/video/-iUbtsJlU10/