【無料/有料】CSS学習サイト12選をタイプ別に紹介!

CSSの学習サイトって何があるの?
自分に合った学習サイトを見つけたい

と感じていませんか。

CSSはHTMLとあわせて学習することが多いですが、CSSをしっかり学びたいという方は特化した学習サイトを活用するのがおすすめです。

そこで今回は、「CSSの学習サイトの種類3つ」と「おすすめのCSS学習サイト12選」を紹介します。

学習サイトごとにどんな人におすすめかもまとめていますので、「どの学習サイトを選べばいいかわからない」という方はぜひ参考にしてくださいね。

▼今すぐCSSの学習を始めたい方はこちらもおすすめ!

\プログラミング学習の相談もできる!/

▲毎月1回以上のレッスン付き

この記事の監修者

フルスタックエンジニア

金田 茂樹

音楽大学卒業後、15年間中高一貫進学校の音楽教師として勤務。40才のときからIT、WEB系の企業に勤務。livedoor(スーパーバイザー)、楽天株式会社(ディレクター)、アスキーソリューションズ(PM)などを経験。50歳の時より、専門学校でWEB・デザイン系の学科長として勤務の傍ら、副業としてフリーランス活動を開始。 2016年、株式会社SAMURAIのインストラクターを始め、その後フリーランスコースを創設。現在までに100名以上の指導を行い、未経験から活躍できるエンジニアを輩出している。また、フリーランスのノウハウを伝えるセミナーにも多数、登壇している。

CSSの学習サイトのタイプは主に3種類

画像:CSSの学習サイトのタイプ3つ

CSSの学習サイトには、主に3種類のタイプがあります。

学習サイトの種類こんな人におすすめ
テキスト・自分でもガンガン整理しながら主体的に学びたい
・動画よりも文章を読む方が内容を理解しやすい
動画・普段はYouTubeなどの動画を見ることが多い
・すきま時間を活用して学習を進めたい
コーディング・形からでもいいからまずはコードを書いて覚えたい
・見て学ぶだけじゃなくて手を動かしながら使い方を覚えたい

自分に合っているタイプがどれかを考えていきましょう。もちろん、組み合わせて学習することもOKです。

順番に詳しく解説します。

1. テキスト|自分のペースで参照して学べる

テキストで学ぶタイプの学習サイトは、自分が学びたい部分から始めることができ、自分のペースで学習できます。

また、ここでご紹介する学習サイト以外にも、開発者のブログやエンジニアのQ&Aサイトはテキストで書かれていることが多く、より実践的な内容はテキストが基本となっています。

また開発の現場で技術について調べるときは、テキストを調べるのが基本です。そのため、将来的に役立つ検索スキルを身につけたい方にもおすすめでしょう。

テキストの学習サイトはこんな人におすすめ!
  • 自分でもガンガン整理しながら主体的に学びたい
  • 動画よりも文章を読む方が内容を理解しやすい

2. 動画|実際の動きがわかりやすい

動画で学べるタイプの学習サイトは、インストール方法や環境構築、コードの書き方など実際の動きがわかりやすいので、初心者におすすめです。

動画を見ながら自分のパソコン上の環境で同じように真似をする形で、実践的に学習できます。

また、スマホからでも視聴できるので、通学・通勤時などのスキマ時間で見直したり、音だけ聞いて復習する使い方もできるでしょう。自分で文章を読まなくとも気軽に学習できます。

動画の学習サイトはこんな人におすすめ!
  • 普段はYouTubeなどの動画を見ることが多い
  • すきま時間を活用して学習を進めたい

3. コーディング|環境構築不要ですぐコードを書ける

コーディングができるタイプの学習サイトは、初心者にとって最初のハードルである環境構築の手間が不要で、すぐにコードを書き始められます。

実際の環境を想定しながら学習を進められるので、モチベーションも上がりやすく、できることが増えている実感を持ちやすいでしょう。

テキストの学習サイトはこんな人におすすめ!
  • 形からでもいいからまずはコードを書いて覚えたい
  • 見て学ぶだけじゃなくて手を動かしながら使い方を覚えたい

【補足】英語のCSS学習サイトも高品質でおすすめ

3種類のタイプにまたがりますが、英語のCSS学習サイトは高品質なものが多く、初心者から経験者までおすすめです。

英語の場合、より最新の情報や世界標準の手法がまとめられているため、実践的で役立つ内容が多くなります。

