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

こちらでは、UdemyのHTML/CSS講座を、おすすめ、セール情報とともに紹介していきまっす。

Udemy講座の特徴

udemy

具体的な講座を見る前に、Udemyについてざっと整理しておきましょう。

Udemyは動画ベースの学習サービス、以下のような特徴があります。

Udemyの特徴

  • 買い切り型で継続コストがない
  • その上、内容更新あり、質問可能
  • スマホ対応、流し聴き学習も可能
  • 30日間返金が可能
  • セールで頻繁に80%以上割引

なんといっても、買い切り型なので購入後は継続コスト等が一切不要なのが安心。

その上で、講座の内容がアップデートされたり、質問も可能なので、買い切りなのに利用できるサポートが手厚いです。

講座の内容も10時間以上に登るものも多く、1本で基礎から応用まで学習可能

ユーザー評価や、動画プレビューあり、さらには30日間の返金保証もあるので、まず失敗しない購入が可能

購入時に絶対に抑えておきたいのがセール。毎回80~90%OFFの割引されます。

基本月1回は必ずセールが開催されているので、そこで購入するようにしましょう。また、新規ユーザーは1本目は大概セール価格で購入可能です。

 

UdemyのHTML/CSS講座一覧(セール情報付き)

以下が今Udemyで学習できるHTML/CSSの主な講座(日本語のもの)です。

セール価格情報も載せています。上述したとおりUdemyのセールは大きいので逃さずゲットしてください。

学習コース評価
(4.4)
総評価数 4719件
(4.1)
総評価数 1000件
(4.2)
総評価数 640件
70以上のレッスンで、基礎からしっかり学べる! HTML5完全マスターコース...
発売日 2015/10/16
受講者 1,856人
通常 9,600円
新規 1,820円
(3.8)
総評価数 299件
Bootstrap3+Dreamweaver(CC2018)+HTML5+CSS3 レスポンシブWEBデザイン実践コース...
発売日 2018/02/15
受講者 1,296人
通常 12,000円
新規 1,890円
(4)
総評価数 237件
HTML・CSS・JavaScript入門・はじめてのHTMLからマスターしていこう...
発売日 2018/02/16
受講者 1,100人
通常 2,400円
新規 1,680円
(4.1)
総評価数 270件
(3)
総評価数 92件
(4.3)
総評価数 114件
JavaScript+HTML:Electronでつくるローカルアプリ実例講座 for Windows...
発売日 2017/04/14
受講者 724人
通常 10,200円
新規 1,680円
(3.6)
総評価数 90件
初めての人の「HTML5」入門
発売日 2015/08/26
受講者 413人
通常 3,000円
新規 1,610円
(4)
総評価数 85件
(4)
総評価数 60件
(4.1)
総評価数 69件
HTMLやCSSをサクサク書こう! Emmet基礎講座
発売日 2016/10/24
受講者 259人
通常 4,200円
現在 2,400円
(4.6)
総評価数 44件
(4.2)
総評価数 46件
誰でもわかる HTML基礎&CSS基礎
発売日 2018/04/26
受講者 176人
通常 21,000円
新規 1,610円
(3.5)
総評価数 20件
(2.6)
総評価数 28件
HTMLやCSSをどんどん書こう! Brackets基礎講座
発売日 2016/09/08
受講者 118人
通常 3,000円
現在 2,400円
(3.9)
総評価数 28件
初心者向けHTML & CSS基礎講座
発売日 2018/04/05
受講者 85人
通常 2,400円
新規 1,680円
(4)
総評価数 19件
誰でもわかる HTML5
発売日 2015/10/09
受講者 69人
通常 4,800円
新規 1,610円
(4.2)
総評価数 18件
(4.4)
総評価数 11件

 

UdemyのHTML/CSSおすすめ講座 3選

以下がおすすめの講座です。

以下の講座は、HTML/CSSの基礎学習から、応用・実用まで内容網羅。

