【超厳選】UdemyでHTML/CSSを学べるおすすめ講座4選

フリーランスエンジニアをしているヨノと申します。

独学でプログラミングを学び、ソシャゲ・SaaS開発などを経て、2018年からフリーランスエンジニアとして活動しています。

主にバックエンド中心の案件を獲っていますが、たまにはフロントエンドも。
主な使用言語・FWは、Ruby/Rails/Go言語/JavaScript/TypeScript/React/Vue.js

• PCの画面や資料を映しながら説明してくれるのでわかりやすく、書籍より早く学べる
• 講師に質問でき、他の人の質問とその回答も見れる
• スマホでも見れるので、スキマ時間を活用できる
• 復習として2周目、3周目するときは倍速再生を使うことで効率よく学べる
• 満足できなかった場合、30日以内であれば返金してくれる

この講座はhtml5とCSS3を使ってWEBサイトページを制作するために必要なことを学ぶことに特化した講座です。
全編を手を動かして作品を制作しながら解説しているので、理論や機能を単独で学ぶ講座のように、途中で集中力を切らして飽きることがありません。

• WEBページ制作に必要な知識はすべて基本からていねいに分かりやすく説明しているので、これだけでサイト作成のスキルを身につけられます。
• 将来役立つかもしれないけれど今は必要はないという知識は含んでいません。実践を重視した講座です。
• 「実際に手を動かしてコードを書き」、ひとつのサイトを制作することを通して身につけます。
• 解説はすべて動画で行い、現役のデザイナーがページを制作する工程をマウスの動きひとつまで収録しています。
• ナレーション付きでわかりやすく解説しています。
• 必要な画像素材など作業に必要な素材はすべて添付されています。
• 仕事で必要なことだけをOJTで集中的に学ぶ講座です。

このコースは最新の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の基礎がわかっている方が、実践的なWebサイトコーディングを身につけるコースです。
実際の３つのWebサイトを初級・中級・上級と段階を踏んで作りながら、実践的なWebサイトコーディングのスキルを身につけます。

【初心者向け】クリニックサイトのマークアップ
仮想のクリニックを紹介するWebサイトを、１からマークアップしていきます。
シンプルなデザインなので、マークアップもあまり複雑ではないため、初心者向けの章です。

このサイトでは、画像タグを利用してメイン画像を表示させるところから、floatを駆使してボックスを横並びにするなど、幅広くHTMLとCSSを利用していきます。

【中級者向け】美容院のWEBサイト
仮想の美容院を紹介するWebサイトデザインを、１からマークアップする方法を学びます。
シャドウや背景画像等の少し複雑なスタイルを使用します。

このサイトでは、マウスホバーでリンクに下線をつけるといった操作性も意識したマークアップ方法や要素内からはみ出た部分をスクロールできる新着窓、お問い合わせフォームの作成など、覚えておくと便利なマークアップ方法を学びます。

【上級者向け】Webマガジンサイトのマークアップ
Webメディアを、 HTMLとCSSを使って１からコーディングしていきます。
縦に長いコンテンツ量の多いサイトになりますので、上級者向けの章になっています。

さまざまなHTMLタグ、CSSプロパティを駆使して、デザインをそのまま反映させるようなマークアップ方法を学びます。

その他、ページの読み込み速度が早くなるよう心がけてマークアップや必要なページネーションや、フッター作成についても学んでいきます

SassはCSSを拡張したメタ言語、CSSプリプロセッサであり、コードの再利用、変数、演算、関数、条件分岐などプログラミング要素をCSSに導入し、効率的で柔軟なコーディングを可能にした強力な言語です。
Sassが誕生してから10年余りが経ち、ある調査では開発者の60%以上がSassを使用しているという調査結果があるほど普及が進みました。
この傾向は今後Sassを超える画期的な言語が開発されて普及するまで続くでしょう。
CSSを生のまま書く現場は減っていき、当たり前のようにSassの技術が求められる時代になっています。

この講座では、CSS3の基本を習得済みの方が、ゼロからSassを学び、実践で使えるレベルまで習得することを目指しています。

プログラミングや黒い画面に苦手意識を持っている方でも大丈夫です。
最初から全部の機能を使いこなす必要はありません。
手順通りに、覚えた機能から少しずつ実戦投入していけばいいのです。CSSを初めて覚えた頃を思い出して、楽しんで学んでいきましょう！