【動画で学習】UdemyのHTML/CSS 人気／おすすめ講座【セールでお得】

HTMLとCSS、JavaScriptなどの Webの知識は、今や Webに関わる仕事はもちろんの事、アプリ開発やメディア制作など、あらゆる仕事に必要になっています。

これら、フロントエンド（表示される画面に関わる要素）を操るエンジニアを「フロントエンドエンジニア」などと呼びます。この講座では、そんなフロントエンドエンジニアになるための基礎知識となる、HTMLと CSS、プログラミング言語の JavaScriptを総合的に学びます。

スマートデバイスに対応した「レスポンシブWebデザイン」での、サイト制作や「CSSフレームワーク」を用いて、簡単に Webサイトデザインを行なう方法、そして JavaScriptでは「Ajax通信」や「jQuery/Vue.js」などの「JavaScriptフレームワーク」を用いたプログラミング開発まで学ぶことができます。

本講座を修得すれば、簡単な Webページなら自分の力で組み上げることができるようになるでしょう。また、他のチームメンバーが作った Webページの構造を理解し、変更したり、制作に参加するといった事もできます。

なお、本講座は同じ作者の、『これからWebをはじめる人のHTML&CSS, JavaScriptのきほんのきほん（マイナビ出版刊）』に基づいて映像講義にしています。本講座だけでも学ぶことができますが、書籍を手元に置けばより理解が深まることでしょう。合わせてご利用ください。

--

本コースは2022年8月に大幅リニューアルを行い、書き方などを最新化しています。

--

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

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

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

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

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

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

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

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

ということでした。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• 本コースで使用するSassはDart Sassとなります。（2022年8月にLibSassからDart Sassにリニューアルしました。）

プログラミングを学んで、ITエンジニアを目指そう！

このコースは、プログラミング初心者の方がプログラミングや関連スキルを1から学び、ITエンジニアを目指すためのコースです。

想定する受講生

• 実務未経験からITエンジニアに転職したいですか？

• 自らウェブアプリケーションを開発して公開できるようになりたいですか？

• 駆け出しのウェブ開発者の方でさらにスキルアップしたいですか？

⇒ あなたの答えが１つ以上YESなら、これはまさにあなたが探しているコースです！

HTML, CSS, Bootstrap 5, JavaScript, MySQL, Ruby, Ruby on Rails 7, AWS Cloud9, Git, GitHubを用いたWebアプリケーション開発の方法を総合的に学べます。21時間超えの大型コースでお得に学べます。

☆☆コースの内容をしっかりと確認した上で受講をいただけるように、無料プレビューを30分公開しております。ぜひご覧ください！！☆☆

IT人材は、2030年に最大78万人不足すると経済産業省から発表がされました。

現在、ITエンジニアの転職市場は売り手市場です。また、自らWebアプリケーション開発ができるようになり、素早くアイディアを形にできれば、システム開発の費用が削減できて、起業への挑戦もハードルが下がります。

基本的なWebページの（HTML, CSS）の構築方法を学習したあと、画面サイズによって動的にレイアウトが変わるモバイルフレンドリーでレスポンシブ対応のWebサイトの作り方を学習します(Bootstrap)。

その後に、プログラミングを学習します。主にブラウザ側で動作させるJavaScriptと、サーバー側で動かすRubyを学習します。

よく使う機能が用意されていて、高速に開発が行えるWebアプリケーションフレームの使い方を学習します。スタートアップ企業でもよく使われるフレームワークを使用します（Ruby on Rails）。

Webアプリケーションを開発を行う上でキーポイントとなるデータを体系的に扱うデータベースの使い方を、学習します(MySQL)。

開発環境構築も丁寧に手順を追って説明します(AWS Cloud9)。

私は約10年の豊富なエンジニア経験があるとともに、初心者向けのプログラミング勉強会の講師や、エンジニア志望の大学生向けインターン講師、があるのが強みです。初心者の時によくつまずく箇所が分かっているので、講座では丁寧な解説をしています。

