今回は前回記事のデザイン編に続いて、コーディングについての勉強方法をご紹介していきます。
デザインについては印刷物の制作で前職の時から実務経験がありましたが、コーディングについては全くの素人でした。特にど文系人間のおんたまからしてみると、コードの文字列は最初ちょっと苦手意識が強く…。ただ、クリエイティブな仕事に身を置きたいのならWebの業界は経験するべきと思ったので、コーディングを一から書き上げられずとも内容の理解は最低限の必須事項だと思い勉強しました。
おかげでWebディレクターに転職した時もコードをある程度理解できていたのでその点は勉強しておいてよかったととても感じました。コーディングはスクールに通わず独学で学んだので、その方法を記録したいと思います。
勉強法①｜本を読んで勉強
HTML、CSSの基礎知識についてはManaさんの書籍を２冊購入して勉強しました。内容がわかりやすいことはもちろん、書籍を購入するとサンプルサイトなどの教材一式がダウンロードできるので本で学んだ知識を実際にテキストエディタで書いてみて覚えることができました。サンプルサイトのデザインがおしゃれな点も勉強していてテンションが上がるポイントです。
1冊ですべて身につくHTML & CSSとWebデザイン入門講座
こちらはそもそものWebの仕組みについてや、「HTMLとは」「CSSとは」という基礎的な説明から入るので入門編で初めてコーディングをする人におすすめの一冊です。
ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座
こちらはCSSを使ったグラデーションや写真の加工、 JavaScriptなど最初に紹介した入門講座よりもワンランク上の知識を学ぶことができます。また、コードの知識以外にSassやカスタム変数など、より効率よくコーディングするためのTipsも紹介してくれています。
以上２冊をやり込めば知識としては一通りコードの読み方や理解は深められる思います。ネットでも無料記事で様々なコーディングの知識が拾えるのですが、書籍として知識が集約されていると後から確認したいことがあった時にさっと見れるのでおすすめです。
ちなみに著者のManaさんは最近WordPressの書籍も出されたのですぐに購入しました！おんたまBLOGを始める際のWordPressの使い方もManaさんの書籍で学んだのでそちらについてもまた記事にしたいと思います。
またManaさんはブログもやっていてWeb・デザインを中心に様々な記事を発信されています。
勉強法②｜コーディング学習サイトを利用する
本で知識としてコーディングを理解することができましたが、やはり実際に一からコーディングする経験が必要だと思いました。ただ最初は既存サイトの模写で実践経験を積もうと思ったのですが、レベルの高いサイトの模写はまだJavaScriptなどの知識が浅かったりして、再現が難しい＋既存サイトのコードを見ても理解が追いつかない状態で挫折をしてしまいました…。
そこでたまたま見つけたのがCodestepという無料のコーディング学習サイトでした。
レベルに合わせて模写するサイトのお題が用意されていてダミーですが使用する画像素材も用意してくれています。また、作成途中でつまずいた時のヒントも用意されているので初めて模写コーディングする人にはうってつけの学習サイトです。
私はCodestepでまだ入門編を一通りやってみた状態ですが、それでもお題を5個ほどこなすと段々一からでも書き上げることができてきました。まだ入門編だけなので他のレベルも順にやっていきたいと思います。
また、最近有料ですがCodestep Proという実案件をベースにしたより実践的な学習サービスもできたみたいです。残念ながら今は申し込み終了してしまってますが、実案件を元にして納期設定もあるということでより本番に近い状態で勉強できるのは良いなと思いました。
最後に
以上が私のコーディングの勉強方法でした。まだまだ初級レベルの知識しかない状態ですが、書籍代以外はお金をかけずに基礎的な知識を身につけることができました。また冒頭でコーディングに苦手意識があったと言いましたが、デザインしたものをコーディングすることでWeb上に表現されていく様はやってみて面白いと感じるようにもなってきました。
読めるだけでなく自分で一から書くこともできるようになりたいと思っているので、これからもコーディングの勉強は続けていきたいと思います。