1本でかなり幅広い内容を学習できるので、非常にコスパの高いHTML/CSS学習が可能です。

それぞれ詳しく見ていきましょう。

[HTML/CSS/JavaScript] フロントエンドエンジニアになりたい人の Webプログラミング入門

[HTML/CSS/JavaScript] フロントエンドエンジニアになりたい人の Webプログラミング入門
発売日 2017/08/29
(4.4)

9 total hours
Webの仕事に関わる人なら誰でも必要な、「HTML/CSS」とプログラミング言語「JavaScript」の知識をこれ一本で。基礎の基礎から、jQuery/Vue.jsまで学びます。

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

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

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

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

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


↓全て表示↑少なく表示
 
Users Voice
YouTubeで勉強させていただいてとてもわかりやすかったので、 本格的に学びたいと思い、こちらを購入しました。 実際やってみて、今までなかった知識が補われていく感じが しました。もっと、自分の身になるように繰り返し学習したいと 思います。 (参考:Udemy)

↓全て表示 ↑少なく表示
 
レクチャー内容
  1. はじめに
    • Udemyでの受講について
    • Webの開発環境を整えよう(Windows編)
    • Webの開発環境を整えよう(macOS編)
  2. 入会フォームを HTML/CSSで作成しよう
    • サンプルファイルのダウンロード
    • 簡単なHTMLを作ってみよう
    • Visual Studio CodeでのHTML編集
    • テキストフィールドを作ろう
    • ボタンを作ろう
    • headタグの中に記述する決まり文句
    • CSSで見た目を調整しよう
    • CSSの内部参照でページ内の共通パーツのスタイルを調整しよう
    • CSSの外部参照で複数ページに共通のスタイルを記述しよう
    • sanitize.cssでブラウザーのデフォルトCSSをリセットしよう
    • divタグと class属性で要素を区分けしよう
    • marginプロパティの autoを使ってエリアを中央に揃えよう
    • box-shadowプロパティで浮いたボタンを作ろう
    • 適切な HTMLタグを利用しよう
    • spanタグで「必須」ラベルを作ろう
  3. レスポンシブWebデザインで、スマホ対応のサイトを作ろう
    • HTML/CSS:CDアルバムの紹介ページを作ろう
    • HTML:セクショニングコンテンツ(header, section)
    • CSS:タイトルの CSSを整える
    • CSSのセレクターの種類
    • 画像を配置しよう - img
    • CSS:floatを使った回り込み
    • CSS:clearで回り込みを解除する
    • HTML: リンクを張る aタグ
    • HTML:「実体参照」でコピーライト表記を追加する
    • CSS:Webフォントを使う
    • CSS:レスポンシブWebデザイン(RWD)のレイアウトを作る(メディアクエリー・リキッドデザイン・ブレイクポイント)
    • CSS:CSSアニメーションを使う(Transition)
  4. Bootstrapで素早く Webページを作ろう
    • Bootstrapを、CDNで利用する
    • Bootstrap:Containerを使う
    • Bootstrap:グリッドシステムを使う
    • Bootstrap/HTML:オフセットとフォームパーツ
    • Bootstrap/HTML:フォームのスタイルと placeholder属性
    • HTML:ドロップダウンリスト(リストボックス)を作る
    • HTML:チェックボックスを作る
    • HTML/CSS:ラジオボタンと、!important指定
    • Bootstrap 4での Labelから Badgeへの名称変更
    • Bootstrap:ボタンとラベルを作る
  5. JavaScriptで今日の日付を表示しよう
    • HTML/CSS:画面を作り上げよう
    • JavaScript:オブジェクト・メソッド・パラメーター
    • JavaScript:文字列・数字と四則演算、文字列連結
    • JavaScript:変数の扱い
    • JavaScript:オブジェクトとインスタンス
    • JavaScript:Dateオブジェクトを使ってプログラムを仕上げよう
  6. イベントドリブンな、ストップウォッチプログラムを作成しよう
    • HTML/CSS:画面の見た目を作成しよう
    • JavaScript:getElementByIdとプロパティで要素を書き換えよう
    • JavaScript:if構文で条件に沿ったプログラムを作ろう
    • JavaScript:function(関数)定義をしよう
    • JavaScript:イベントドリブンなプログラムを作成しよう
    • JavaScript:setIntervalで定期的に実行されるプログラムを作ろう
    • JavaScript:変数のスコープを理解しよう
    • JavaScript:秒数から、分と時を計算しよう
    • JavaScript:thisを使って、STOPボタンを実装しよう
  7. Ajax通信でフォトライブラリーを作成しよう
    • HTML/CSS:ページを形作っていこう1 - position: fixed
    • HTML/CSS:ページを形作っていこう2 - position: relative, absolute
    • JavaScript:JSONデータを配列で操ろう
    • JavaScript:createElementと appendChildで HTML要素を作ろう
    • JavaScript:for構文で繰り返し処理をしよう
    • 【補足】利用した画像ファイルは次のレクチャーでも利用してください
    • JavaScript:Ajax通信を行なおう
    • JavaScript:Ajax通信で受信したデータを処理しよう - 論理演算子
    • JavaScript:画面を仕上げよう
  8. JavaScriptライブラリーを利用しよう
    • jQuery:jQueryを使ってみよう
    • jQuery:Ajax通信を行なってプログラムを仕上げよう
    • Vue.js:Vue.jsを使ってみよう
    • Vue.js:Vue.jsで画面を作り上げよう
    

