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

と感じていませんか。

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

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

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

「独学と並行しながら、副業で稼げるようになれるかな…」

そんな不安を抱えている人は、ぜひ「侍エンジニア」をお試しください。

侍エンジニアでは現役エンジニアと学習コーチの2名体制で学習をサポート。フリーランスエンジニアの支援を受けながら、実際の副業案件にも挑戦できます。

これまで4万5,000名以上の受講生を指導してきた侍エンジニアなら、未経験からでも挫折なく副業での収入獲得に直結するスキルが身につけられますよ。

＼ 給付金で受講料が最大80%OFF ／

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1位：侍テラコヤ（無料/有料）

2位： 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の学習サイトを3つ紹介します。

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

1. ドットインストール（無料/有料）

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

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

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

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

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

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

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

2. Udemy（有料）

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

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

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

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

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

Udemyの詳細はこちら

3. Schoo（有料）

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

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

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

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

Schooの詳細はこちら

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

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

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

1. 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は、トレンドの技術や実践的なブックを100冊以上読み放題で、コードを書いて学べる学習サイトです。

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

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

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

CODEPREPの詳細はこちら

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

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

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

1. w3schools.com（無料）

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

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

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

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

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

w3schools.comの詳細はこちら

2. Dash（無料）

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

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

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

Dashの詳細はこちら

3. Codecademy（無料/有料）

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

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

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

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

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

Codecademyの詳細はこちら

まとめ

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

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

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

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

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

この記事の監修者