皆さんの今後の自己実現のためのお役に立てるコースとなれば幸いです。
それでは、皆さんとコースの中でお会いできることを楽しみにしております。

利用ソフトウェアとバージョン

下記を使用してWebアプリケーション開発を学習します。

• HTML5 ・・・Webページの文章を構造化して記述

• CSS3・・・Webページの見た目を整える

• JavaScript (ES2015・ES6以降)・・・Webページを動的に操作することができるプログラミング言語

• Bootstrap 5 ・・・よく使うWebぺージのデザインが簡単に設定できるCSSフレームワーク

• MySQL 5.7・・・データベース

• Ruby 3.0.2・・・サーバ側で動かすプログラミング言語

• Ruby on Rails 7・・・Webアプリケーションを高速で開発するためのフレームワーク

• AWS Cloud9・・・アマゾン ウェブサービスが提供するWebブラウザで動作開発環境

• Git 2.13・・・ソースコードのバージョン管理

• GitHub・・・Gitによるソースコード管理を行えるウェブサービス

• Visual Studio Code ・・・テキストエディタ

• Google Chrome ・・・ウェブブラウザ

  
  

学習環境について

• パソコン(Mac または Windows)が必要。

• 動画内ではmacOSを使用。Windows環境での学習については補足説明。

• インストールして使うアプリケーションとして、Webブラウザ Google Chromeとテキストエディタ Visual Studio Codeを使います。MacでもWindowsでもOK。無料。

• 一部のカリキュラムの開発環境には、AWS Cloud9というブラウザでWeb開発が行えるアマゾンのサービスを利用。無料枠で1年間学習可能。

• アマゾン ウェブ サービスのアカウント作成が必要で、メールアドレス、クレジットカード、電話番号の用意が必要（認証のためクレジットカード登録が必要ですが、無料枠内で学習すれば課金発生しません。課金の管理は自己管理にてお願いいたします。無料枠についてはコースで説明いたします。）

• GitHub 無料プラン

Q＆Aコーナーのご利用について

• 本コースの内容を超えるご質問にはお答えできませんので、あらかじめご了承ください。

• コース内で紹介する動作確認済みのサンプルコード以外の動作については、サポート対象外とさせていただいております。

• ご意見・ご要望や、コンテンツのリクエストは、コース内で紹介する専用のフォームにてお知らせいただけると幸いです。

コースにご満足いただけない場合は？

• 受講するか迷っていますか？30日以内返金保証制度があるため安心です（Udemy ウェブサイトよりコースをご購入の場合）

旧版のコンテンツについて

• 学習中の方が困らないように、一定期間動画を視聴いただけるようにしていますが、メンテナンスとサポート（Q&A）は終了しています。使用バージョンが古くメンテナンスが困難なため、一定期間経過後に廃止します。

  
  

補足

• ウェブ開発初心者向けの講座です。実務経験豊富なITエンジニアの方にとっては、物足りない可能性があります。

• セクション「実践：ECサイトのコーディングをしよう」は、コースの難易度調整のために、β版のコンテンツとして試験的に公開中です。予告無く公開中止とする場合があります。

• セクション「Rubyの開発環境構築をしよう」は、別のUdemyコース「はじめてのRuby on Rails入門-RubyとRailsを基礎から学びウェブアプリケーションをネットに公開しよう」とコンテンツを共用している部分があります。

  
  

更新履歴

• 2023/5/31 レクチャー「IAMユーザーを作成しよう」を最新情報へアップデート

• 2022/12/19 セクションリニューアル「新・Git / GitHub入門 - ソースコードのバージョン管理をしよう」

• 2022/12/14 新規セクション試験公開「実践：ECサイトのコーディングをしよう」

• 2022/11/9 新規セクション追加「CSSグリッドレイアウトでタイル状のレイアウトを作成しよう」

• 2022/8/4 セクションリニューアル「MySQL入門」

