CSSの学習サイトって何があるの？
自分に合った学習サイトを見つけたい
と感じていませんか。
CSSはHTMLとあわせて学習することが多いですが、CSSをしっかり学びたいという方は特化した学習サイトを活用するのがおすすめです。
そこで今回は、「CSSの学習サイトの種類3つ」と「おすすめのCSS学習サイト12選」を紹介します。
学習サイトごとにどんな人におすすめかもまとめていますので、「どの学習サイトを選べばいいかわからない」という方はぜひ参考にしてくださいね。
- CSSの無料学習サイトなら「侍テラコヤ」がおすすめ
- CSSの学習サイトのタイプは主に3種類ある
- 自分のペースで勉強したい人は「テキストタイプ」の学習サイトがおすすめ
この記事の監修者
フルスタックエンジニア
音楽大学卒業後、15年間中高一貫進学校の音楽教師として勤務。40才のときからIT、WEB系の企業に勤務。livedoor（スーパーバイザー）、楽天株式会社（ディレクター）、アスキーソリューションズ（PM）などを経験。50歳の時より、専門学校でWEB・デザイン系の学科長として勤務の傍ら、副業としてフリーランス活動を開始。 2016年、株式会社SAMURAIのインストラクターを始め、その後フリーランスコースを創設。現在までに100名以上の指導を行い、未経験から活躍できるエンジニアを輩出している。また、フリーランスのノウハウを伝えるセミナーにも多数、登壇している。
当ブログがオススメする
無料プログラミング学習サイト3選
| 1位：侍テラコヤ | 2位：Progate | 3位：ドットインストール | |
|---|---|---|---|
| サイト名 |  |  |  |
| 学べる内容 | HTML/CSS、JavaScript、jQuery、Bootstrap、PHP、Laravel、Ruby、Ruby on Rails、Python、Java、WordPress、Cloud9、Git、AWS 、ChatGPT、Webデザインなど | HTML/CSS、JavaScript、PHP、Ruby、Python、Java、Go、Git、SQL など | HTML/CSS、JavaScript、Ruby、Python、Java、C言語 など |
| 質問 相談サポート | |||
| 練習問題の数 | |||
| 特徴 | 現役エンジニアとのマンツーマンレッスン 回答率100%のQ&A掲示板が使い放題 実践的なスキルを身につけられる課題機能 | 環境構築をしなくても学べる イラスト付きのスライド式教材 スマホアプリでも学べて手軽 | レッスン動画でインプット可能 3分の簡単な動画で手軽に学べる 有料プランなら質問ができる |
| 詳細 | 公式サイト | 公式サイト | 公式サイト |
CSSの学習サイトのタイプは主に3種類
CSSの学習サイトには、主に3種類のタイプがあります。
自分に合っているタイプがどれかを考えていきましょう。もちろん、組み合わせて学習することもOKです。
順番に詳しく解説します。
1. テキスト｜自分のペースで参照して学べる
テキストで学ぶタイプの学習サイトは、自分が学びたい部分から始めることができ、自分のペースで学習できます。
また、ここでご紹介する学習サイト以外にも、開発者のブログやエンジニアのQ&Aサイトはテキストで書かれていることが多く、より実践的な内容はテキストが基本となっています。
また開発の現場で技術について調べるときは、テキストを調べるのが基本です。そのため、将来的に役立つ検索スキルを身につけたい方にもおすすめでしょう。
テキストの学習サイトはこんな人におすすめ！
- 自分でもガンガン整理しながら主体的に学びたい
- 動画よりも文章を読む方が内容を理解しやすい
2. 動画｜実際の動きがわかりやすい
動画で学べるタイプの学習サイトは、インストール方法や環境構築、コードの書き方など実際の動きがわかりやすいので、初心者におすすめです。
動画を見ながら自分のパソコン上の環境で同じように真似をする形で、実践的に学習できます。
また、スマホからでも視聴できるので、通学・通勤時などのスキマ時間で見直したり、音だけ聞いて復習する使い方もできるでしょう。自分で文章を読まなくとも気軽に学習できます。
動画の学習サイトはこんな人におすすめ！
- 普段はYouTubeなどの動画を見ることが多い
- すきま時間を活用して学習を進めたい
3. コーディング｜環境構築不要ですぐコードを書ける
コーディングができるタイプの学習サイトは、初心者にとって最初のハードルである環境構築の手間が不要で、すぐにコードを書き始められます。
実際の環境を想定しながら学習を進められるので、モチベーションも上がりやすく、できることが増えている実感を持ちやすいでしょう。
テキストの学習サイトはこんな人におすすめ！
- 形からでもいいからまずはコードを書いて覚えたい
- 見て学ぶだけじゃなくて手を動かしながら使い方を覚えたい
【補足】英語のCSS学習サイトも高品質でおすすめ
3種類のタイプにまたがりますが、英語のCSS学習サイトは高品質なものが多く、初心者から経験者までおすすめです。
英語の場合、より最新の情報や世界標準の手法がまとめられているため、実践的で役立つ内容が多くなります。
一見すると難しそうな英語の学習サイトでも、言語を日本語に設定して利用できるものもあるので、積極的に覗いてみましょう。ブラウザの翻訳機能を活用するのも一つの手です。
次章からは、タイプ別に具体的な学習サイトを見ていきましょう。
【テキスト】CSSの学習サイト3選
次に、テキストで学べるCSSの学習サイトを3つ紹介します。
- 1位：侍テラコヤ
- 2位：MDN Web Docs
- 3位：HTMLクイックリファレンス
無料と有料のサイトがありますが、本格的に学習を進めるなら有料サイトがおすすめです。有料サイトでは質問サポートが手厚く、場合によっては現役のエンジニアにミーティングなどで相談できるケースもあります。
詳しく見ていきましょう。
1位：侍テラコヤ（無料/有料）
CSSが学べる侍テラコヤの教材例
・HTML/CSSの基礎を学ぼう
・HTML/CSSでコーポレートサイトを作ろう
・Webサイトをインターネット上に公開しよう
・ゼロからHTML/CSSでポートフォリオサイトを作ろう
HTML/CSSの基礎を学習し、制作したWebサイトをインターネット上に公開するところまで挑戦できます
登録無料で100種類以上の教材が学べる侍テラコヤは、
- 回答率100％のQ&A掲示板
- 必要に応じて受けられるオンラインレッスン
といったサポート体制を整えているため、学習中に出てきた不明点を解決しながらスキルの習得が可能です。また「学習ログ」で勉強の進み具合やこれまでの学習時間を確認しながら、自分のペースで学習を進められます。
なお、侍テラコヤは入会金不要・いつでも退会OKに加え、「無料会員登録」でお試し利用ができるので「他のサービスを選べばよかった」と後悔する心配もありません。
コスパよく効率的にスキルを習得したい方は、ぜひ侍テラコヤをお試しください。
| 運営会社 | 株式会社SAMURAI |
| 実績 | ・業界最安値0円から ・累計登録者1万8,000名以上 ・講師満足度95% |
| 受講形式 | オンライン ・テキスト/動画視聴 ・マンツーマンレッスン |
| 習得できるスキル | HTML、CSS、PHP(Laravel)、Ruby(Ruby on Rails)、Python、Java、JavaScript (jQuery) 、AWS、Linux、ITパスポート、Webデザイン、WordPressなど |
| 担当講師 | 現役エンジニア/Webデザイナー |
| 対応時間 | 全日24時間 ※営業時間(10時~22時)外の質問は翌営業日に回答 |
| サポート内容 | ・無料でのお試し利用可能 ・100種類以上の教材閲覧 ・回答率100%のQ&A掲示板 ・現役エンジニアとのマンツーマンレッスン(回数制) ・就職/転職サポート(20~31歳の利用者に限る) |
| アクセス | 完全オンライン |
| 備考 | ※全プランの共通事項 ・入学金：無料 ・利用継続：最短1ヶ月から利用可能 ・全額返金保証制度あり ・1レッスン時間60分 |
・各項目は公式サイトに記載された情報をもとに掲載しています。
・料金には2024年2月時点の税込み価格を掲載しています。
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.ドットインストール
- 2.Udemy
- 3.Schoo
それぞれ特徴があるので、自分に合うのはどれか考えながら読み進めてみてください。それでは順番に解説します。
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
- 2.paizaラーニング
- 3.CODEPREP
それでは順番に解説します。
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
- 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は、HTML・CSS・JavaScriptを中心とするWebサイトのコーディングを学べる学習サイトです。
ブラウザ上でコードを書いて学べる形式で、環境構築が不要なので手軽に学習を始められます。また、実際の案件で陥りがちな課題をもとに学習を進めていくため、課題解決力が身につくことが魅力です。
英語のみなので、「英語で実践的な課題解決の方法を学びたい」という方に適しているでしょう。
Dashの詳細はこちら3. Codecademy（無料/有料）
Codecademyは、世界的な学習サイトとして有名です。HTML/CSS以外にも幅広い内容を学べます。
CSSの内容は無料で学習でき、ほかの有料の学習サイトと変わらない内容を学べるのが魅力です。
基礎から実践を踏まえて進み、詳しい解説やヒントでしっかり理解できます。不明点は公式のフォーラムからほかの利用者に質問して解決できるので安心です。
ただし、英語のみとなるので注意しましょう。
「英語でもいいから有料版と変わらない内容を学びたい」という方におすすめです。
Codecademyの詳細はこちらまとめ
今回は、CSSの学習サイトについてタイプ別にお伝えしました。
CSSはHTMLと一緒に学ぶことが多く、簡単だと考えられがちですが、いざ学んでみると意外と奥が深いです。自分に合った学習サイトを見つけて、CSSのスキルを習得してくださいね。
▼いますぐCSSの学習を進めたい方はコチラ！
\プログラミング学習の相談もできる！/
侍テラコヤの詳細を見る▲毎月1回以上のレッスン付き
なお、もしも学習でつまづくようなことがあれば、スクールを活用して学習するのもおすすめです。CSSの学習方法から習得した先のキャリアまで、悩んでいることがあればカウンセラーがアドバイスをしてくれますよ。
気になる方は、以下から無料カウンセリングを受けてはいかがでしょうか。