HTML・CSS・JavaScript入門・はじめてのHTMLからマスターしていこう

HTML・CSS・JavaScript入門・はじめてのHTMLからマスターしていこう
発売日 2018/02/16
(4.1)

15 total hours
初心者歓迎!HTML/CSS/JavaScriptの学習を学んでいき、様々なアプリケーションを制作していきましょう!

この講座は、HTML・CSS・JavaScriptの学習を初めて学習しようとされている方を対象にした、Web開発におけるフロントエンド技術の入門コースです。コードエディタを導入し、HTMLファイルを作成するなどの基本的な部分から説明し、高い障壁をできるだけ減らした状態で学習に取り組めるように配慮・設計されています。


↓全て表示↑少なく表示
 
Users Voice
windowsでも分かりやすく説明がされていた。また、必要な項目と今回は省略する部分を伝え、視聴者が理解しやすく解説をしていた。 (参考:Udemy)

↓全て表示 ↑少なく表示
 
レクチャー内容
  1. はじめに
    • 開発環境について -OS・ブラウザ・コードエディタ-
    • Visual Studio Codeの画面構成について
  2. HTMLでWikipedia風サイトを作ろう
    • HTMLとは何か?HTMLファイルを作成してみよう
    • HTMLの5つの基本について知ろう
    • HTMLを組む手順を知り大まかな構造を定義しよう
    • 見出しタグの定義
    • pタグとリストタグとaタグとimgタグ全部のせ
    • 定義型リストタグ
    • formタグ関連
    • その他のマークアップ
    • headタグの中身について
    • W3C-MARKUP-VALIDATIONサービス
  3. CSS基礎 - ポートフォリオWebサイトのデザイン・レイアウトを完成させよう-
    • CSSとは??
    • CSSを作成するまでの流れ・reset.cssについて
    • CSSの記述の基本とルールについて
    • body全体に調整するfont-sizeとcolorプロパティ
    • font-famlyの指定とWebフォントの利用について
    • fluidイメージ・画像まわりのCSS設定について
    • Google Chrome Developerツールの使い方(HTML・ CSS)
    • Aboutエリア1・ボックスモデルと全体の中央配置
    • Aboutエリア2・テキストや画像の中央揃え
    • Aboutエリア3・marginとpaddingの理解と使い分け
    • Worksエリア1・displayプロパティ
    • Worksエリア2・divタグの活用
    • Worksエリア3・flexboxで横並びレイアウト
    • navエリア1・flexbox応用1・様々なレイアウト
    • navエリア2・flexbox応用1・様々なレイアウト
    • Contactエリア1・flexbox応用1・折り返しの設定
    • Contactエリア2・formのデザイン
    • Contactエリア3・formのデザイン2
    • heroimageエリア・positionを使った上下左右中央レイアウト
    • footerエリア1・font-awesomeの利用について
    • footerエリア2・positionを使った様々なレイアウト
    • CSSがうまく効かない時に確認したいこと
  4. CSS基礎 - ポートフォリオWebサイトのスマートフォン対応のCSSを完成させよう-
    • Webサイトのスマホ対応のポイント(ビューポート・メディアクエリー・ブレイクポイント)
    • 2-Aboutエリアのスマートフォン対応
    • 3-worksエリアのスマートフォン対応1
    • 4-worksエリアのスマートフォン対応2
    • 5-Contactエリアのスマートフォン対応1
    • 6-Contactエリアのスマートフォン対応2
    • 7-header&hero-imageエリアのスマートフォン対応
    • 8-ハンバーガーメニューの実装
    • 9-モバイルメニューの表示
    • 10-footerのスマートフォン対応+α
    • 11-vwとvh・様々な単位
  5. JavaScript基礎 - -
    • JavaScriptとは何か??基礎を知ろう
    • JavaScriptでデータ操作を行ってみよう
    • 変数とデータ型について知ろう
    • ベースとなるHTML・CSSを作成しJavaScriptファイルの作成・読み込みをしよう
    • Math.random()でランダムな数値を出力してみよう
    • if文・条件分岐をマスターしよう
    • 関数とイベントを使ってユーザーの動きに応じてプログラムを動かそう
    • class操作を行ってみよう
    • CSSアニメーションと組み合わせて、占いアプリを完成させよう
  6. JavaScriptを使ってビンゴ抽選システムを作ってみよう
    • 基礎となるHTML/CSSの作成
    • Flexboxの応用を学んで様々なレイアウト方法を身につけよう
    • JavaScriptの配列を理解しよう
    • setInterval()を使ってルーレットの動きを作ろう
    • clearIntervalを使ってルーレットを停止する動きを作ろう
    • 変数のスコープを理解しよう
    • 抽選結果をリストに表示していこう
    • ビンゴ抽選システムの仕上げを行っていこう
  7. jQueryでポートフォリオWebサイトに様々な機能を追加しよう
    • jQueryとは??使用するための準備
    • jQueryでハンバーガーメニューの開閉機能をつけよう
    • ローディング画面を実装しよう
    • ページトップボタン・スムーススクロール機能を実装しよう
    • ユーザーエージェントでスマホ時とPC時の処理を分けてみよう
    • にゅるっと固定ナビゲーションを作成してみよう1
    • にゅるっと固定ナビゲーションを作成してみよう2
    • jQueryプラグインを使ってスライドショーを実装してみよう
  8. FTPソフトを使ってWebサイトを公開してみよう
    • FTPとは何か??
    • レンタルサーバ(Heteml)の利用登録とFTPソフト(Filezilla)の設定をしよう
    • FTPソフトを使ってWebサイトデータを公開してみよう
  9. Web APIの利用方法を学ぼう
    • Web APIについて知ろう & ベースとなるHTMLとCSSを作成しよう
    • Google Maps APIの利用登録をしてみよう
    • Google Maps APIを使って地図の表示を行ってみよう
    • Google Maps APIを使ってオリジナルアイコンを表示してみよう
    • Google Maps APIの注意点とレスポンシブ対応方法を理解しよう
    

