自己紹介
フリーランスエンジニアをしているヨノと申します。
独学でプログラミングを学び、ソシャゲ・SaaS開発などを経て、2018年からフリーランスエンジニアとして活動しています。
主にバックエンド中心の案件を獲っていますが、たまにはフロントエンドも。
主な使用言語・FWは、Ruby/Rails/Go言語/JavaScript/TypeScript/React/Vue.js
HTML/CSSって簡単なようで奥が深いですよね!?特にCSS!!
HTML/CSSを学んでゼロからWEBサイトを作ろうとしても
- 「何から手をつければ良いのだろう...」
- 「思ったようなデザインにならない...」
といった状態になりませんか?(私はそうでした...)
そこで、こういった人向けに「実践的なHTML/CSSスキルを学べる」Udemy講座を紹介します。
目次
Udemyとは?
Udemyとは色んな分野のトップ講師の講座動画を購入できるプラットフォームで、特に「プログラミング」の分野は講座数が多くて充実しています。
Udemyの特徴
- PCの画面や資料を映しながら説明してくれるのでわかりやすく、書籍より早く学べる
- 講師に質問でき、他の人の質問とその回答も見れる
- スマホでも見れるので、スキマ時間を活用できる
- 復習として2周目、3周目するときは倍速再生を使うことで効率よく学べる
- 満足できなかった場合、30日以内であれば返金してくれる
満足できなければ返金してもらえるので、少しでも気になる講座があれば、どんどん受講してスキルアップできるわけです!!
HTML/CSSを学べるUdemyのおすすめ講座
HTML5+CSS3 手を動かしてマスターする WEBデザイン/プログラミング動画講座

コース時間 | 10.5時間 |
評価 | ☆4.1(2022/11/6現在) |
受講者数 | 6,265人 (2022/11/6現在) |
言語 | 日本語 |
講師 | 大手半導体メーカー販促部門でデザイナーとして勤務後、WEBデザイン会社を設立。 現在は現場でのデザインとともに新人教育を多く行っている。 |
対象者 | これからHTML、CSSを学ぶ人 |
講座内容
この講座はhtml5とCSS3を使ってWEBサイトページを制作するために必要なことを学ぶことに特化した講座です。
全編を手を動かして作品を制作しながら解説しているので、理論や機能を単独で学ぶ講座のように、途中で集中力を切らして飽きることがありません。
- WEBページ制作に必要な知識はすべて基本からていねいに分かりやすく説明しているので、これだけでサイト作成のスキルを身につけられます。
- 将来役立つかもしれないけれど今は必要はないという知識は含んでいません。実践を重視した講座です。
- 「実際に手を動かしてコードを書き」、ひとつのサイトを制作することを通して身につけます。
- 解説はすべて動画で行い、現役のデザイナーがページを制作する工程をマウスの動きひとつまで収録しています。
- ナレーション付きでわかりやすく解説しています。
- 必要な画像素材など作業に必要な素材はすべて添付されています。
- 仕事で必要なことだけをOJTで集中的に学ぶ講座です。

基本的なWebの構成から始まって、実際に書き換えてみたらどうなるかを体験しながら講座を進めることができる。わかりやすく、テンポの良い授業。私の様な初心者にもわかりやすく、理解しやすい講座でした

説明の一つ一つが丁寧でとても聞き取りやすかった。基本的に言葉だけの説明はコースの最初だけで、他は手を動かしながら学べたため飽きなかった。たまにスペルを間違ったまま進めていたり、後でいつの間にか記述が変わっていたりする部分があったので、動画である以上そこは直してほしかった。

HTMLやCSSなんて簡単だろうと思っていましたが、今回一から体系的に学んだことで、自分の知識の穴や普段では思いつかないような実装方法を知ることができてよかった。早送りで見てもわかりやすい。
こんな方におすすめ
- HTML/CSSを初めて学ぶ人
- まずは基礎的な知識をしっかりと見に付けたい人
↓↓↓コースの一部が無料公開されているので、確認してみてください!!↓↓↓
【最新2022】未経験からHTML、CSS をマスターして、WEBデザイナー・エンジニアを目指す 最高の実践コース

