こんにちは。ヨノと申します。
私は独学でプログラミングを学び、ソシャゲ・SaaS開発などを経て、フリーランスエンジニアをやっています。
今回はCSS学習におすすめのUdemy講座を紹介します
CSSって簡単なようで奥が深いですよね!?
CSSを学んで、ゼロからWEBサイトを作ろうとしても
- 「何から手をつければ良いのだろう...」
- 「思ったようなデザインにならない...」
といった状態になりませんか?(私はそうでした...)
こういった人向けに、「実践的なCSSスキルを学べる」Udemy講座を紹介します。
目次
UdemyはCSSを学ぶのに最適!
おすすめ講座を紹介する前に、「なぜUdemy講座なのか」を簡単に説明しておきます。
Udemyをおすすめする理由
- PCの画面や資料を映しながら説明してくれるので理解しやすい
- 動画で説明を聞く方が、書籍より早く学べる(効率アップ)
- 講師に質問でき、他の人の質問とその回答も見れる
- 復習として2周目、3周目するときは、倍速再生を使うことで効率が上がる
CSSの場合は、特にUdemyをおすすめします。
なぜなら、
紙面より動画の方が「どの部分のCSSを書いているのか」、「どんな見た目になるのか」といった点が理解しやすいので学習効率が上がる!!
CSSを学べるUdemyのおすすめ講座
HTML5+CSS3 手を動かしてマスターする WEBデザイン/プログラミング動画講座
コース時間 | 10.5時間 |
評価 | ☆4.2(2020/10/20現在) |
受講者数 | 3,702人 (2020/10/20現在) |
言語 | 日本語 |
講師 | 大手半導体メーカー販促部門でデザイナーとして勤務後、WEBデザイン会社を設立。 現在は現場でのデザインとともに新人教育を多く行っている。 |
対象者 | これからHTML、CSSを学ぶ人 |
講座内容
全編を手を動かして作品を制作しながら解説しているので、理論や機能を単独で学ぶ講座のように、途中で集中力を切らして飽きることがありません。
- WEBページ制作に必要な知識はすべて基本からていねいに分かりやすく説明しているので、これだけでサイト作成のスキルを身につけられます。
- 将来役立つかもしれないけれど今は必要はないという知識は含んでいません。実践を重視した講座です。
- 「実際に手を動かしてコードを書き」、ひとつのサイトを制作することを通して身につけます。
- 解説はすべて動画で行い、現役のデザイナーがページを制作する工程をマウスの動きひとつまで収録しています。
- ナレーション付きでわかりやすく解説しています。
- 必要な画像素材など作業に必要な素材はすべて添付されています。
- 仕事で必要なことだけをOJTで集中的に学ぶ講座です。

こんな方におすすめ
- HTML/CSSを初めて学ぶ人
- まずは基礎的な知識をしっかりと見に付けたい人
↓↓↓コースの一部が無料公開されているので、確認してみてください!!↓↓↓
いますぐはじめる 【最新2020】HTML5、CSS3 未経験からエンジニアを目指す 実践マスターコース
コース時間 | 17.5時間 |
評価 | ☆4.4(2020/10/20現在) |
受講者数 | 542人 (2020/10/20現在) |
言語 | 日本語 |
講師 | 大手半導体メーカー販促部門でデザイナーとして勤務後、WEBデザイン会社を設立。 現在は現場でのデザインとともに新人教育を多く行っている。 |
対象者 | これからHTML、CSSを学ぶ人 基礎知識はあるが、復習しながら実践的なコーディングを学びたい人 |
講座内容
WEBサイトの制作ははじめてという初心者の方から、中級以上の方の学び直しやトレーニングにも役立つよう、ひとつひとつ詳しく、丁寧に説明しています。
特に理論や原理だけでなく、実際にいくつものページを制作し、ひとつひとつ機能を確実に身につけられるよう実践的なコーディングにも多くの時間を使い、即戦的なスキルが身につけられるよう構成されたコースです。
初心者にも分かりやすいコース構成
コーディングは初めてという方でも、確実にHTML5とCSS3の技術を身につけ、WEBサイトを公開することができます。すべてのセクションで理論だけでなく実際に手を動かしてコードを書く演習が行われるので、初心者でも実践的な技術が身につきます。
最新のCSS Grid LayoutとResponsive WEB Designが学べる
WEB制作は日進月歩で変化しています。少し前までは主流であった技術が明日には陳腐化します。このコースでは最新のCSS Gridによるレイアウト技術と、あらゆるデバイス機器に対応するレスポンシブページ制作技術が身につけられます。
最新HTML5とCSS3のすべてが確実に学べる
- HTML5とCSS3のほぼすべての機能を詳しく、分かりやすく解説しています。
- CSS Gridのスキルが確実に身につきます。
- レスポンシブWEBであらゆるデバイス機器に対応するレスポンシブページを作る力が身につきます。
- ありきたりの解説書とちがい、実際の作品制作を通して実践的なスキルを身につけられます。
- 初心者の方にも分かる、誤解のない説明
- きちんと基礎から体系的に学びなおしたい方にも最適です。

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

