Cntlog

2014年頃からPug（当時はjade）を使ってHTMLのコーディングを進めてました。
最初はこんな書き方もできたほうが良いのかなくらいで考えていたのですが、最近ではPugがないほうがしんどい状態になってきました。

保守が苦手だったり、修正時にミスが多い人はPugを使うことでコーディングの質を向上させることができます。

今日はそんなPugのメリットをご紹介します。

“Webデザイナーが効率よくHTMLコーディングができるPugのメリット” の続きを読む

Webデザイナーになろうとして、まず最初につまずくのがコーディングです。
CSSは慣れてくると簡単なのですが初めて触るとなると、何から手を付けてよいかわからない、何が正解がわからないなどの理由で挫折する人を多く見かけます。

本記事ではCSSが全然わからない方がCSSのコーディングに慣れるための勉強法を紹介します。

概念的なものを知る

まずCSSの書き方どうこうを覚えるより、まずはWeb制作の全体感を覚えたほうが、自分が担当する範囲がイメージでき、必要性が見えてくるので覚えやすくなります。

「CSSはコーディングするために必要」という考え方だけだと、どうしても作業的な見方になりがちなのですが、プロセスが見えてくると何をすれば良いのかが見えてくるので、まずは全体像の把握をおすすめします。

全体像を学ぶのは簡単なようで難しいです。
個人的には下記の書籍をオススメします。

Webデザインの新しい教科書 改訂新版 基礎から覚える、深く理解できる。〈HTML5、CSS3、レスポンシブWebデザイン〉

こちらはWeb制作入門書として人気の書籍です。
制作の「背景」や「理由」を学び、応用力をつけれる１冊です。

インターネットの仕組みから、サイト制作のワークフロー、
HTML・CSSの技術的な解説、Webサイトを公開・運用するまでの基礎知識を、
順序立てて学べます。

「すでに知っているよ」という方も慢心せずに一度目を通してみると気づきがあって「自分で考える力」や「ずっと役立つ応用力」が身につくでしょう。

基本の勉強

全体の概要を把握した後は、実際に手を動かす事でCSSを学びます。
オススメは下記２サイトのカリキュラムを受ける事です。

無料で学べるので、気軽に開始できます。
２サイトともそれなりの時間は必要ですが基礎は大事ですので、時間をかけてわからないところをそのままにせずにしっかり学んでおくと今後の習得スピードが上がります。

ドットインストール

• CSS入門
• CSSレイアウト

progate

• HTML&CSS

やってはいけない学習法

これまでオススメの方法をご紹介しましたが、しないほうが良い方法もご紹介します。

丸暗記する

学校のテスト勉強の延長で「暗記」に頼るのはオススメしません。
なぜなら、Webサイトをコーディングするときには暗記では対応できないケースが殆どで、応用が求められるからです。

同様にコピー＆ペーストを多様するのもオススメしません。
制作の現場でも必要なコードをコピー＆ペーストできるようにスニペットを作ったりはしますが、それはそのコードを理解している人だから問題なく使えるのです。

コードの意味を理解して記述していかないとなかなか身につきません。

ノートに書いて覚える

以前CSSのプロパティをノートに書いてる人を見かけたのですがこちらもオススメしません。
理由はノートに書いたコードは検索できないので、必要なときにすぐに探せないからです。

手で書いたほうが覚えるという方もいるかと思いますが、コードを書き慣れる意味も含めてちゃんとエディターで書いてそれがきちんと自分の思い描いたように実行されるのか見える状態で練習したほうが良いです。

全て覚えようとする

CSSもHTMLを「全部」を覚えようとするとかなり大変です。
私も使わない・知らないCSSプロパティとかたくさんあります。

重要度を均一にするのではなく必要なもの・よく使うものに重点をおいて調べたほうが身につきやすいですし、応用力もつきます。

CSSを応用するためのオススメの勉強法

CSSもHTMLも覚えただけではなかなか身につきません。
やっぱり何度もコードを書く事、そして毎日書くことが重要です。

ただCSSプロパティを覚えてもいつ使っていいかわからないとう悩みにぶつかると思います。
私はそんなときはレイアウトの模写をしました。

CSSの模写の方法

デザインの表現力を上げるためによく模写を勧められますが、CSSにも同じ事がいえます。
レイアウトの模写といってもどこかのページ１ページをそのまま模写するのではなく模写したい一部だけを決めてそのレイアウトだけを模写します。

この方法だと簡単なものだと数分で終わることができますので毎日の修練にぴったりです。
同時に答えのコードもブラウザから見ることができるので、悩みすぎて諦めるということもないです。

ブラウザで対象のレイアウトがどんなCSSプロパティが当たってるか見たいときは各ブラウザにあるデベロッパーツールを使うと良いです。

Google Chromeの場合デベロッパーツールはメニューバーの表示→開発/管理→デベロッパーツールのところにあります。
デベロッパーツールを起動して確認したいHTMLを選択するとそこにどんなCSSプロパティがあたっているか確認ができます。

毎日コードを書くための環境

コードを書くのにエディターを立ち上げるのが面倒、簡単なレイアウトを作るのにHTMLとCSSのディレクトリを作るのが面倒と思う人はcodepenというサービスがオススメです。

このサービスではブラウザ上でHTML・CSS・JSが書くことができそれをすぐにプレビューしてくれます。
その他にもタグが付けれたりするので、書いたレイアウトをいつか探す時にも役立ちます。
毎日続けると、たくさんの模写が溜まっていくので自分がどのくらいのCSSの勉強をしたのかが見えるので達成感もあります。

Webデザイナーの人でCSSはちょっとできるくらいの人は、このくらいはできますみたいな共有の場にしても良いですね。

レイアウトを探す方法

Webサイトを探すときは、デザインギャラリーのサイトから探してみるのはどうでしょう。
io3000

最新のデザインに触れれる機会も増えますのでオススメです。

まとめ

CSSは知らない人からするととっつきにくいですが、覚えてしまえば簡単です。
最初は苦労すると思いますがWebサイトを作るには切っても切れないですし、いつ自分が書かないといけない状況になるのかわかりません。
CSSはWebサイトを作る人には必須のスキルです。

本記事で苦手意識を早く克服できる手助けができたら幸いです(ゝω・)