コース時間 | 17.5時間 |
評価 | ☆4.3(2022/11/6現在) |
受講者数 | 7,386人 (2022/11/6現在) |
言語 | 日本語 |
講師 | 大手半導体メーカー販促部門でデザイナーとして勤務後、WEBデザイン会社を設立。 現在は現場でのデザインとともに新人教育を多く行っている。 |
対象者 | HTMLとCSSを基礎から確実に学びたい方 基礎から体系的に学びなおしたい方 |
講座内容
このコースは最新のHTML5とCSS3を基礎から完全にマスターすることを目的に作られた講座です。WEBサイトの制作ははじめてという初心者の方から、中級以上の方の学び直しやトレーニングにも役立つよう、ひとつひとつ詳しく、丁寧に説明しています。
このコースはNEC、SONY、トヨタ、三菱商事など多くの日本のトップ企業に採用されている実績のある講座です。
特に理論や原理だけでなく、実際にいくつものページを制作し、ひとつひとつ機能を確実に身につけられるよう実践的なコーディングにも多くの時間を使い、即戦的なスキルが身につけられるよう構成されたコースです。
WEB開発会社や独立系のエンジニアを多く輩出している実績のあるコースです
このコースの卒業生の多くが夢を叶えて多くの現場で活躍しています。このコースだけでWEB制作技術の基礎はマスターでき、実際の実務で活用することができます。
初めての方にも分かりやすいコース構成
コーディングは初めてという方でも、確実にHTML5とCSS3の技術を身につけ、WEBサイトを公開することができます。すべてのセクションで理論だけでなく実際に手を動かしてコードを書く演習が行われるので、初心者でも実践的な技術が身につきます。
最新のCSS Grid LayoutとResponsive WEB Designが学べる
WEB制作は日進月歩で変化しています。少し前までは主流であった技術が明日には陳腐化します。このコースでは最新のCSS Gridによるレイアウト技術と、あらゆるデバイス機器に対応するレスポンシブページ制作技術が身につけられます。
最新HTML5とCSS3のすべてが確実に学べる
- HTML5とCSS3のほぼすべての機能を詳しく、分かりやすく解説しています。
- CSS Gridのスキルが確実に身につきます。
- レスポンシブWEBであらゆるデバイス機器に対応するレスポンシブページを作る力が身につきます。
- ありきたりの解説書とちがい、実際の作品制作を通して実践的なスキルを身につけられます。
- 初心者の方にも分かる、誤解のない説明
- きちんと基礎から体系的に学びなおしたい方にも最適です。
学習内容
12のセクション、125本のレクチャーを合計17時間半のビデオで解説しています。長時間のコースですが、充実した内容で挫折させません。
各セクションにはそのセクションの学習で使用する練習素材がすべて添付されているので、すぐに学習がはじめられます。学習内容はすべて理論の説明と実践的なコーディングが並行して行われ、基礎から確実な力が身につけられます。

基本から丁寧に説明されていてわかりやすく、学びやすかったです。今まで独学で勉強してきましたが、グリッドレイアウトという新しい分野のことを学ぶことができたことに感謝しております。村守先生、ありがとうございました。これから学んだことを復習して実践ですぐに使えるように頑張ります。

丁寧に教えていただきありがとうございました。
まだ理解できていないところもあるので、何度も繰り返しやってみようと思います。
先生の授業は楽しかったです!実際に手を動かしながら勉強していると、自分が書いたタグでページが変化していくところにワクワクしました。
先生の別の講座も購入しているので、そちらも楽しみにしています。
こんな方におすすめ
- HTML/CSSを初めて学ぶ人
- HTML/CSSの基礎から実践的なコーディングまでを学びたい人
- 手を動かして実践的な制作演習で達成感と自信を持てるコース学習をしたい人
- モバイルデバイスにも対応したResponsiv WEBページを制作するスキルを身に付けたい人
↓↓↓コースの一部が無料公開されているので、確認してみてください!!↓↓↓
実践Webサイトコーディング講座 | HTML5とCSS3を使って、カフェのサイトやWebメディアサイトを作ってみよう

コース時間 | 9時間 |
評価 | ☆3.8(2022/11/6現在) |
受講者数 | 9,267人 (2022/11/6現在) |
言語 | 日本語 |
講師 | 1000名以上の卒業生がいる実績あるWebデザインスクールが提供 |
対象者 | 基礎的なHTMLとCSSの知識はあるが、実際のWebサイト制作は自信のない人 より実践的なコーディングのスキルを身に着けたい人 |
講座内容
HTMLとCSSの基礎がわかっている方が、実践的なWebサイトコーディングを身につけるコースです。
実際の3つのWebサイトを初級・中級・上級と段階を踏んで作りながら、実践的なWebサイトコーディングのスキルを身につけます。
【初心者向け】クリニックサイトのマークアップ
仮想のクリニックを紹介するWebサイトを、1からマークアップしていきます。
シンプルなデザインなので、マークアップもあまり複雑ではないため、初心者向けの章です。
このサイトでは、画像タグを利用してメイン画像を表示させるところから、floatを駆使してボックスを横並びにするなど、幅広くHTMLとCSSを利用していきます。
【中級者向け】美容院のWEBサイト
仮想の美容院を紹介するWebサイトデザインを、1からマークアップする方法を学びます。
シャドウや背景画像等の少し複雑なスタイルを使用します。
このサイトでは、マウスホバーでリンクに下線をつけるといった操作性も意識したマークアップ方法や要素内からはみ出た部分をスクロールできる新着窓、お問い合わせフォームの作成など、覚えておくと便利なマークアップ方法を学びます。
【上級者向け】Webマガジンサイトのマークアップ
Webメディアを、 HTMLとCSSを使って1からコーディングしていきます。
縦に長いコンテンツ量の多いサイトになりますので、上級者向けの章になっています。
さまざまなHTMLタグ、CSSプロパティを駆使して、デザインをそのまま反映させるようなマークアップ方法を学びます。
その他、ページの読み込み速度が早くなるよう心がけてマークアップや必要なページネーションや、フッター作成についても学んでいきます