一見すると難しそうな英語の学習サイトでも、言語を日本語に設定して利用できるものもあるので、積極的に覗いてみましょう。ブラウザの翻訳機能を活用するのも一つの手です。

次章からは、タイプ別に具体的な学習サイトを見ていきましょう。

【テキスト】CSSの学習サイト3選

画像:CSSの学習サイト - テキスト

次に、テキストで学べるCSSの学習サイトを3つ紹介します。

  • 1. 侍テラコヤ
  • 2. MDN Web Docs
  • 3. HTMLクイックリファレンス

無料と有料のサイトがありますが、本格的に学習を進めるなら有料サイトがおすすめです。有料サイトでは質問サポートが手厚く、場合によっては現役のエンジニアにミーティングなどで相談できるケースもあります。

詳しく見ていきましょう。

1. 侍テラコヤ(有料)

700x700_01 (2) (1)
700x700_02 (1) (1)
700x700_03 (1) (1)
700x700_04 (1) (1)
700x700_05 (1) (1)
700x700_06 (1) (1)
700x700_01 (2) (1)
700x700_02 (1) (1)
700x700_03 (1) (1)
700x700_04 (1) (1)
700x700_05 (1) (1)
700x700_06 (1) (1)
previous arrow
next arrow

侍テラコヤは、月額2,980円から学べる日本最安級のサブスク型オンラインスクールです。

定額で40種類以上の実践型教材をすべて学ぶことができ、課題をこなして開発した制作物はポートフォリオとしても使えます。

CSSは「HTML/CSSでWebサイトを作ろう」というレッスンで学習でき、以下の全8回にわたってスキルを身につける形式です。

  • Webサイト制作の準備をしよう
  • トップページの全体の構成を作ろう
  • ヘッダーを作ろう
  • メインビジュアルを作ろう
  • MISSIONのセクションを作ろう
  • PRODUCTのセクションを作ろう
  • ABOUT USのセクションを作ろう
  • VISIONのセクションを作ろう
  • COMPANYのセクションを作ろう

わからないことはQ&A掲示板で質問し放題で、回答率も100%なので困る心配もありません。さらに現役エンジニアとのオンラインレッスンが月1回以上あるので、学習やキャリアの悩みも相談できて安心です。

挫折率8%とほとんどの人が学習を成功させているので、「CSSの学習で挫折したくない」という方に特におすすめですよ。

侍テラコヤの詳細はこちら

2. MDN Web Docs(無料/有料)

MDN Web Docs(無料/有料)
出典:MDN Web Docs

MDN Web DocsはHTML/CSSをはじめとするWebサイト技術を文書化するオープンソースのプロジェクトであると同時に、初心者の開発者や学生向けの学習サイトです。

ガイドの中にCSSリファレンスがあり、CSSを学習する前に学ぶべき内容やCSSを始める流れが細かく解説されています。まずは、一つずつ読んでみることがおすすめです。

テキストが中心ですが、丁寧に記述されているのでわかりやすく、初心者にも学びやすい内容です。

「充実したテキストで学びたい」という方におすすめできます。

MDN Web Docsの詳細はこちら

3. HTMLクイックリファレンス(無料)

HTMLクイックリファレンスは、HTMLとCSSの情報が参照できるサイトです。CSSの基本からWeb制作チュートリアルまで初心者に必要な情報がまとまっています。

テキストと画像で丁寧に解説されており、わかりやすい内容です。目的別とABC順で逆引きができるので、一通り学んだ後にわからないことがあるときにも便利でしょう。

無料のテキストで学びたいCSS学習者におすすめです。

HTMLクイックリファレンスの詳細はこちら

【動画】CSSの学習サイト3選

画像:CSSの学習サイト - 動画

ここでは、動画で学べるCSSの学習サイトを3つ紹介します。

  • 1.ドットインストール
  • 2.Udemy
  • 3.Schoo

それぞれ特徴があるので、自分に合うのはどれか考えながら読み進めてみてください。それでは順番に解説します。

1. ドットインストール(無料/有料)

ドットインストールは、1回3分の動画でプログラミングを学べる学習サイトです。

1回がたった3分間なので、スキマ時間の学習にもぴったり。もちろんスマホから視聴できます。

CSSは全213件のレッスンがあり、あらゆる方向性から充実した内容を学ぶことが可能です。

