webデザイン初心者が７ヶ月間でHTML５& CSS３の基礎をマスターした勉強法まとめ
今回は僕が７ヶ月間でHTML５& CSS３の基礎をマスターした勉強法を「おすそわけ」する。
僕は今年の３月に独学を始めた。
勉強を始めた当初はコードを見てもチンプンカンプンだったが、今は書かれているコードが何を意味するのか？ 構造や機能も簡単なものならわかるようになった。
ただ、テキストを見ながらでしかサイトを組み立てられないレベルなので、仕様書を渡され「はい、コレ作って」と言われると厳しいものがある。
まだまだ課題は山積みである。
仕事から帰宅して１５分だけでもコードとにらみ合い、早起きして出社前の勉強である程度わかるようになったことは素直に嬉しい。
７ヶ月間の独学で、修得するスピードが遅いのか？ 早いのか？ はわからない。
ただ僕にできるのだから、読んでくれているあなたも必ず出来る！
訳が分からなくて腐りそうになっても諦めないことが一番大事だと思う。
７ヶ月間やってきたこと
旅行で勉強しなかった日、どうしてもやる気が起きずにパソコンすら開かなかった日があった。しかし自分で決めたことサボっていると精神的によくない。
そんな時に僕が心がけていること、対策がある。
とにかく切らさない
本当は動画を見ながら手を動かす方が効果的だが、どうしてもダメな時は「ドットインストール」をスマホで見ていた。
初心者のうちは毎日コードに触れることが大事。
日があくと前の作業がどんな状態で終わっていたのかを思い出すのに時間がかかり、少し前に戻る必要も出てくる。
また、コードの内容、意味合いが充分理解できていないので、用語を再度調べなければならなくなる。
どうしても勉強できない日でも、
前回どこまで作業していたのか確認だけでもするとか？
「HTML５& CSS３辞書」で出てきた構文や要素のページをパラパラでも良いので見るとか？
スマホで「ドットインストール」を見るとか？
とにかく「HTML５& CSS３をマスターする」という目標から目を離さないことが大事。
できるクリエイター 逆引きHTML+CSSデザイン事典 Webクリエイターの現場で必要な基本と最新動向 (できるクリエイターシリーズ)
わからない用語を検索すると詳しい解説が見れる辞書サイト
徹底的に基礎を固める
僕は３冊のテキストを購入した。
１冊目
超初心者向けの「HTML５& CSS３ レッスンブック」
実際に１つのサイトをステップ・バイ・ステップの解説付きで作っていく構成。
まったくの初心者の僕でも最後までやり通すことができた。
初心者がつまずくであろう用語の説明も丁寧で、各チャプターの最後には、そのチャプターのまとめがあり、終わった後でもそこを開けば「どうしても押さえておきたいポイント」に戻れる。
レスポンシブデザインにも当然触れている。サンプルサイトは洗練されてないが、見た目はさほど古さを感じさせない一般的なデザインである。
まず一冊目は見た目のデザインは無視し、「HTML５& CSS３」とはどういったプログラミングなのか？を超初心者が理解するには最適な１冊。
| HTML5&CSS3レッスンブック | ||||
|
２冊目
「HTML5 & CSS3 デザインブック」
僕が最初に購入したのはこの本だったが、上で紹介した「HTML５& CSS３ レッスンブック」に比べ少し高度だったので２冊めのテキストにした。
初心者向けなので用語など充分詳しく説明はされているが、「HTML５& CSS３」の基本的な解説には詳しく説明はされていない。冒頭からボックスレイアウトを基本に作業していく内容である。
僕は「ボックスって何よ？」というところからのスタートだった。
「HTML５& CSS３」は基本的に箱（ボックス）を並べて、その箱の中に文字やイラスト・画像を入れてレイアウトするものだ。
ボックスのレイアウトは非常に重要ではあるが、「HTML５& CSS３」の要素やセレクタ、用語や構文が理解できないていない僕には「ボックスのレイアウト」が最初は意味不明だった。
なので「HTML５& CSS３」が全くわからい人がこの本からやるとつまずく可能性がある。
ずぶの素人の僕は「HTML５& CSS３ レッスンブック」で用語や構造などの基礎の基礎を学んでから、この「HTML５& CSS３ デザインブック」にチャレンジした。
結果大きくつまずくこと無く、逆に１冊目より早いスピードで終わることが出来た。
この本は「HTML５& CSS３」用語や構造などの基礎に一度触れたことがある人向けだ。
加えて、過去挑戦したけど諦めた人がレスポンシブデザインから再度勉強し直そうとする際にもってこいの１冊だと思う。
出てくるサンプルサイトは２つだが、「HTML５& CSS３ レッスンブック」よりは洗練されたサンプルサイトを作って行くので、今後自分でサイトを作るときのテンプレートとしても使えるのではないだろうか。
| HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる) | ||||
|
３冊目
「HTML５/CSS３ モダンコーディング」
上の２冊を１周やり終えたとき、もう少しレベルが高いものに挑戦したくなった。
数ある書籍から迷った。
実際につくるサンプルサイトも非常に洗練されている。その分難易度も高く、基礎的な部分にもほぼ触れられていない。
「HTML５& CSS３の基本を理解した人」を前提に書かれている中級者向けの本である。
普段見かける本格的なwebサイト、いわゆる「イケてるサイト」をサンプルにしているので、作ったサンプルサイトを自分になり後からカスタマイズすれば、「イケてるサイト」を自分のポートフォリオにできる。
基本を一通りパスして、腕試しにやってみるのも面白い。
基本的なところを理解していれば、全くわからないことはなかった。
ただ、あくまでも「基礎がわかっている人」向けなので、細かいことは自分で調べて考えながら作っていくことになる。
僕も辞書を見ながらのチャレンジだったが、案外楽しめた。
どうしても上手くいかないところは飛ばして進めた。
その時わからなくても次の日やってみると案外すんなりできたりするものだ。
とりあえず１回目は終わったので、また２周目に挑戦するつもりだ。
| HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方 (WEB Engineer’s Books) | ||||
|
簡単なテキストを２度（理解できるまで）やる
上で紹介した本以外にもたくさんのテキストが売っている。
種類が多すぎて迷ってしまうが、超初心者の僕でも基本は押さえることができたので、今から始めようと思っている人は参考にしていただきたい。
僕は今、２冊目「HTML5 & CSS3 デザインブック」の２周目を復習としてやっているところだ。
本当は３冊も必要ないかもしれない。
あれこれいろんなテキストに手を出すより、自分のレベルにあったテキストを、自分が納得できるまで、テキストがペンやマーカー、ふせんでグチャグチャになるまでトコトンやる方が効果的だ。
TUTAYAに行った時に他の書籍も気になって目を通すが、書いてあることはどの本も同じである。
是非みなさんも自分にあったテキストを真っ黒になるまでやりきってみることをオススメする。
オンラインスクールを利用してみる
僕は１冊目「HTML５& CSS３ レッスンブック」と同時に次のオンラインスクールも利用した。
今は使っていないが、独学を始めた当初はかなり助けてもらった。
本だと本当に独学だが、「Progate」だとインストラクターに指導を受けてるのとほぼ同じ感覚で課題を進めることができる。
「HTML５& CSS３」以外のプログラミングのカリキュラムも充実しているので、今後「jQuery」も学ぶ予定なので、その時は選択肢の中に入るだろう。
「基礎編」の一部レッスンは無料。試しにやってみてはいかがだろう。
有料会員で「応用」「実践」の全てのレッスンを月額¥９８０で学べるコースもある。
Progateについての過去記事
独学で何ができるようになったか？
繰り返すが、「まっさらの状態」からwebサイトを立ち上げることはまだできない。
「Progate」の「実践編」では仕様書とデザインカンプをもとに１から組み立てる課題があるのだが、途中で挫折した。
ヒントや解答を見れば「あっ！そうか」となるのだが、ゼロから組み立てるには作ったサイトの数、経験値が少な過ぎるのだ。
ただ、上で紹介したテキストや、自分の好きなサイト、カッコイイなと思うサイトのHTML・CSSを見ると
「ここがこうなって、こうなってるから、こう書いてるんだな」
という風にコードの意味や役割が理解できる。
わからない時は「逆引き HTML+CSS デザイン辞典」で調べるようにしている。
気に入ったサイトの「HTML & CSS」を見る方法
独学を始めた時に比べると少しづつだが前進している。
頑張った甲斐があった。
そしてわかってくると純粋に楽しい。コードを書くことは全然苦痛ではない。
今後の勉強計画
そろそろ次のステップへ移ろうと思う。
自分で「HTML & CSS」をいじってみる
Photoshop VIPというサイトでクオリティーの高い「イケてるサイト」のHTMLがダウンロードできるので、それを自分好みにカスタマイズしていこうと思う。
解説など見ずにwebサイトを再構築できるようになるのが目的である。
HTMLテンプレート アーカイブ - PhotoshopVIP
ポートフォリオをつくる
これは少し先になると思うが、Photoshop VIPでダウンロードしたサイトをいじり倒した後、１からサイトを起ち上げてみる。そしてポートフォリオを作ろうと思っている。年内１２月には取り掛かりたい。
さいごに
「HTML & CSS」はパズルのような、ゲームのようなものに近いと思う。
どこか一つでもスペルミスがあれば表示されないし、レイアウトは崩れてしまう。
どこが間違っているのかわからず、投げ出したくなる時もある。
そんな時は一息つこう。
さっきまで悩んでたことが嘘のように、間違いが見えてくる。
そうやって試行錯誤を繰り返し、理解が深まり少しでも前に進んでいる実感が湧いてきたらコーディングは楽しくなる。
今から「webデザイン」「HTML & CSS」を自分のモノにしたいと思っている人は、何事も最初は上手くいかないが、どんどんチャレンジするべきだ。
４２歳のオッサンにも出来たのだから、あなたも必ずコーディングが楽しくなる！
新しいスキルを身につけた先にあるもの
僕にはwebデザインが出来るようになった先に「やってみたい」ことがある。照れくさいが「夢」のようなものだ。
この歳で若いバリバリのデザイナーに追いつこうとは考えていない。
ただwebデザインが人並みにできるようになれば、自分にとっての新しい働き方があると考えている。それについてはまたの機会に書くつもりだ。
読んでいただいた方へ
ありがとうございます。
Kai Hajime
| できるクリエイター 逆引きHTML+CSSデザイン事典 Webクリエイターの現場で必要な基本と最新動向 (できるクリエイターシリーズ) | ||||
|