ProgateでHTMLとCSSの基礎を学びましたが、いざ模写コーディングをしようとすると、まったくできない。。しかし、このコースを学ぶことにより、サイト構築の実践スキルが身につきますので、模写コーディングにも役立ちます。id属性やclass属性の使用パターンの違いやなぜその属性名をつけるのかなど、意図や意味などを深く学べます。説明もわかりやすい言葉を使われてますので、理解力が乏しい人でも安心して学んでいける教材だと思います。

基本的にわかりやすく、非常に理解が深まりました。所々早い部分や、説明が不足していると感じた部分があったため、その辺りは別途確認しようと思います。
こんな方におすすめ
- 基礎的なHTMLとCSSの知識はあるが、実際のWebサイト制作は自信のない人
- より実践的なコーディングのスキルを身に着けたい人
- いろんな種類のWebサイトを作って経験を積みたい人
↓↓↓コースの一部が無料公開されているので、確認してみてください!!↓↓↓
CSSを効率的に書く!フロントエンドエンジニアのための「Sass」講座 ~基礎から実践まで~

コース時間 | 5時間 |
評価 | ☆3.9(2022/11/6現在) |
受講者数 | 2,924人 (2022/11/6現在) |
言語 | 日本語 |
講師 | フロントエンドエンジニアとして働いた後、2017年にフリーランスとして独立。 2019年にフィクセル株式会社にフルスタックエンジニアとしてジョイン。 |
対象者 | CSSは書けるが、Sassは初めての人 就職、転職の際に有利なスキルとして技術を身につけたい人 |
講座内容
SassはCSSを拡張したメタ言語、CSSプリプロセッサであり、コードの再利用、変数、演算、関数、条件分岐などプログラミング要素をCSSに導入し、効率的で柔軟なコーディングを可能にした強力な言語です。
Sassが誕生してから10年余りが経ち、ある調査では開発者の60%以上がSassを使用しているという調査結果があるほど普及が進みました。
この傾向は今後Sassを超える画期的な言語が開発されて普及するまで続くでしょう。
CSSを生のまま書く現場は減っていき、当たり前のようにSassの技術が求められる時代になっています。
この講座では、CSS3の基本を習得済みの方が、ゼロからSassを学び、実践で使えるレベルまで習得することを目指しています。
プログラミングや黒い画面に苦手意識を持っている方でも大丈夫です。
最初から全部の機能を使いこなす必要はありません。
手順通りに、覚えた機能から少しずつ実戦投入していけばいいのです。CSSを初めて覚えた頃を思い出して、楽しんで学んでいきましょう!

説明が丁寧でとてもわかりやすかったです。
と言っても無駄な説明は一切なく、要点を絞って説明してくれているので、飽きずに楽しんで受講する事ができました。sassの導入部分やgulpなど、今までもやもやしていた部分も見えてきました。
この講座を一通り勉強すれば、直ぐ実践で使えるようになるのではないでしょうか。
sassは勉強中で実際使っていますが、関数をつかったりエラーを出力させたり、知らなかったけど使える実践的な説明も多く、とても勉強になりました。今すぐsassを書きたくなりました。

一つ一つの動画が長すぎず見やすかったです。
また、最後に実際に使用する例も理解しやすいと思いました。
ただ、内容とは関係無いですが、タイプしながら話す際、マイクから離れているのか声が小さくなって聞き取れなかったり、打鍵音が強いことが気になりました。
こんな方におすすめ
- 一つ一つの動画が長すぎず見やすかったです。
- また、最後に実際に使用する例も理解しやすいと思いました。
- ただ、内容とは関係無いですが、タイプしながら話す際、マイクから離れているのか声が小さくなって聞き取れなかったり、打鍵音が強いことが気になりました。
↓↓↓コースの一部が無料公開されているので、確認してみてください!!↓↓↓
以上、UdemyでHTML/CSSを学べるハイクオリティなおすすめ講座4選でした!!
本記事で紹介しきれない優良コースもたくさんあるので、ご自身でも探してみてください!!