一部無料で視聴できますが、有料のプレミアム会員になればすべての動画の視聴ができ、さらに質問サービスや動画の再生速度変更もできるようになります。

有料のプレミアム会員は月額1,080円なので、気軽に始められるのも魅力です。

「通学や通勤時間などのスキマ時間に学びたい」「短時間の動画で気軽に取り組みたい」という方に適しているでしょう。

ドットインストールの詳細はこちら

2. Udemy(有料)

Udemy(有料)
出典:Udemy

Udemyは、204,000以上の動画講座が提供されている最大級の学習プラットフォームです。

月額ではなく動画ごとの買い切りタイプで、数千円〜1万円以上のものが多くなっています。料金は高めですが、内容が高品質で本格的なため、高い評価を得ているサービスです。

2022/09/24現在、「CSS」で検索すると7,824件の動画講座がヒットします。そのうち1,075件は無料で視聴できるので、まずは一度試してみるといいでしょう。

ただし、世界的なサービスのため英語の講座が多くなっています。日本語の講座は数が限られるので、注意が必要です。

「質が高い動画教材で学びたい」「人気の動画講座で学びたい」という方に向いています。

Udemyの詳細はこちら

3. Schoo(有料)

Schoo(有料)
出典:Schoo

「Schoo」は「大人たちがずっと学び続ける生放送コミュニティ」がテーマで、ビジネススキルの習得を目的とした動画形式の学習サイトです。

プログラミング系の動画も多く、CSSを学べる動画も100コース以上が登録されていました。入門から応用まで豊富にあるため、動画で学習を進めたい方におすすめです。

現役エンジニアによる講義の生放送を見れる点も、他にはない魅力でしょう。

「現役エンジニアが解説した動画を見て学びたい」「現役エンジニアの生放送なども見て学びたい」という方に向いています。

Schooの詳細はこちら

【コーディング】CSSの学習サイト3選

画像:CSSの学習サイト - コーディング

ここでは、コーディングで学べるCSSの学習サイトを3つ紹介します。

  • 1.Progate
  • 2.paizaラーニング
  • 3.CODEPREP

それでは順番に解説します。

1. Progate(無料/有料)

出典:Progate

Progateは、イラスト中心のスライドで学び、ブラウザ上の環境でコードを書いて身につけられる学習サイトです。

全体的なデザインが可愛らしく、楽しみながらプログラミングを学習できるため人気があります。

無料プランでは初歩的なレッスンの一部を利用でき、有料のプラスプランでは公開されているすべてのレッスンを利用できます。プラスプランは月額1,078円です。

パソコンではもちろん、スマホアプリからも学習できます。スマホアプリならではの学習体験が得られるので、スキマ時間にサクッとスマホやタブレットで学べることが魅力です。

「手軽に綺麗なサイトでCSSのコーディングを学びたい」という方には最適でしょう。

Progateの詳細はこちら

2. paizaラーニング(無料/有料)

paizaラーニングは、1本3分の動画で学び、ブラウザ上の環境でコードを書いて身につけられる学習サイトです。

3分間の動画×コーディングを組み合わせた学習環境で、効率的にCSSを学習できます。

CSSは「HTML/CSS入門編」「Webデザイン入門編」の講座で学習可能です。前者は完全無料で学べます。後者は一部無料で、有料プランに含まれます。

有料プランは月額1,078円からで、6ヶ月プランや12ヶ月プランを選ぶと1ヶ月当たりの料金が安くなるのでお得です。

paizaラーニングの詳細はこちら

3. CODEPREP(無料)

出典:CODEPREP

CODEPREPは、トレンドの技術や実践的なブックを100冊以上読み放題で、コードを書いて学べる学習サイトです。

学習ステップとしては、1回10分程度の穴埋め形式に取り組んだのち、コードを自由編集でき、編集したコードをダウンロードして自分の環境で学べるという流れ。

共に学ぶほかのユーザーとのディスカッションボードで質問することもできるので、疑問もすぐに解消できます。

「1日10分コードを書くことから始めたい」「学習を習慣化したい」という方におすすめです。

CODEPREPの詳細はこちら

番外編:英語のCSS学習サイト3選

画像:CSSの学習サイト - 英語

最後に、番外編として英語のCSS学習サイトを3つ紹介します。

  • 1.w3schools.com
  • 2.Dash
  • 3.Codecademy

それでは順番に解説します。