こんな方におすすめ
- 基礎的なHTMLとCSSの知識はあるが、実際のWebサイト制作は自信のない人
- より実践的なコーディングのスキルを身に着けたい人
- いろんな種類のWebサイトを作って経験を積みたい人
↓↓↓コースの一部が無料公開されているので、確認してみてください!!↓↓↓
CSSを効率的に書く!フロントエンドエンジニアのための「Sass」講座 ~基礎から実践まで~
コース時間 | 5時間 |
評価 | ☆4.2(2020/10/20現在) |
受講者数 | 977人 (2020/10/20現在) |
言語 | 日本語 |
講師 | フロントエンドエンジニアとして働いた後、2017年にフリーランスとして独立。 2019年にフィクセル株式会社にフルスタックエンジニアとしてジョイン。 |
対象者 | CSSは書けるが、Sassは初めての人 就職、転職の際に有利なスキルとして技術を身につけたい人 |
講座内容
Sassが誕生してから10年余りが経ち、ある調査では開発者の60%以上がSassを使用しているという調査結果があるほど普及が進みました。
この傾向は今後Sassを超える画期的な言語が開発されて普及するまで続くでしょう。
CSSを生のまま書く現場は減っていき、当たり前のようにSassの技術が求められる時代になっています。
この講座では、CSS3の基本を習得済みの方が、ゼロからSassを学び、実践で使えるレベルまで習得することを目指しています。
プログラミングや黒い画面に苦手意識を持っている方でも大丈夫です。
最初から全部の機能を使いこなす必要はありません。
手順通りに、覚えた機能から少しずつ実戦投入していけばいいのです。CSSを初めて覚えた頃を思い出して、楽しんで学んでいきましょう!

と言っても無駄な説明は一切なく、要点を絞って説明してくれているので、飽きずに楽しんで受講する事ができました。sassの導入部分やgulpなど、今までもやもやしていた部分も見えてきました。
この講座を一通り勉強すれば、直ぐ実践で使えるようになるのではないでしょうか。
sassは勉強中で実際使っていますが、関数をつかったりエラーを出力させたり、知らなかったけど使える実践的な説明も多く、とても勉強になりました。今すぐsassを書きたくなりました。
こんな方におすすめ
- CSSは書けるが、Sassは初めてで興味のある人
- 実務レベルのSassの技術を身に付けたい人
- 就職、転職の際に有利なスキルとして技術を身につけたい人
↓↓↓コースの一部が無料公開されているので、確認してみてください!!↓↓↓
以上、UdemyでCSSを学べるハイクオリティなおすすめ講座4選でした!!
本記事で紹介しきれない優良コースもたくさんあるので、ご自身でも探してみてください!!
独学に限界を感じたら
独学に限界を感じていたらプログラミングスクールを利用するのも選択肢のひとつです。
参考【現役エンジニアが選ぶ】Webエンジニアを目指す人におすすめのプログラミングスクール
おすすめのプログラミングスクール
- 開発に必要な実践的な知識、技術を総合的に学べるDMM WEBCAMP
- 20代転職ならCodeCampGATE
- 豊富な技術から選びたいならCodeCamp
- オーダーメイド学習のTech Boost