【初心者必読】1か月でCSSを「無料」でマスターする方法

2018年6月5日2022年1月20日

この記事を読めばCSSのコーディング技術を無料で習得する方法と習得に必要な必要サービス・ツールを紹介します。

私はこの方法で1か月CSSを無料で”ほぼ”マスターすることができました。

※ ここ記事での”ほぼ”の定義は、高度なデザインスキルはないが参考とするサイトがあればマネしながら作成することが出来るという意味になります。

この記事ではCSSを使用してWebページを作成したいIT初心者を対象に書いていますが、

バックエンドエンジニアなどのWebエンジニア以外の人も読んで頂ける内容になります。

この記事の内容

CSSをコーディングするために準備するもの

無料でCSSを学習できるサービスと学習方法

CSSを学習する時に参考にするサイト

CSSをコーディングするために準備するもの

CSSコーディングに必要なものは2つです。

です。特定のテキストエディタやWebブラウザを使用しないのであれば、

WindowsでもMacOSでもデフォルトのツールを利用してコーディングを行うことが出来ます。

テキストエディタのオススメは「Atom」です。

Webブラウザのオススメは「Google Chrome」です。

これらは事前にインストールしておきましょう。

↓の記事にAtomのインストール手順をまとめて置きましたの参考にしてください。

CSSはあくまでHTMLを装飾するためのスタイルになります。

そのためHTMLを習得していないとCSSを習得することができません。

まずはHTMLをしっかりマスターしましょう。

↓に最低限押さえておきたいHTMLタグをまとめておきましたので参考にしてください。

まずはCSSの基礎を学びましょう。私のオススメは断然「ドットインストール」です。

ドットインストールなら無料で動画を使った学習をすることが可能です。

1レッスンはおよそ2分～3分半の動画が10～20個で構成されておりますので、集中力を持続させながら学習を進めることができます。

勉強方法ですが、ドットインストールの動画を観ながら、まったく同じ内容を写生するだけです。

ドットインストールでCSSを学ぶために必要は↓になります。

もちろんすべて無料のレッスンです。

レッスン名	内容
CSS入門	CSSとは何か？どうやって書いていくのか？が内容です。一般的なスタイルを学習します。
CSS基礎文法入門	CSSの一般的な文法を学習します。
CSSレイアウト入門	CSSレイアウトの基礎を学習します。
実践！ウェブサイトを作ろう	実際にWebページを作成してみる方法を学習します。
レスポンシブウェブデザイン入門	スマホ<->PCに対応させたWebページの作成方法を学習します。
CSSで吹き出しを作ろう	流行りの吹き出しを作成方法を学習します。