【JavaScript&CSS】ガチで学びたい人のためのWEB開発徹底入門(フロントエンド編)
4.5 (1,340 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
6,850 students enrolled

【JavaScript&CSS】ガチで学びたい人のためのWEB開発徹底入門(フロントエンド編)

基礎を終えた方に最適!基礎レベルから一気にプロレベルへ!JavaScript、CSSの基礎~実践までを最短で学習。世界が変わる19時間。
Bestseller
4.5 (1,340 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
6,850 students enrolled
Last updated 7/2020
Japanese
Current price: $55.99 Original price: $79.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 19.5 hours on-demand video
  • 3 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • 本格的なWEBサイトを作成する方法について学びます。
  • CSS(Sass※以下CSSと記載)、JavaScriptの基礎について深く学びます。
  • CSS、JavaScriptの実践的な記述について深く学びます。
  • CSS、JavaScriptアニメーションの実装について学びます。
  • 最新の実践的なWEB画面の作成方法について深く学びます。
  • CSS、JavaScriptのコードの最適化、安定化について学びます。
  • 維持管理、持続可能なコードの記述方法について学びます。
Course content
Expand all 119 lectures 19:28:22
+ はじめに
5 lectures 22:41
コース受講の準備を行おう Part.1
02:33
コース受講の準備を行おう Part.2
02:06
Udemyでの学習方法のアドバイス
00:53
+ 超初心者の方はここからスタート
4 lectures 29:49
HTMLとは?HTMLの概要と文法について
05:36
HTMLのこれだけは知っておいて!インライン要素とブロック要素の使い分け
08:24
CSSとは?CSSの概要と文法について
07:07
CSSのこれだけは知っておいて!詳細度について
08:42
+ コード記述の効率化を学ぼう
2 lectures 10:37
【Tips】コードの自動補完を使おう
04:39
【Tips】Visual Studio Codeのショートカットを使おう
05:58
+ CSSの基礎から始めよう(Transition編)
20 lectures 03:02:52
Transitionプロパティーの使い方を学ぼう(ボタンにホバーアクションを追加!!)
06:52
【Sass】CSSをSassで記述してみよう!
10:38
【Tips】Chromeの開発ツールの使い方について学ぼう
04:33
【おさらい】CSSセレクターとSassネスティング
10:47
SassからCSSへの変換がうまくいかない時の対処法
06:18
ホバーで影ができるボタンを作ってみよう
07:32
【演習】色々なエフェクトのボタンを作ってみよう
04:24
【解答】色々なエフェクトのボタンを作ってみよう
12:45
Transformプロパティーの使い方をマスターしよう
10:23
Transform, Position, Z-indexの復習!背景色がスライドするボタンを作ってみよう!
11:20
::before?::after?疑似要素を使って無駄な記述を減らそう!
06:00
タイミングファンクション(a.k.a easing-function)でアニメーションをオサレにしよう!
03:14
【発展】3Dアニメーションでより豊かな表現方法を身に着けよう
13:34
【発展】【演習】3Dアニメーション ~ キュービックのボタンを作成してみよう
12:56
HTML要素を思った通りに配置するレイアウト方法まとめ
14:51
【参考】開発ツールでの編集のローカルファイルへの自動反映方法
14:53
セクション修了!お疲れ様です!
03:00
+ CSSを極めよう(Animation編)
18 lectures 02:53:46
【簡単!】アニメーションを使って簡単なローダーを作ってみましょう!
11:08
【文法】AnimationとKeyframesの文法を学ぼう!
10:46
【Sass】@Mixinを使った一歩上のSassコーディング!!
07:02
【Tips】疑似セレクターを使ってみよう!nth-childのハマりやすい罠とは!?
12:00
【Sass】@for文で一歩上のSassコーディング!!
08:15
【演習】Animationで色んなローダーを作ってみよう
01:17
【解答 Part. 1】Animationで色んなローダーを作ってみよう
09:14
【解答 Part. 2】Animationで色んなローダーを作ってみよう
12:50
【実践】よく巷で見かけるオサレなやつ!メニューアイコンを作ってみよう!!
15:15
【実践】オサレな文字列のアニメーションを作ってみよう!!
19:55
【Sass】@Each文で配列をループ!フェードインアニメーションをサクッと作ってみよう!
13:51
【Tips】今時の画像の表示方法まとめ ~ <img srcset>, <picture>, background-imageの使い分け
14:21
【実践】画像にオサレなカバースライドアニメーションを適用してみよう!!
16:35
【実践】画像にオサレなホバーアニメーションを適用してみよう!!
07:13
【Tips】Background-imageを画像タグのようにアスペクト比を保ちながら表示する小技
06:25
【Tips】アニメーションに最適なプロパティー
06:10
セクション修了!お疲れ様です!
00:30
+ JavaScriptの基礎を固めよう!
28 lectures 04:08:30
【導入】JavaScriptとは?
04:58
【文法編】関数の定義と使い方!
08:45
【文法編】メソッドとプロパティーについて学ぼう!
04:02
【文法編】配列の使い方をマスターしよう!
07:20
【文法編】オブジェクトを使ってデータを管理しよう!
08:19
【文法編】ループの記述方法基礎
07:18
【文法編】ループの記述方法(for inとfor of)
04:22
【文法編】ループの記述方法(実践)
08:01
【文法編】if文と判定処理の正しい記述方法について学ぼう!
10:04
【文法編】アロー関数を使って省略記法をマスターしよう!
07:33
【文法編】コールバック関数とループ処理
07:43
【文法編】配列とreduceメソッド
13:13
【文法編】reduce関数を作ってみよう
07:13
【DOM編】JavaScriptでHTML参照・更新!セレクターAPIを学ぼう!
15:53
【DOM編】画面に機能を追加!イベントリスナーでイベントを登録!
10:20
【DOM編】超基礎!画面初期化時にコードを実行!DOMContentLoadedとLoadの違いについて学ぼう!
07:19
【DOM編】【演習】文字列をHTMLタグに分割してみよう!!
18:08
【レベルアップ】Classを使ったコードの整理方法!!クラスでコードの再利用性を高めよう!
14:06
【レベルアップ】thisを学んでクラスやオブジェクトを変幻自在に操ろう!!
13:20
【おさらい】Classとオブジェクト
06:42
【おさらい】thisとオブジェクト
09:18
【おさらい】thisとbindの関係
04:40
【おさらい】TextAnimationクラスをもう一度見てみよう。
05:37
【レベルアップ】クラス継承でコードを有効利用しよう!!不要なコードは書かないようにしましょう!
18:26
セクション修了!お疲れ様です!
00:29
+ JavaScriptのより実践的な記述について学ぼう!
14 lectures 02:49:19
【Tips】スクロール検知の達人!IntersectionObserverを学ぼう!
14:22
【レベルアップ】スクロール監視クラスを作成してコードの最適化を行おう!
18:18
【実践】スライドアニメーションをスクロールに合わせて発動しよう!
04:24
【実践】クラスの記述に慣れよう!スマホメニューの作成 Part. 1!!
18:13
【レベルアップ】BEMでCSSを記述してみよう!スマホメニューの作成 Part. 2!!
18:33
【実践】スマホメニューを完成させよう!
13:18
【実践】ページローダーでイライラ解消!ページローダーの作り方!
18:33
【ライブラリ導入編】ヒーロースライダーでページをオサレにしよう!
07:14
【実践編 Part.1】ヒーロースライダーでページをオサレにしよう!
17:57
【実践編 Part.2】ヒーロースライダーでページをオサレにしよう!
10:55
【実践編 Part.3】ヒーロースライダーでページをオサレにしよう!
11:59
セクション修了!お疲れ様です!
00:29
+ Webサイト作成(序)
8 lectures 01:04:09
【スマホ対応】レスポンシブデザインとは?スマホでも見やすいサイトを作るために!
03:30
【スマホ対応】レスポンシブデザインの基礎を学ぼう!メディアクエリとビューポートについて学ぼう!
18:33
【スマホ対応】モバイルファーストCSSの実装方法を学ぼう!
07:42
ヒーロースライダーの組み込みから始めて行こう!
10:56
【Tips】最初にやっておくべきノーマライズとは?|マルチブラウザ対応
04:14
【Tips】Webフォントでデバイス間の表示を統一しよう!
07:37
【Tips】サイト表示に統一感を!共通クラスで記述を最小限に効果を最大限に!
10:45
+ Webサイト作成(完)
17 lectures 04:01:09
あともう少しです!後半戦も頑張っていきましょう!
00:14
【実装開始!】まずは以前作成したモジュールを移行してこよう!
17:37
スマホ画面から作成していこう!(Houseセクションの作成 Part.1)
20:30
Flexboxで超簡単にレスポンシブ画面を実装しよう!(Houseセクションの作成 Part.2)
07:25
【復習】Flexboxを使ったレスポンシブ画面の実装の復習!!(Popularセクションの作成)
23:01
【実践】Flexboxを使ったレスポンシブ画面の実装(Travelセクションの作成)
20:05
【実践】Z-indexと疑似要素を使った実践的な記述方法について学ぼう!
19:05
【実践】Flexboxでフッター作成!
18:40
【ちょっと休憩】emとremについて
05:39
【実践】ヘッダーを作ろう!Part. 1!
18:51
【実践】ヘッダーを作ろう!Part. 2!
14:27
【実践】サイドバーを作成しよう
17:08
【実践】ベースデザインを完成しよう
06:48
【実践】ページローダー追加
02:39
【いよいよ完成へ!】JavaScriptを整理しよう!Part. 1
17:04
【いよいよ完成へ!】JavaScriptを整理しよう!Part. 2
11:01
【完】サイトを完成させよう
20:55
+ インターネットに公開してみよう
2 lectures 22:40
インターネット公開前の準備(リリース準備をしよう)
11:37
インターネットにWebサイトを公開しよう
11:03
Requirements
  • HTML、CSS、JavaScriptを使ったことがある。
  • 他の先生の入門レベルのコースを修了している。
  • ドットインストールなどの学習サイトで入門レベルを修了している。
  • 一部レクチャーを公開しています。ご自身のレベルに合いそうか確認してみてください。
  • ※特にJavaScriptに自信がない方は別で出している「【JS】初級者から中級者になるためのJavaScriptメカニズム」のセクション12「様々なオブジェクト」までを先に受けていただくことをお勧めします。
Description

「基礎レベルの事はわかるようになったけど、どうやってプロが作成するような本格的なサイトを組み立てていけばいいの!?」

「CSSやJSの基本的な文法や書き方は習得した。で、次は何を学べばいいの?」

「コードを整理するためにはどのように記載したらいいの?」

「もう一歩高いレベルの事を学びたい。」

「基本的な文法はなんとなく知っているけど、その先どのようにして成長していけばよいのかわからない?」


そんな悩みを持った方に最適のコースです。


私がまだ駆け出しエンジニアだった頃、基本的な文法を学んだ段階でまず思ったことは、

「で、どうやってこれで本格的なWEBサイトを組み立てていけばいいの?」

ということでした。


書籍やインターネットを探してみても、簡単なサイトを作りながら本当に基礎的な部分を教えているものばかりで、

もう一歩上のレベルの事を説明してくれるものは見つかりませんでした。


「どういった知識が必要なのか?どのようにして本格的なサイトを組み立てていくのか?何を覚える必要があって、何を覚えなくていいのか?」


私が初学者の時にはそんなことを思っていました。


今になって思うと随分遠回りをしたと思います。

今だと一瞬でできることでも、どのようにして実現すればよいのかがわからない状態では、
全く適切でない方法で1週間くらいかかって開発を行っていた時もありました。


「誰か実践的な書き方や方法を教えてくれないかな~。」


当時の私はそんな風に思っていました。


「こちらのコースでは今の私が当時の私に伝えたい、CSSとJavaScriptの知識を凝縮しました。」


WEB開発では覚えることがたくさんあります。

一方、皆さんの時間は有限でとても貴重なものです。


馬鹿正直に使わないHTMLタグを覚える必要はありませんし、すべてのCSSのスタイルについて覚える必要はありません。もちろん、JavaScriptの関数やメソッドについても同様です。


それよりも、もっと根本的なところで、「なぜ、そのような動きになるのか?」「なぜそのように実装するのか?」「どういったところに気を付けて学んでいけばよいのか?」について、学んでいきましょう。


「なぜそうするのか?」がわかっていれば、状況に応じて自分で最善の解決法を実装がでるようになります。そして、基礎を固めましょう。CSS、JavaScriptの基礎がわかっているとWEB開発が何倍も楽になります。また、新しくJavaScriptフレームワークやCSSフレームワークを使う際にも、学習効率は何倍にもなるでしょう。


こちらのコースは基本的な事を学んだレベルのWEB開発者をプロレベルまで一気に引き上げます。

  • もし、あなたが体系的にJavaScript、CSSの基礎について学びたいのであれば、こちらのコースを是非受けてみてください。

  • もし、あなたがCSS、JavaScriptの実装が思い通りにいかず、悩んでいるのであれば是非こちらのコースを是非受けてみてください。

  • もし、あなたがCSS、JavaScriptの実践的な記述方法からコードの最適化について学びたいのであれば、こちらのコースを是非受けてみてください。

  • もし、あなたがCSS、JavaScriptの中級者レベルに最短でなりたいのであればこちらのコースを是非受けてみてください。


19時間のコースを終えた時、あなたにはこれまでと違う世界が見えているはずです。


**************

JavaScriptに自信のない方は「【JS】初級者から中級者になるためのJavaScriptメカニズム」の反復処理のセクションまで先に受けてみてください。先のコースを受けてからこのコースを受けていただくことで、その理解度は格段に増すことと思います。

また、こちらのコースは一部レクチャーのプレビューを公開していますので、ご自身のレベルに合うか確認してみて下さい。

**************


**こちらのコースでは以下の内容については扱いませんのでご承知おきください**

  • サーバーとの通信やサーバーへのデータリクエストの方法については扱いません。

  • JavaScriptを使ったフォームのチェックや非同期通信については扱いません。

  • サーバー側の実装(バックエンド開発)については扱いません。

  • JSフレームワーク(ReactやVue)やCSSフレームワーク(Bootstrap等)を使った実装については基本的に扱いません。

    ※一部、JSライブラリを使用します。

  • こちらのコースではES moduleを使ったJavaScriptの整理は行いません。
    WebpackでのJSファイルのバンドルも行いません。
    ※こちらのコースではJavaScriptのコード整理にclassを使用しますので、私が別で出しているWebpackのコースを参考にして、こちらのコースで作成した成果物のバンドルを是非試してみてください。

  • こちらのコースではIE11へのブラウザ対応は行っていません。最新の記述方法をお教えしていますので、IE11ではうまく動かないことをご了承ください。(IE11は脆弱性への対応も遅く、Microsoftもサポートを停止しているため、使わないことを推奨しております。)

Who this course is for:
  • 他の先生のフロントエンドの入門編を終えたレベルの方
  • ドットインストールでCSS、JavaScriptの入門編を終えたレベルの方
  • ※特にJavaScriptに自信がない方は別で出している「【JS】初級者から中級者になるためのJavaScriptメカニズム」のセクション12「様々なオブジェクト」までを先に受けていただくことをお勧めします。
  • 自分で本格的なWEBサイトを作ってみたい方
  • CSS、JavaScriptの実践的な基礎を効率的に学びたい方
  • CSS、JavaScriptを今後仕事で使う予定の方
  • CSS、JavaScriptのコードの整理方法について学びたい方
  • CSS、JavaScriptのアニメーションを学びたい方
  • CSS、JavaScriptのレベルアップしたいWeb開発初級者の方
  • CSS、JavaScriptでどのようにすればレベルアップできるのか悩んでいる方