HTML5&CSS3+JavaScript 講座【初級レベル】コーディングに自信のない方や独学者の復習に最適です。

HTML5&CSS3+JavaScript 講座【初級レベル】コーディングに自信のない方や独学者の復習に最適です。
発売日 2018/04/11
(4.1)

5 total hours
よく使う HTML 要素や CSS プロパティの解説と JavaScript でスライダーやドロワーメニューを実装する講座。対象:HTMLの基本を習得された初級者レベル。初めてHTMLやCSSに触れられる【初心者】には少し難易度が高めです。

What's New

HTML5&CSS3 講座に JavaScript 講座のカリキュラムを追加し、大幅アップグレード!
カリキュラムを大幅アップデートしたため、セクションごとでナレーションの声が違います。予めご了承ください。

  • 2020/05/27
    リソースファイル差し替えについてのお知らせ
    リソースファイルを修正し、再度アップロードしなおしましたので、お手数ですが以下のレクチャーにあるファイルを再度ダウンロードしていただきますよう、よろしくお願い致します。
    セクション13:JavaScriptでスライダーを設置しよう!

    • 43. 9.画像を表示

  • 2020/1/24
    無料サーバの申込み・設定など ※XFREE編のセクションを追加しました。

    • サーバの申込み・設定・サイト公開

      ※無料レンタルサーバー「Hostinger」の画面や仕様などの変更により、新たに「XFREE」を紹介する動画を追加しました。詳細につきましてはセクション内にあるアナウンスをご確認ください。

  • 2019/12/28
    JavaScriptのセクションを追加し、タイトル・サブタイトルを変更しました!

    • JavaScript入門

    • JavaScriptでスライダーを設置しよう!

    • JavaScriptでドロワーメニューを設置しよう!

  • 2019/11/16
    タイトルとサブタイトルを変更しました。
    スタイル・ルールの小テストを追加しました。

  • 2019/07/28
    タイトルとサブタイトル、説明内容、PVを変更しました。
    ※コース内容のメインが「HTML5とCSS3の基本仕様の学習」であることを明確にするため、レスポンシブWEBデザイン(CSS)のコードの解説を特典扱いに変更しました。