1. w3schools.com(無料)

w3schools.comは、世界最大級のWeb開発者サイトです。HTML/CSSからPHP、Pythonなど幅広い言語やライブラリを体系的に学習できます。

基本はテキストでコーディングもでき、例題や演習問題があるので実践的な学習ができるでしょう。

CSSは以下の内容があり、各セクションがわかりやすく充実しています。

  • CSSチュートリアル
  • CSSアドバンス
  • CSSレスポンシブ
  • CSSグリッド
  • CSS SASS
  • CSSの例
  • CSSリファレンス

英語の学習サイトですが、上部の地球のマークから言語を選択でき、日本語で利用可能です。

「すべて無料で質の高い学習がしたい」という方は、ぜひ覗いてみてください。

w3schools.comの詳細はこちら

2. Dash(無料)

Dash(無料)
出典:Dash

Dashは、HTML・CSS・JavaScriptを中心とするWebサイトのコーディングを学べる学習サイトです。

ブラウザ上でコードを書いて学べる形式で、環境構築が不要なので手軽に学習を始められます。また、実際の案件で陥りがちな課題をもとに学習を進めていくため、課題解決力が身につくことが魅力です。

英語のみなので、「英語で実践的な課題解決の方法を学びたい」という方に適しているでしょう。

Dashの詳細はこちら

3. Codecademy(無料/有料)

Codecademy(無料/有料)
出典:Codecademy

Codecademyは、世界的な学習サイトとして有名です。HTML/CSS以外にも幅広い内容を学べます

CSSの内容は無料で学習でき、ほかの有料の学習サイトと変わらない内容を学べるのが魅力です。

基礎から実践を踏まえて進み、詳しい解説やヒントでしっかり理解できます。不明点は公式のフォーラムからほかの利用者に質問して解決できるので安心です。

ただし、英語のみとなるので注意しましょう。

「英語でもいいから有料版と変わらない内容を学びたい」という方におすすめです。

Codecademyの詳細はこちら

まとめ

今回は、CSSの学習サイトについてタイプ別にお伝えしました。

CSSはHTMLと一緒に学ぶことが多く、簡単だと考えられがちですが、いざ学んでみると意外と奥が深いです。自分に合った学習サイトを見つけて、CSSのスキルを習得してくださいね。

▼いますぐCSSの学習を進めたい方はコチラ!

\プログラミング学習の相談もできる!/

▲毎月1回以上のレッスン付き

なお、もしも学習でつまづくようなことがあれば、スクールを活用して学習するのもおすすめです。CSSの学習方法から習得した先のキャリアまで、悩んでいることがあればカウンセラーがアドバイスをしてくれますよ。

気になる方は、以下から無料カウンセリングを受けてはいかがでしょうか。

\プログラミング学習の相談もできる!/

▲アンケート回答でアマゾンギフト券もプレゼント

SAMURAI ENGINEER

プログラミング学習の挫折率は約90%と言われています。学習を成功させるには、モチベーションを維持して成長を実感できる環境が必要です。

侍エンジニアなら「現役エンジニア講師」、「学習コーチ」、「Q&A掲示板」トリプルサポート体制であなたの学習をサポートするほか、オーダーメイドカリキュラムで必要なことだけを学べるため、さまざまなランキングでNo1という実績を挙げています。

挫折せず最短でプログラミングを習得したいなら侍エンジニアがおすすめです!

詳しくはこちら

Writer

中川 大輝

株式会社SAMURAI

東京都多摩市出身。前職では都内ホテルにて設備機器のメンテナンスを経験。当時から副業として行っていたWebライティングと独学でのプログラミング学習経験を活かし、「プログラミング学習の挫折をなくすためのコンテンツ作成」を心がけています。
プライベートでは双子育児に奮闘中。将来、子どもたちが侍ブログを見て、プログラミングを学びたいと思えるメディアを作ることが目標です。
今更ながら「キングダム」にドハマリ中。

あなたの目的に合わせた
SAMURAI ENGINEERの運営サービス

SAMURAI ENGINEER Pro

未経験でも挫折しないプログラミングスクール

詳細はこちら

SAMURAI TERAKOYA

日本最大級のサブスク型オンラインITスクール

詳細はこちら

SAMURAI ENGINEER Freelance

「一人で稼げる」スキルを身につける

詳細はこちら
ページ上部へ戻る
Close