• 2022/7/4 セクションリニューアル「JavaScript入門」(ES5 → ES2015・ES6以降へ)

• 2022/5/24 新規セクション追加「Flexboxの基本を習得しよう」

• 2022/3/3 新規セクション追加「ウェブ開発の概要を知ろう」

• 2022/3/1 セクションリニューアル 「Ruby on Rails」関連（Ruby on Rails7  へ対応。旧：Ruby on Rails 5）

• 2022/3/1 動作確認済みのRubyバージョンをv3.0.2へ変更（旧：v2.5.0）

• 2022/3/1 セクションリニューアル 「Rubyの開発環境構築をしよう」

• 2021/12/22【β版・試験的公開】ポートフォリオサイト - 作品紹介サイトを制作しよう

• 2021/10/07 HTMLの基本 のVisual Studio Codeのemmet設定のUI変更に対応(macOS, Windows)

• 2021/5/28  セクションリニューアル「Bootstrap5でフォトギャラリーを制作しよう」

• 2021/5/20 セクションリニューアル「Bootstrap」※Bootstrap5 対応

• 2021/1/22 セクションリニューアル「CSS入門」

• 2020/9/26 セクションリニューアル「実践：ウェブサイトのコーディング」

• 2020/6/2 セクションリニューアル「HTML入門」「HTMLステップアップ」

• 2019/6/25 「Atomの設定 不可視文字」 Windows版Atomの操作について補足

• 2019/6/6 フォントオーサム公式サイトの仕様変更に対応

• 2019/4/2 AWS請求アラートのUI変更（設定→Billling設定）に対応

• 2019/1/29 「Rubyのバージョン管理 1」rvmの設定手順を一部変更

• 2019/1/17 「AWS Cloud9による開発環境構築」セクション テキストエディタの設定レクチャーをアップデート

• 2019/1/5 「AWS Cloud9による開発環境構築」セクションの、RVMインストール手順を修正

• 2018/11/06 「HTML入門」セクションのコードの文字が小さい問題を修正

• 2018/8/28 セクション8 Bootstrap 4入門の「ナビゲーションバー」 class指定について補足

• 2018/8/8 実践：Webサイトのコーディング「CSSによるスタイルの設定 2」補足テロップ追加

• 2018/6/15 レクチャー新規追加「JavaScriptのエラーを自力で解決するための方法」

• 2018/5/22 動画アップデート 「コース紹介動画」

• 2018/5/16 レクチャー新規追加 「リモートリポジトリからプル」

• 2018/4/25 誤植修正 イントロダクション - Ruby入門

• 2018/4/2  レクチャー新規追加「ビデオ速度の変更」

• 2018/2/16 セクションを新規追加「Git/Git Hub入門」

Web開発のスキルを身につけて、エンジニアとして開発を楽しんでみませんか？

Web開発を行うには、
特定のプログラミング言語だけではなく、数多くの周辺知識が必要なため、
それらを一つずつ学習していくと、情報の収集/取捨にたくさんの時間がかかります。

もし、どこから学ぶべきか迷っているなら、当コースがおすすめです。

また、一つのプログラミング言語を学んでみたものの、
応用する方法がわからなかった方にもおすすめします。

当コースでは、
実際にアプリケーションを開発しながら
Web開発で必要になる知識やスキルを一気通貫で学習することができるため、
当コース1本で一連の知識や技術が身につきます。

もちろん初学者でも安心してご受講いただけるように、
図も多く利用しており、理解の助けになるよう工夫もしていますので、
ご安心ください！

コースの概要は以下のとおりです。

-----------------------------------------

STEP1 ： Webシステムの概要を理解する

まずは、手始めに私達が学習する対象の概念について理解するところから始めます。
学習対象がどんなものなのかを理解し、目的をしっかりと明確にしていきます。

STEP2 ： 開発環境を整える

ここで、コース中で利用するものについて大まかにお話します。
その上で次のステップからすぐ利用することになる開発のための道具を整えます。