ーーー

HTML5とCSS3の基本を総合的にしっかり身につけられるコース
+ JavaScript 講座のカリキュラムも追加され、スライダーやドロワーメニューの設置方法も学習できるようになりました!

  • HTML5とCSS3を理解するために必要なポイントがギュッと凝縮されており、無駄がなく短時間で学べるのが特徴です。

  • 学習教材は、レシピページのサンプル(HTML5とCSS3で作成)です。

  • 学習教材であるサンプルWEBページ(レシピページ)のHTMLを上から順に丁寧に説明していますので、コードを全て理解できるようになります。

  • レスポンシブWEBデザイン(CSS)のコード解説は、特典扱いとなりました。


    ※動画で紹介している操作画面はWindowsになっていますが、基本操作はエディタとブラウザですので、Macでの操作であっても問題はありません。


受講生へのメッセージ

講座内容(レクチャー)での説明などで、わからない点などがありましたら、Q&Aにてお気軽にご質問ください。
講師自身の私としましても、受講生様と共に学び、成長できればと願っています。


ナレーション・BGM

  • ナレーション 酒味 たろう・竹中 さやか

  • BGM YOU (storeG)

  • BGM 甘茶の音楽工房

  • イラスト rawpixelほか


↓全て表示↑少なく表示
 
Users Voice
HTML、CSS、JavaScriptを一通り勉強した後で、こちらのコースを受講しました。 改めて、知識をきちっと整理でき、より深く勉強できました。 ただ、HTML、CSS、JavaScriptを使用した1つのWEBページの実践的なコーディングを、一連の作業を通して行い、総合的な復習と定着となることを期待していたので、その作業がなかったことは残念でした。 しかし、とても良い講座だったので、中級編なるものをリリースされたおりには、必ず購入したいと思います。良い講座をありがとうございました! (参考:Udemy)

↓全て表示 ↑少なく表示
 
