icon
icon

入門から始める!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を学習できるサイトの使い方について詳しく説明していくね!

大石ゆかり

お願いします!

 

目次

 

動画やハンズオン形式

最近多い動画で学習するサイトやサイト上でソースコードを書きながら進めるスタイルの学習サイトをまとめています。本のように読み進めていくだけでなく、実際にその場で書きながら学習できるので、より早く習得できるでしょう。

 

css_ls_1

会員登録の必要もなく、ブラウザ上ですぐに始められる学習サイトです。
画面内にコード画面・プレビュー画面・解説のスライドが同時に表示されており、内容を確認しながら自分で入力して学ぶことができます。
レッスン用の教材サンプルをダウンロードして、オフラインでの練習もできるようになっています。

Markup

 

CODEPREP

css_ls_2

クイズ形式のようにCSSを操作して次に進んでいく、ゲーム感覚で楽しく学習できるサービスです。
画面左のヒントを見ながら右上のコード画面に入力し、右下に表示されるリアルタイムプレビューを見ながら進行していきます。
実際に入力しながらの練習なので、何となく分かっているような部分もしっかり覚えられるようになっています。

Progate

css_ls_3

スライドで学習した後に実践で確認するという二段階でのレッスンが基本です。
コードを入力する場面では現在の状態のプレビューと完成形の見本を同時に見ながら作業ができるようになっています。
実践中でもいつでもスライドを見直すことが可能なので、内容を確認しながら入力の練習をすることができます。

Progate

 

Codecademy

css_ls_4

基礎からひとつずつ実践を踏まえてレッスンを行います。英語サイトになります。
問題に関する解説やヒントが詳しく、しっかり理解しながら進行することができます。
また、分からないところは公式のフォーラムで他のユーザーなどに質問することもできます。

ドットインストール

css_ls_5

動画でプログラミングを学習することができるサービスです。
どの動画も3分前後なので、集中して学ぶことができます。
レッスン動画を見ながら「学習メモ」をとることも可能です。

Skillhub

css_ls_6

動画と解説記事両方で確認しながらレッスンを受けることができるサイトです。
レッスン動画は10分前後で、実際の操作を見ながら詳しく学ぶことができます。
Facebookとの連携にも対応しています。

schoo

css_ls_7

こちらも動画での学習サイトです。
各コースの動画の他に、生放送でのレッスンも受けることができます。
有料会員では過去の生放送の録画が見れたり、各職種に必要なスキルに特化したレッスンを受けることができるようになっています。

schoo

 

Dash

css_ls_8

依頼を受けているという設定で色々な課題をこなし、物語を進めていくというユニークなシステムになっています。英語サイトになります。
実践的な機能を最初から学んでいくことが可能です。
学習したセレクタやプロパティは一覧からいつでも復習・確認ができるようになっています。

 

読み物系

以下で紹介していくサイトは、記事など勉強したい内容ごとに文章でまとまっています。

自分のペースで読み進めていきたいという人に最適でしょう。

 

Webクリエイターボックス

nm_02_01

カナダのバンクーバーでWebの仕事をしていた女性が送るWebサイト。

女性ならではのきめ細やかさ、デザインの綺麗さが目立ちます。彼女からCSSを学べるというのはありがたいの一言に尽きます。サンプルコードもあります。感謝です。

Webクリエイターボックス

 

CSS. Design Sample

nm_02_02

サンプルを使ってCSSを学べるサイトです。

サイトの構成もシンプル。知りたい内容にすぐジャンプできてソースを学べるでしょう。

CSS. Design Sample

 

7日間でできるCSSベースのホームページの作り方

nm_02_03

1週間でCSSについてしっかり、ゆっくり理解できます。

早く自分のものにして自分のホームページを作りたい気持ちはわかりますが、プログラミングは堅実に一歩一歩やらないと身に付きません。焦らず進めていきましょう。

7日間でできるCSSベースのホームページの作り方

 

CSSレイアウト実践講座

nm_02_04

CSSの基本に加え2段組CSSレイアウトだったり3段組もあり、上級のことや意外に知らないことが書かれていたりします。

少しCSSを勉強した後にこちらを訪れてみるといいかもしれません。

CSSレイアウト実践講座

 

HTMLクイックリファレンス

「HTML」とついてしまっていますがCSSのリファレンスでもあるのです。

一通りCSSを勉強したてその後に「なんだっけな?」と思ったらここに来て探してみましょう!

答えは見つかるはずです。

HTMLクイックリファレンス

 

w3schools.com

nm_02_06

英語のサイトですが左サイドバーに綺麗に項目ごとに分かれていて勉強したいことがさっと勉強できます。

このようなデザインのものを見ること自体CSSの勉強にもなるでしょう。

w3schools.com

 

CSSデザインテンプレート

nm_02_07

CSSのデザインテンプレートが入手できるサイトを厳選して紹介してくれています。

デザインテンプレートとはだれかすごい人が作ったデザインがそのまま使えるという優れもの。でも、そのまま使っては能がないのでぜひとも自分なりに改造しましょう。

CSSデザインテンプレート

 

WebDesignLesson

nm_02_08

CSSの入門的なところからかなり深いところまでのっています。

基礎から着実にしっかり身につけたい人はおすすめです。

WebDesignLesson

 

Web programming Primer

nm_02_09

CSSについて親しみやすい口調で親切に丁寧に教えてくれます。

硬い文章が苦手な方は是非このサイトで勉強されていくことをおすすめします。

Web programming Primer

 

CSS BASICS

nm_02_10

こちらも英語サイトですがきちんとチャプターごとに分かれていて、基礎からハイレベルなところまで連れて行ってくれます。

英語サイトは抵抗があるかもしれませんが、英語で理解するとプログラミングはもっと簡単に理解できるという話もあります。ぜひ試してみてください。

CSS BASICS

 

いかがだったでしょうか。

最近では、動画学習や自分で書きながら覚える学習サイトがどんどん増えています。人それぞれ自分に合った学習方法があるはずなので、ぜひ使って試してみましょう。

自分のオリジナルのWebサイトを制作できるはずです!

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは、初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプWebデザイン講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。