STEP3 ： Webシステムを公開する

当コースで一番大きな部分です。

ここでWeb開発における基本的なパーツを一つずつ理解して、実装をしていきます。
STEP3が完了したら、Webページがインターネット上で独自ドメインで公開できている状態になります。
HTML / CSS / JavaScript / PHP / EC2 など、一つずつおさえていきましょう。

プログラミング初心者でもわかるように、図も多用していますので、
論理的に考えることが苦手、という方でも安心して進めていただけます。

STEP4 ： ファイルを効率よく管理する

このSTEPでは、ファイルを効率的に管理するために
バージョン管理システムのGitと、Gitのホスティングサービスの中では一番利用者の多いGithubを学びます。

Web開発をしていると、たくさんのファイルを作成・更新しなければならないため、
開発効率を上げるため、ここでGitの概念を学び、
そして実際に操作をしながらGitのスキルを身に付けていきましょう。

STEP5 ： 先人が作った機能を利用して開発を加速させる

世界中には数多くのエンジニアが、様々なツールを公開しています。

ここでは、公開されているツールやオープンソースソフトウェアを活用して開発を更に加速させていきます。
それらを利用するための環境構築もかんたんに行えるようにDockerというツールを利用します。
Dockerは昨今のWeb開発現場では利用されるケースも増えてきたので押さえておきたいテクノロジーの一つです。

よりかんたんに開発環境を作成できるようになったら
Webフレームワークを活用し、Webアプリケーションを作成していきましょう。

STEP6 ： 他のサービスと自分のプログラムを連携させる

最後のステップでは、他のサービスをプログラミングで操作できるWebAPIについて学びます。
ここで、APIの概念、そして他のサービスとの連携を学び、アイデア次第で様々なことができるようになります。
またWebhookを学ぶとそのアイデアの可能性も更に広がるでしょう。

一番最後に腕試しとして、一つ課題があるのでぜひチャレンジしてみてください。

ここまでやりきったあなたならきっとできるはず！！

-----------------------------------------

それでは、コース内でお会いできることを楽しみにしております！

▼ご注意ください

storeGが公開している講座は、講師によるナレーションではなく、全てプロのナレーターによるナレーションを採用しています。
そのため、ナレーションにこだわりがある方は、ひとまず無料視聴動画をご確認いただき、受講をご検討いただければ幸いです。

• 新着情報
  

  • [new] 特典動画を追加しました！

    ※シリーズWEBデザイン講座共通の特典動画となります。

    WEBデザイナーの仕事は将来、AIに奪われるのか？について、気になっている方も多いのではないかと思います。そのような疑問に対する答えとなるような動画を作成しましたので、是非、ご視聴ください！
    

  • Udemyのシステムにより自動で生成された字幕が表示されるようになりました。
    ※字幕内容は自動生成のため、正しい日本語に置き換わっていない部分があります。予めご了承ください。
    

  • 特典動画の内容をアップデートしました。

    • GoogleChromeのインストールと起動

    • Bracketsのインストールと起動

    • Bracketsの画面構成とテーマ

    • テーマの追加・変更・削除

    • 拡張機能の追加
      

  • 5月になりましたので旧レクチャー動画を非公開にし、若干の動画修正を行いました。
    

  • エディタソフトの Brackets が復活！
    ※詳細については、【重要】エディタ ※初心者の方は必ずお読みください のレクチャーをご確認ください。
    

  • 大幅アップデートのお知らせ

    【基本セクション】WEBページを作成する【1】のセクションが、HTML編とCSS編に分かれ
    ・WEBページの作成【1】HTML編

    ・WEBページの作成【2】CSS編
    の2セクションになり、レクチャー数が約2倍に増えました。
    ※学習途中の方に関しましては、4月末まで旧レクチャー動画も公開しておきますので、その間までご視聴いただければ幸いです。

    詳細については、【最新版】講座内容と学習の進め方のテキストレクチャーをご確認ください。
    

  • 本講座のサポートについてのレクチャーを追加しました。

    
    

  • 特典セクションに以下のレクチャーを追加しました。

    • Visual Studio Code のインストール

    • テーマの変更

    • ファイルの保存と設定

    • リアルタイムプレビュー
      

  • Bracketsがインストールできなくなったため、かわりのエディタについての説明を追加しました。
    詳細は、カリキュラムの「【重要】エディタとは ※初心者の方は必ずお読みください」をご確認ください。
    

  • 本講座の動画で使用しているエディタ「Bracketsの提供終了」に関するアナウンスを追加しました。
    ※2021年3月1日より、本講座で使用しているエディタ「Brackets」のインストールができなくなり、サポートも9月1日をもって終了すると提供元のAdobeがアナウンスしました。

