読者です 読者をやめる 読者になる 読者になる

Kai Hajimeのおすそわけ

脱社畜!子育てサラリーマンのInputとOutputをおすそわけ

webデザイン初心者が7ヶ月間でHTML5& CSS3の基礎をマスターした勉強法まとめ

今回は僕が7ヶ月間でHTML& CSS3の基礎をマスターした勉強法を「おすそわけ」する。 

f:id:kaihajime:20161018114240j:plain僕は今年の3月に独学を始めた。

勉強を始めた当初はコードを見てもチンプンカンプンだったが、今は書かれているコードが何を意味するのか? 構造や機能も簡単なものならわかるようになった。

ただ、テキストを見ながらでしかサイトを組み立てられないレベルなので、仕様書を渡され「はい、コレ作って」と言われると厳しいものがある。

まだまだ課題は山積みである。

 

仕事から帰宅して15分だけでもコードとにらみ合い、早起きして出社前の勉強である程度わかるようになったことは素直に嬉しい。

7ヶ月間の独学で、修得するスピードが遅いのか? 早いのか? はわからない。

ただ僕にできるのだから、読んでくれているあなたも必ず出来る!

訳が分からなくて腐りそうになっても諦めないことが一番大事だと思う。

 

 

7ヶ月間やってきたこと

旅行で勉強しなかった日、どうしてもやる気が起きずにパソコンすら開かなかった日があった。しかし自分で決めたことサボっていると精神的によくない。

そんな時に僕が心がけていること、対策がある。

 

とにかく切らさない

本当は動画を見ながら手を動かす方が効果的だが、どうしてもダメな時は「ドットインストール」をスマホで見ていた。

初心者のうちは毎日コードに触れることが大事。

日があくと前の作業がどんな状態で終わっていたのかを思い出すのに時間がかかり、少し前に戻る必要も出てくる。

また、コードの内容、意味合いが充分理解できていないので、用語を再度調べなければならなくなる。

 

どうしても勉強できない日でも、

前回どこまで作業していたのか確認だけでもするとか?

HTML& CSS3辞書」で出てきた構文や要素のページをパラパラでも良いので見るとか?

スマホで「ドットインストール」を見るとか?

とにかく「HTML& CSS3をマスターする」という目標から目を離さないことが大事。

 

できるクリエイター 逆引きHTML+CSSデザイン事典 Webクリエイターの現場で必要な基本と最新動向 (できるクリエイターシリーズ)

 

わからない用語を検索すると詳しい解説が見れる辞書サイト

www.htmq.com

 

徹底的に基礎を固める

僕は3冊のテキストを購入した。

 1冊目

超初心者向けの「HTML& CSS3 レッスンブック」

実際に1つのサイトをステップ・バイ・ステップの解説付きで作っていく構成。

まったくの初心者の僕でも最後までやり通すことができた。

初心者がつまずくであろう用語の説明も丁寧で、各チャプターの最後には、そのチャプターのまとめがあり、終わった後でもそこを開けば「どうしても押さえておきたいポイント」に戻れる。

レスポンシブデザインにも当然触れている。サンプルサイトは洗練されてないが、見た目はさほど古さを感じさせない一般的なデザインである。

まず一冊目は見た目のデザインは無視し、「HTML& CSS3」とはどういったプログラミングなのか?を超初心者が理解するには最適な1冊。

 

HTML5&CSS3レッスンブック

エビスコム ソシム 2013-05-24
売り上げランキング : 5994
by ヨメレバ

 

2冊目

HTML5 & CSS3 デザインブック」

僕が最初に購入したのはこの本だったが、上で紹介したHTML& CSS3 レッスンブック」に比べ少し高度だったので2冊めのテキストにした。

初心者向けなので用語など充分詳しく説明はされているが、「HTML& CSS3」の基本的な解説には詳しく説明はされていない。冒頭からボックスレイアウトを基本に作業していく内容である。

僕は「ボックスって何よ?」というところからのスタートだった。

HTML& CSS3」は基本的に箱(ボックス)を並べて、その箱の中に文字やイラスト・画像を入れてレイアウトするものだ。

ボックスのレイアウトは非常に重要ではあるが、HTML& CSS3」の要素やセレクタ、用語や構文が理解できないていない僕には「ボックスのレイアウト」が最初は意味不明だった。

なので「HTML& CSS3」が全くわからい人がこの本からやるとつまずく可能性がある。

 

ずぶの素人の僕はHTML& CSS3 レッスンブック」で用語や構造などの基礎の基礎を学んでから、このHTML& CSS3 デザインブック」にチャレンジした。

 

結果大きくつまずくこと無く、逆に1冊目より早いスピードで終わることが出来た。

 

この本は「HTML& CSS3」用語や構造などの基礎に一度触れたことがある人向けだ。

加えて、過去挑戦したけど諦めた人がレスポンシブデザインから再度勉強し直そうとする際にもってこいの1冊だと思う。

出てくるサンプルサイトは2つだが、HTML& CSS3 レッスンブック」よりは洗練されたサンプルサイトを作って行くので、今後自分でサイトを作るときのテンプレートとしても使えるのではないだろうか。

 

HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)

エビスコム ソシム 2014-10-28
売り上げランキング : 6603
by ヨメレバ

 

3冊目

HTML/CSS3 モダンコーディング」

上の2冊を1周やり終えたとき、もう少しレベルが高いものに挑戦したくなった。

数ある書籍から迷った。

実際につくるサンプルサイトも非常に洗練されている。その分難易度も高く、基礎的な部分にもほぼ触れられていない。

 

HTML& CSS3の基本を理解した人」を前提に書かれている中級者向けの本である。

 