レクチャー内容
  1. はじめに
    • Udemyの動画視聴画面の説明 【PC編】
  2. HTML5とは
    • HTML5
  3. WEBページを制作するために必要なツール
    • WEBページの作成に必要なもの
  4. HTMLの基本用語
    • HTMLの基本を学ぶ
  5. 基本的な要素
    • 基本的なHTML文書の説明
    • 基本的なHTML文書でよく使われる要素
    • HTMLのレイアウトで分ける3つのグループ
    • ヘッダーのグループ
    • フッターのグループ
    • コンテンツのグループ
    • 要素内でよく使われる要素
  6. HTMLのスタイル・ルール
    • スタイル・ルール
  7. サンプルWEBページの作成 ※HTML編
    • WEBページの作成 準備編
    • WEBページの作成 コーディング編
  8. 無料サーバの申込み・設定など ※XFREE編
    • 本セクションをご視聴される前に必ずご確認ください
    • サーバの申込み・設定・サイト公開
  9. 有料サーバの申込み・設定など ※エックスサーバー編
    • サーバの申し込み
    • サーバの設定
  10. CSSとは
    • CSS作成のルール
    • CSSのプロパティ
    • フォント・テキストに関するCSSプロパティ
    • 背景・ボーダーに関するCSSプロパティ
    • ボックスに関するCSSプロパティ
  11. レスポンシブ・ウェブデザインとは
    • レスポンシブ・ウェブデザインの概要
  12. JavaScript入門
    • 本講座(セクション)で学ぶ範囲・目標設定
    • JavaScriptとは
    • 1.JavaScriptの実行
    • 2.記述のルール
    • 3.変数
    • 4.変数宣言のキーワード
    • 5.関数
    • 6.jQuery
  13. JavaScriptでスライダーを設置しよう!
    • 本講座(セクション)で学ぶこと
    • Swiper
    • 1.Basic
    • 2.Loop
    • 3.Navigation
    • 4.Auto
    • 5.Pagination
    • 6.Navigation ※色の変更
    • 7.Navigation ※マークの変更
    • 8.Pagination ※色の変更
    • 9.画像を表示
    • 10.Pagenationで移動
    • Swiperのサンプルデモ
  14. JavaScriptでドロワーメニューを設置しよう!
    • 本講座(セクション)で学ぶこと
    • 1.Drawer
    • 2.メニューを右側に表示・ハンバーガーアイコンのカスタマイズ
    • 3.メニューを閉じる(バツ印)アイコンのカスタマイズほか
    • 4.アイコンのカスタマイズほか
  15. おわりに
    • コース修了おめでとうございます
  16. 特典
    • WEBサイトの基本知識
    • 用語の説明
    • コンテンツ・モデル
    • CSS3 ※サンプル・チートシート
    • FTPの説明
    • 画像を変更する
    • サンプルWEBページ (レシピページ) のダウンロード
    • サンプルWEBページ(style.css)の解説編1
    • サンプルWEBページ(style.css)の解説編2
    • サンプルWEBページ(style.css)の解説編3
    • Empty New Tab Pageの追加方法
    • 【旧:Hostinger】サーバの申し込み・設定
    • 【旧:Hostinger】WEBページの公開
    • 【旧:Hostinger】お問合せ(メールフォーム)の作成
    • 【旧:Hostinger】アーカイブされた(WEBサイトが表示されない)場合
    • ボーナスレクチャー: ブックマークとコース紹介
 
Preview Video
   

関連:HTML/CSSを本でも学ぼう

UdemyのHTML/CSS講座は上述したとおり、HTML/CSSの基礎からjQueryやVue.jsを使った実用等まで、詳しく・幅広く学べる非常にパフォーマンスの高い学習法。

ただ、リファレンスとしては動画だと見返しづらい側面もありますので、書籍も併用しながら学習すると良いかと思います。

HTML/CSSの参考書は以下で紹介しています。合わせて参照ください。

いじょうでっす。

コメント

タイトルとURLをコピーしました