1. 本講座の特徴
   本講座では、最初に「HTMLが生まれた背景」や「HTMLの特徴」を学習することで、「なぜHTMLはタグを使用するのか？」といった基礎概念から、HTMLを理解できるように構成されています。
   そのため、講師から説明された要素やタグなどを単に書き写して記述(コーディング)するだけではなく、その意味を理解した上で、HTMLのコーディングをはじめることができます。
   
   ご注意

   本講座は別講座である「WEBデザイナーになりたい人のための【WEBデザイン入門講座】」のカリキュラムより、HTML＆CSS入門セクションの一部を抜粋し、【演習セクション】を追加した講座となっていますので、コース内容に重複したレクチャーがあることを、あらかじめご了承ください。
   
   

2. 対象と目標

   本講座は、WEB制作に必要なHTMLとCSSのコーディングをゼロから学びたい【超】初心者の方を対象に、シンプルなWEBページを作成するうえで最低限必要な要素とプロパティを基礎からしっかりと学習し、入門レベルをクリアすることを目標としています。

   そのため、すでにHTMLやCSSを学習済みの方にとっては、物足りない講座となるかと思いますので、カリキュラムなどをご確認いただいた上で、ご受講をご検討いただければ幸いです。
   
   

3. 30日間の返金保証

   ご購入から30日以内であれば、「期待通りではなかった」、「思っていたようなコースではなかった」など、理由を問わず返金可能となっていますので、安心してご受講いただけます。

ナレーション・BGMほか

• ナレーション 竹中 さやか

• BGM YOU (storeG)

イラストなど

• designed by freepik .com

この講座はプログラミンで学習する際にデザイン部分に必要なhtml5とCSS3を使ってWEBサイトページを制作するために必要なことを1日で速習するために特化した講座です。実際に手を動かして学習しながら解説しているので、理論や機能を単独で学ぶ講座のように、途中で集中力を切らして飽きることがありません。

この後に続く学習の

• PHP

• WordPress

• Bootstrap

• Ruby on Rails

これらをデザインするのに必要な基礎学習内容になっています。

本格的にHTML/CSSを学習しなくても、ある程度の流れをつかむことが出来る内容になっています。

今は必要はないという知識は含んでいません。実践を重視した講座です。

▼この講座にむいている人

このHTML/CSS速習を学習しただけでは完全に理解は出来ませんが、

• これからPHPやWordPress、Ruby on RailsやBootstrapを学習する人

• 何から学習していいかわからない人

• HTML/CSSの構造がどうか分からない人

• 何年も前にやったけど思い出したい人

• 挫折しかけたけど学習しなおしたい人

• プログラミングメインの方

• 何から学習していいかわからない方

• HTML/CSSを1日で学習したい方

そのような方にむいています。

この講座はHTML/CSSの速習講座になっておりますので、凄く細かい説明は御座いませんが

代わりにプログラミングする上でデザイン部分を1日で学習することができます。

▼この講座にむいてない人

• 懇切丁寧に全部知りたい人

• デザインメインの人

はこの講座では物足りないと思います。

▼プログラミングメインで1日でなんとか概要を把握したい人向けの講座です。

ですが、しっかりと必要なことは埋め込まれているので安心です。