普段見かける本格的なwebサイト、いわゆる「イケてるサイト」をサンプルにしているので、作ったサンプルサイトを自分になり後からカスタマイズすれば、「イケてるサイト」を自分のポートフォリオにできる。

基本を一通りパスして、腕試しにやってみるのも面白い。

 

基本的なところを理解していれば、全くわからないことはなかった。

ただ、あくまでも「基礎がわかっている人」向けなので、細かいことは自分で調べて考えながら作っていくことになる。

僕も辞書を見ながらのチャレンジだったが、案外楽しめた。

どうしても上手くいかないところは飛ばして進めた。

その時わからなくても次の日やってみると案外すんなりできたりするものだ。

とりあえず1回目は終わったので、また2周目に挑戦するつもりだ。

 

HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方 (WEB Engineer’s Books)

吉田 真麻 翔泳社 2015-11-03
売り上げランキング : 11836
by ヨメレバ

 

簡単なテキストを2度(理解できるまで)やる

上で紹介した本以外にもたくさんのテキストが売っている。

種類が多すぎて迷ってしまうが、超初心者の僕でも基本は押さえることができたので、今から始めようと思っている人は参考にしていただきたい。

僕は今、2冊目HTML5 & CSS3 デザインブック」の2周目を復習としてやっているところだ。

 

本当は3冊も必要ないかもしれない。

あれこれいろんなテキストに手を出すより、自分のレベルにあったテキストを、自分が納得できるまで、テキストがペンやマーカー、ふせんでグチャグチャになるまでトコトンやる方が効果的だ。

 

TUTAYAに行った時に他の書籍も気になって目を通すが、書いてあることはどの本も同じである。

是非みなさんも自分にあったテキストを真っ黒になるまでやりきってみることをオススメする。

 

オンラインスクールを利用してみる

僕は1冊目HTML& CSS3 レッスンブック」と同時に次のオンラインスクールも利用した。

今は使っていないが、独学を始めた当初はかなり助けてもらった。

本だと本当に独学だが、Progateだとインストラクターに指導を受けてるのとほぼ同じ感覚で課題を進めることができる。

 

HTML& CSS3」以外のプログラミングのカリキュラムも充実しているので、今後「jQuery」も学ぶ予定なので、その時は選択肢の中に入るだろう。

「基礎編」の一部レッスンは無料。試しにやってみてはいかがだろう。

有料会員で「応用」「実践」の全てのレッスンを月額¥980で学べるコースもある。

 

prog-8.com

 

Progateについての過去記事

kaihajime.hatenablog.com

 

独学で何ができるようになったか?

繰り返すが、「まっさらの状態」からwebサイトを立ち上げることはまだできない

Progate」の「実践編」では仕様書とデザインカンプをもとに1から組み立てる課題があるのだが、途中で挫折した。

ヒントや解答を見れば「あっ!そうか」となるのだが、ゼロから組み立てるには作ったサイトの数、経験値が少な過ぎるのだ。

 

ただ、上で紹介したテキストや、自分の好きなサイト、カッコイイなと思うサイトのHTMLCSSを見ると

「ここがこうなって、こうなってるから、こう書いてるんだな」

という風にコードの意味や役割が理解できる。

わからない時は「逆引き HTML+CSS デザイン辞典」で調べるようにしている。

 

気に入ったサイトの「HTML & CSS」を見る方法

blog.codecamp.jp

 

独学を始めた時に比べると少しづつだが前進している。

頑張った甲斐があった。

そしてわかってくると純粋に楽しい。コードを書くことは全然苦痛ではない。

 

今後の勉強計画

そろそろ次のステップへ移ろうと思う。

自分で「HTML & CSS」をいじってみる

Photoshop VIPというサイトでクオリティーの高い「イケてるサイト」のHTMLがダウンロードできるので、それを自分好みにカスタマイズしていこうと思う。

解説など見ずにwebサイトを再構築できるようになるのが目的である。

 

HTMLテンプレート アーカイブ - PhotoshopVIP

 

ポートフォリオをつくる

これは少し先になると思うが、Photoshop VIPでダウンロードしたサイトをいじり倒した後、1からサイトを起ち上げてみる。そしてポートフォリオを作ろうと思っている。年内12月には取り掛かりたい。

 

さいごに

HTML & CSS」はパズルのような、ゲームのようなものに近いと思う。

どこか一つでもスペルミスがあれば表示されないし、レイアウトは崩れてしまう。

どこが間違っているのかわからず、投げ出したくなる時もある。

そんな時は一息つこう。

さっきまで悩んでたことが嘘のように、間違いが見えてくる。

そうやって試行錯誤を繰り返し、理解が深まり少しでも前に進んでいる実感が湧いてきたらコーディングは楽しくなる。

 

今から「webデザイン」HTML & CSS」を自分のモノにしたいと思っている人は、何事も最初は上手くいかないが、どんどんチャレンジするべきだ。

42歳のオッサンにも出来たのだから、あなたも必ずコーディングが楽しくなる!

 

新しいスキルを身につけた先にあるもの

僕にはwebデザインが出来るようになった先に「やってみたい」ことがある。照れくさいが「夢」のようなものだ。

この歳で若いバリバリのデザイナーに追いつこうとは考えていない。

ただwebデザインが人並みにできるようになれば、自分にとっての新しい働き方があると考えている。それについてはまたの機会に書くつもりだ。

 

読んでいただいた方へ

ありがとうございます。

 

Kai Hajime

 

できるクリエイター 逆引きHTML+CSSデザイン事典 Webクリエイターの現場で必要な基本と最新動向 (できるクリエイターシリーズ)

加藤 善規,平澤 隆,できるシリーズ編集部 インプレスジャパン 2011-09-27
売り上げランキング : 272153
by ヨメレバ