概念的なものを知る
まずCSSの書き方どうこうを覚えるより、まずはWeb制作の全体感を覚えたほうが、自分が担当する範囲がイメージでき、必要性が見えてくるので覚えやすくなります。 「CSSはコーディングするために必要」という考え方だけだと、どうしても作業的な見方になりがちなのですが、プロセスが見えてくると何をすれば良いのかが見えてくるので、まずは全体像の把握をおすすめします。 全体像を学ぶのは簡単なようで難しいです。 個人的には下記の書籍をオススメします。 Webデザインの新しい教科書 改訂新版 基礎から覚える、深く理解できる。〈HTML5、CSS3、レスポンシブWebデザイン〉 こちらはWeb制作入門書として人気の書籍です。 制作の「背景」や「理由」を学び、応用力をつけれる１冊です。 インターネットの仕組みから、サイト制作のワークフロー、 HTML・CSSの技術的な解説、Webサイトを公開・運用するまでの基礎知識を、 順序立てて学べます。 「すでに知っているよ」という方も慢心せずに一度目を通してみると気づきがあって「自分で考える力」や「ずっと役立つ応用力」が身につくでしょう。コーディングの基礎知識
Webデザイナーが最低限覚えるコーディングといえばHTML/CSS/JavaScript（jQuery）となります。HTML
HTMLはマークアップ言語と言われるもので、<body></body> <div></div> といった感じでタグで囲われるものが多いです。
※imgタグのように囲われないものも存在します。
HTMLが何をしているのかというと主に検索エンジン（SEO）への対応の強化をしているものです。
適切なマークアップをすることで、Googleの検索ロボットに「ここのページがどんなページで、どんな情報があるか」を整理して意味をつけた状態で伝えます。
例えば<main>タグでくくられた部分はそのページのメインのコンテンツとして検索エンジンには理解されます。
CSS
MTMLは要素に意味を持たせるものに対してCSSは見栄えを整えるものです。 大きく分けるとCSSでは下記の事ができます。- レイアウトを整える
- 色を変える
- 大きさを調整する
- 線をつける
- 形を変える
- アニメーションをさせる
JavaScript(jQuery)
javascript(jQuery)はHTML/CSSに比べて難易度が高いですが、これが使えないと出来ることが限られてしますので、今需要のあるスキルです。 JavaScript(jQuery)では、ユーザーの動作によって動的なアクションを設定出来るものです。 例えば、クリックしたタイミングな何かの要素が見えたり、スクロールしたら、何かがアニメーションしてきたりします。 JavaScript(jQuery)が使えるようになると出来ることが一気に広がりWeb制作が楽しくなります。基本の勉強
全体の概要を把握した後は、実際に手を動かす事でCSSを学びます。 オススメは下記２サイトのカリキュラムを受ける事です。 無料で学べるので、気軽に開始できます。 ２サイトともそれなりの時間は必要ですが基礎は大事ですので、時間をかけてわからないところをそのままにせずにしっかり学んでおくと今後の習得スピードが上がります。ドットインストール
progate
やってはいけない学習法
これまでオススメの方法をご紹介しましたが、しないほうが良い方法もご紹介します。丸暗記する
学校のテスト勉強の延長で「暗記」に頼るのはオススメしません。 なぜなら、Webサイトをコーディングするときには暗記では対応できないケースが殆どで、応用が求められるからです。 同様にコピー＆ペーストを多様するのもオススメしません。 制作の現場でも必要なコードをコピー＆ペーストできるようにスニペットを作ったりはしますが、それはそのコードを理解している人だから問題なく使えるのです。 コードの意味を理解して記述していかないとなかなか身につきません。ノートに書いて覚える
以前CSSのプロパティをノートに書いてる人を見かけたのですがこちらもオススメしません。 理由はノートに書いたコードは検索できないので、必要なときにすぐに探せないからです。 手で書いたほうが覚えるという方もいるかと思いますが、コードを書き慣れる意味も含めてちゃんとエディターで書いてそれがきちんと自分の思い描いたように実行されるのか見える状態で練習したほうが良いです。全て覚えようとする
CSSもHTMLを「全部」を覚えようとするとかなり大変です。 私も使わない・知らないCSSプロパティとかたくさんあります。 重要度を均一にするのではなく必要なもの・よく使うものに重点をおいて調べたほうが身につきやすいですし、応用力もつきます。CSSを応用するためのオススメの勉強法
CSSもHTMLも覚えただけではなかなか身につきません。 やっぱり何度もコードを書く事、そして毎日書くことが重要です。 ただCSSプロパティを覚えてもいつ使っていいかわからないとう悩みにぶつかると思います。 私はそんなときはレイアウトの模写をしました。模写にコーディングの練習方法
デザインの表現力を上げるためによく模写を勧められますが、CSSにも同じ事がいえます。 レイアウトの模写といってもどこかのページ１ページをそのまま模写するのではなく模写したい一部だけを決めてそのレイアウトだけを模写します。 この方法だと簡単なものだと数分で終わることができますので毎日の修練にぴったりです。 同時に答えのコードもブラウザから見ることができるので、悩みすぎて諦めるということもないです。 ブラウザで対象のレイアウトがどんなCSSプロパティが当たってるか見たいときは各ブラウザにあるデベロッパーツールを使うと良いです。
Google Chromeの場合デベロッパーツールはメニューバーの表示→開発/管理→デベロッパーツールのところにあります。
デベロッパーツールを起動して確認したいHTMLを選択するとそこにどんなCSSプロパティがあたっているか確認ができます。
毎日コードを書くための環境
コードを書くのにエディターを立ち上げるのが面倒、簡単なレイアウトを作るのにHTMLとCSSのディレクトリを作るのが面倒と思う人はcodepenというサービスがオススメです。 このサービスではブラウザ上でHTML・CSS・JSが書くことができそれをすぐにプレビューしてくれます。 その他にもタグが付けれたりするので、書いたレイアウトをいつか探す時にも役立ちます。 毎日続けると、たくさんの模写が溜まっていくので自分がどのくらいのCSSの勉強をしたのかが見えるので達成感もあります。 Webデザイナーの人でCSSはちょっとできるくらいの人は、このくらいはできますみたいな共有の場にしても良いですね。レイアウトを探す方法
Webサイトを探すときは、デザインギャラリーのサイトから探してみるのはどうでしょう。 io3000 最新のデザインに触れれる機会も増えますのでオススメです。 他にも雑誌のレイアウトを組み込んでみるのもオススメです。 Webのレイアウトだけで練習していると、常に同じようなものになってしまってすぐ飽きてしまします。 その点雑誌はレイアウトが自由なので、それをWebのレスポンシブで表現しようとすると頭を刺激して良いコーディングの練習になります。 手元にある雑誌を読むのも悪くないのですが、私のオススメは「楽天マガジンコーディングの注意点
コーディングは一度覚えれば簡単です。 一点注意が必要なのが、クロスブラウザの存在です。 普段みなさんは同じブラウザでWebサイトを見ているかと思いますが、ユーザーは様々なブラウザでWebサイトを見ています。 一般的なブラウザは下記になります。 【PCの場合】- GoogleChrome
- firefox
- safari
- opera
- GoogleChrome
- safari
- Android デフォルトブラウザ
人に教えてもらう
自分で学ぶと言うのは必須ですが、時には人に頼るのも大事です。 つまずいてるところと言うのは、検索で解決できるものではなかったり、自分のやり方が適切なのか、もっといい方法はないのかと悩む事もあるかと思います。 そういった場合は、「プロに聞く」のが１番てっとり 早いです。 周りに相談できる方がいる場合は、ちゃんと質問事項をまとめて質問すれば、ちゃんと答えてくれると思います。 （※当然頼ってばかりでは信頼関係を損ね掛けないのでご注意ください） よくjQueryがわからないといった質問がわからないという相談を受けるのですが、正直そんなバックリな質問を受けても私もわからないです…。
ちゃんと相手が答えれるような状態まで質問を持っていかないと適切な回答はいただけないでしょう。
私も能力柄、人に教えることが多いので最近ココナラ
というサービスを試しに始めました。
こちらでコーディングでわからない人向けに相談に乗っていますのでよかったら、ご活用ください(ゝω・)
試しにやってるので、ずっと続けるかは不明です。
HTML/CSSのわからない方、教えます
他にもオススメの方法としては動画視聴で覚えるUdemyです。
Udemyで学ぶメリットはべつの記事でまとめていますので、ご興味あればご覧ください。
動画学習サービスUdemy（ユーデミー）を１年間利用してみた評判と感想
あとは、プロに聞くというのも手ですね。
特に、2〜3ヶ月の間でみっちり詰め込みたいという場合でしたら、オンラインスクールに通うのもありですね。
最近私の周りで評判が良いのはCodeCampさんでしょうか。
CodeCampさんについてはこちらにまとめていますのでご興味あればご覧ください。
独学で挫折したときの選択に。マンツーマン指導のオンラインスクールCodeCamp
受講生の声が結構たくさん公開されてます。
CodeCamp[受講生の声]