【初心者必読】1か月でCSSを「無料」でマスターする方法
この記事を読めばCSSのコーディング技術を無料で習得する方法 と習得に必要な必要サービス・ツール を紹介します。
私はこの方法で1か月CSS を無料 で”ほぼ ”マスター することができました。
※ ここ記事での”ほぼ”の定義は、高度なデザインスキルはないが参考とするサイトがあればマネしながら作成することが出来るという意味になります。
この記事ではCSSを使用してWebページを作成したいIT初心者 を対象に書いていますが、
バックエンドエンジニアなどのWebエンジニア以外 の人も読んで頂ける内容になります。
この記事の内容
- CSSをコーディングするために準備するもの
- 無料でCSSを学習できるサービスと学習方法
- CSSを学習する時に参考にするサイト
CSSをコーディングするために準備するもの
CSSコーディングに必要なものは2つです。
- テキストエディタ
- Webブラウザ
です。 特定のテキストエディタやWebブラウザを使用しないのであれば、
WindowsでもMacOSでもデフォルトのツールを利用してコーディングを行うことが出来ます。
テキストエディタのオススメは「Atom 」です。
Webブラウザのオススメは「Google Chrome 」です。
これらは事前にインストールしておきましょう。
↓の記事にAtomのインストール手順をまとめて置きましたの参考にしてください。
[st-card id=2385 label=” name=”]
CSSをコーディングするために”HTML”を理解しておく
CSS はあくまでHTMLを装飾するためのスタイル になります。
そのためHTMLを習得していないとCSSを習得することができません。
まずはHTMLをしっかりマスターしましょう。
↓に最低限押さえておきたいHTMLタグをまとめておきましたので参考にしてください。
[st-card id=1852 label=” name=”]
ドットインストールでCSSの基礎を学ぶ
まずはCSSの基礎を学びましょう。 私のオススメは断然「ドットインストール 」です。
ドットインストールなら無料 で動画を使った学習をすることが可能です。
1レッスンはおよそ2分～3分半の動画が10～20個で構成されておりますので、集中力を持続させながら学習を進めることができます。
勉強方法ですが、ドットインストールの動画を観ながら、まったく同じ内容を写生するだけです。
ドットインストールでCSSを学ぶために必要は↓になります。
もちろんすべて無料のレッスン です。
[table id=31 /]
CSSの色々なデザインやCSSの書き方を学ぶ
ドットインストールのレッスンを1**** 周やれば大体のCSSの内容は頭に入っていることでしょう。
この段階に入ったら、各パーツごとのCSSコーディング方法を学習するしましょう。
そこでオススメなのが
です。 「サルワカ 」は、「あれ？想定した結果と違うぞ？」という時にハマるポイントが分かりやすくまとめられています。
またトレンドの装飾方法をテンプレートとしてまとめられているので必要
「クリエイターボックス 」は、Webページ全体の見栄えをどのように構成していけばよいか学習することができます。
現場目線のコーディング方法が随所に紹介されています。
実際にCSSコーディングしてみる
ドットインストールのレッスンを最低でも**** 3周やればCSSの内容は頭に入っていることでしょう。
この段階に入ったら実際にWebページをコーディングしてみましょう。
私の間隔ではWebページのタイプは大きく分けて2つになります。
- サイドバーがあるサイト
- ランディングページ
上の2つをマスターすればWebページの作成することが出来ます。
サイドバーがあるサイトならば「ikesai」を参考にすることをオススメします。
ランディングページならば「LP ARCHIVE」を参考にすることをオススメします。
まとめ
[st-mybox title=本記事のまとめ fontawesome=fa-clipboard-check color=#f2a60e bordercolor=#f2a60e bgcolor=#ffffff borderwidth=2 borderradius=5 titleweight=bold\] - ドットインストールでCSSの基礎固めをする - ”サルワカと”クリエイターボックス”でCSSでデザイン方法やTipsを学ぶ - ”IKESAI”や”LP ARCHIVE”で実際あるページを参考に自分のページを作成 [/st-mybox]
どうしてもWeb開発の学習するのが挫折してしまう人
どうしてもHTMLやCSSの学習で躓いてしまう人は、オンラインプログラミング講座 を利用することをオススメします。
プログラミング学習で最大の障害は「プログラミングが想定した結果にならずに学習をやめてしまう 」ことです。
分からないことを自力で解決することで技術力が上がるのは事実ですが、初心者には大きな障害 になります。
初期投資とてメンター を付けて効率的に学習する手段を選ぶことは技術習得の最短距離 です。
そこでオススメなのがオンラインプログラミング学習サービス の「Codeamp 」です。
「codecamp」ならば最低160時間 でWebページの制作を行うことが出来るようになります。
また無料レッスン もついており、プログラミングスクールがどんなところかも試すことができます。