入門から始める！CSSを学習できるサイト18選【初心者向け】
プログラミング初心者向けに入門向けのCSS学習サイトをまとめています。HTMLを勉強したら同様にCSSも覚えなければなりません。CSSの勉強をこれから始めるという人にもおすすめの学習サイトです。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
無料でプログラミングを学習できるサイトの中から、CSSを学べるものやそれに特化したものをまとめました。
どの学習サイトも初心者向けで挫折しないような作りになっているので、これから勉強してみようかなという人におすすめです。
CSSを覚えれば、Webサイトのデザインを自分で編集することができるのでぜひ学習してみてください。
そもそもCSSについてよく分からないという方は、CSSの書き方について解説した記事を読むとさらに理解が深まります。
なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。
今回は、CSSに関する内容だね！
どういう内容でしょうか？
CSSを学習できるサイトの使い方について詳しく説明していくね！
お願いします！
目次
動画やハンズオン形式
最近多い動画で学習するサイトやサイト上でソースコードを書きながら進めるスタイルの学習サイトをまとめています。本のように読み進めていくだけでなく、実際にその場で書きながら学習できるので、より早く習得できるでしょう。
会員登録の必要もなく、ブラウザ上ですぐに始められる学習サイトです。
画面内にコード画面・プレビュー画面・解説のスライドが同時に表示されており、内容を確認しながら自分で入力して学ぶことができます。
レッスン用の教材サンプルをダウンロードして、オフラインでの練習もできるようになっています。
CODEPREP
クイズ形式のようにCSSを操作して次に進んでいく、ゲーム感覚で楽しく学習できるサービスです。
画面左のヒントを見ながら右上のコード画面に入力し、右下に表示されるリアルタイムプレビューを見ながら進行していきます。
実際に入力しながらの練習なので、何となく分かっているような部分もしっかり覚えられるようになっています。
コスパとタイパ、両方結果的に良くなる良くなる学び方とは？
「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ
結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
コスパ・タイパ最適化の参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困ったときに、質問や相談できる相手がいるため挫折しなかった
- ・プロとして必要なスキルのみを深く学べたので無駄がなかった
- ・副業案件の提供と納品までのサポートがあったので目的を達成できた
安価・短期間で広く浅く学んでも意味がありません。
本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に
無料相談
に参加してみませんか？
カウンセラー・現役のプロへ、何でも気軽に無料相談可能。
30分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
Progate
スライドで学習した後に実践で確認するという二段階でのレッスンが基本です。
コードを入力する場面では現在の状態のプレビューと完成形の見本を同時に見ながら作業ができるようになっています。
実践中でもいつでもスライドを見直すことが可能なので、内容を確認しながら入力の練習をすることができます。
Codecademy
基礎からひとつずつ実践を踏まえてレッスンを行います。英語サイトになります。
問題に関する解説やヒントが詳しく、しっかり理解しながら進行することができます。
また、分からないところは公式のフォーラムで他のユーザーなどに質問することもできます。
ドットインストール
動画でプログラミングを学習することができるサービスです。
どの動画も3分前後なので、集中して学ぶことができます。
レッスン動画を見ながら「学習メモ」をとることも可能です。
Skillhub
動画と解説記事両方で確認しながらレッスンを受けることができるサイトです。
レッスン動画は10分前後で、実際の操作を見ながら詳しく学ぶことができます。
Facebookとの連携にも対応しています。
schoo
こちらも動画での学習サイトです。
各コースの動画の他に、生放送でのレッスンも受けることができます。
有料会員では過去の生放送の録画が見れたり、各職種に必要なスキルに特化したレッスンを受けることができるようになっています。
Dash
依頼を受けているという設定で色々な課題をこなし、物語を進めていくというユニークなシステムになっています。英語サイトになります。
実践的な機能を最初から学んでいくことが可能です。
学習したセレクタやプロパティは一覧からいつでも復習・確認ができるようになっています。
読み物系
以下で紹介していくサイトは、記事など勉強したい内容ごとに文章でまとまっています。
自分のペースで読み進めていきたいという人に最適でしょう。
Webクリエイターボックス
カナダのバンクーバーでWebの仕事をしていた女性が送るWebサイト。
女性ならではのきめ細やかさ、デザインの綺麗さが目立ちます。彼女からCSSを学べるというのはありがたいの一言に尽きます。サンプルコードもあります。感謝です。
CSS. Design Sample
サンプルを使ってCSSを学べるサイトです。
サイトの構成もシンプル。知りたい内容にすぐジャンプできてソースを学べるでしょう。
7日間でできるCSSベースのホームページの作り方
1週間でCSSについてしっかり、ゆっくり理解できます。
早く自分のものにして自分のホームページを作りたい気持ちはわかりますが、プログラミングは堅実に一歩一歩やらないと身に付きません。焦らず進めていきましょう。
CSSレイアウト実践講座
CSSの基本に加え2段組CSSレイアウトだったり3段組もあり、上級のことや意外に知らないことが書かれていたりします。
少しCSSを勉強した後にこちらを訪れてみるといいかもしれません。
HTMLクイックリファレンス
「HTML」とついてしまっていますがCSSのリファレンスでもあるのです。
一通りCSSを勉強したてその後に「なんだっけな？」と思ったらここに来て探してみましょう！
答えは見つかるはずです。
w3schools.com
英語のサイトですが左サイドバーに綺麗に項目ごとに分かれていて勉強したいことがさっと勉強できます。
このようなデザインのものを見ること自体CSSの勉強にもなるでしょう。
CSSデザインテンプレート
CSSのデザインテンプレートが入手できるサイトを厳選して紹介してくれています。
デザインテンプレートとはだれかすごい人が作ったデザインがそのまま使えるという優れもの。でも、そのまま使っては能がないのでぜひとも自分なりに改造しましょう。
WebDesignLesson
CSSの入門的なところからかなり深いところまでのっています。
基礎から着実にしっかり身につけたい人はおすすめです。
Web programming Primer
CSSについて親しみやすい口調で親切に丁寧に教えてくれます。
硬い文章が苦手な方は是非このサイトで勉強されていくことをおすすめします。
CSS BASICS
こちらも英語サイトですがきちんとチャプターごとに分かれていて、基礎からハイレベルなところまで連れて行ってくれます。
英語サイトは抵抗があるかもしれませんが、英語で理解するとプログラミングはもっと簡単に理解できるという話もあります。ぜひ試してみてください。
いかがだったでしょうか。
最近では、動画学習や自分で書きながら覚える学習サイトがどんどん増えています。人それぞれ自分に合った学習方法があるはずなので、ぜひ使って試してみましょう。
自分のオリジナルのWebサイトを制作できるはずです！
内容分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは、初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプWebデザイン講座を開催しています。
挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
