現在、Webデザイナー兼コーダーとして勤めている私ですが、このコーディングの知識は学校でも習っていないしプログラミングスクールを受講していたわけでもありませんでした。
独学で、かつ本一つでHTMLとCSSを理解することができました。
少し昔のお話ですが、これから独学で勉強していこうという方もスクールを受講しようかなと悩んでいる方も、まずは一度読んでいただければある程度参考になるかなと思いますので書き記していきます。
関連記事: 未経験からWebデザイナーに転職するまで＆してからやったこと
勉強法！きっかけはCSSを使った趣味サイトを作りたいという思いから
まず、なぜHTMLやCSSなどのWebコーディングの勉強を始めようと思ったのか？という部分です。
仕事で必要だから？転職のために必要だから？趣味でWebサイトを作りたいから？なんとなく？…などなど。
私はポートフォリオとなる作品紹介サイトを作りたく、作品を皆に見てもらいたい思いとモチベーションから勉強をはじめました。
中学生の時にHTMLだけちょっといじったのですが、それだけだと本当に素人感丸出しのサイトしか作れないので… 本腰を入れようとしました。
何気なく手にとった本とは
やっぱり手を動かして覚えたいと考えたため、まず実践型の本を探した結果以下の本を購入しました。
もう中古でしか販売されておらず、内容もXHTMLのもので今からすると古い内容なのですが、それでもCSSを理解するのに十分すぎる内容でした。
完成図となるWebサイトが最初の方で示され、それではこういったWebサイトをAdobe Fireworks CS6(今はサポートされておらずフォトショかイラレ、XDが使われていますが)を使って画像パーツを作り、実際にコーディングしてみましょうという構成です。
今だと↓こういった本が入門向けでわかりやすいのではないでしょうか。
また、どうしても本選びに悩む…という方は以下の記事を参考にしてみて下さい。
面倒くさがりな性格のおかげで効率よく学習することができた
それでは実際に本を読み進めながらコーディングをしていくのですが、私は思いました。
「本にあるサンプル通りのサイトを作っても、また自分のサイト作るのに一から作らないといけないし面倒だな」
という面倒くさがりな考えが出てしまいました。
そこで、本の内容と同じ進め方で「自分が作りたいサイトに置き換えよう」と考えたのです。
こうすればやり直さずに済む上にCSSのことが理解できるし、そのついでに自分のサイトも徐々に出来ていく。
たとえば、float: leftで左側にメニューを置きますという解説があれば、自分のサイトは右側に置きたいからfloat: rightだな！という感じです。
他にも、余白を指定するpadding: 10pxというサンプルであれば、自分のサイトだったら30px空けたいからpadding: 30pxか、なるほど！とか。
そんな単純な気付きを繰り返しつつ手間が省けていいな〜 って思いながら、案外すんなりと作成することができました。
※ちなみにその当時に完成したWebサイトがこちらに残っています。
さらにちなみに、CSSをほとんど知らずホームページビルダー頼りだったさらに昔のWebサイトがこちらです(笑)
本に載っていないテクニックについてはGoogle先生に聞けばだいたい理解できました。
基本的なコーディング方法さえ分かれば、あとはWeb検索でなんとかなるもんなんだな、と気づきました。
いくつかのWeb制作依頼をうけて知識を身につけていった
実践で刃を研ぎ澄まし、実績で武器と認められる
さて、前項を通して自分のポートフォリオサイトが完成しました。
と、一人で満足していたのですが…
それからの出来事、当時勤めていた会社からWebページを作って欲しいというお声がけが。
Webページ作るのが好きですよ〜と、作ったWebサイトを見せたことがあったので、それを見てくれた上でのお声がけだったのかと思います。
これが最初の実務における実践。
次に、DTM(PC上で音楽を作ること)をやっている同級生から自作曲の特設サイトを作って欲しいという依頼が。
同級生とイメージのすり合わせなど打ち合わせを通じて3度ほどサイトを作成しました。
…という感じで、Web制作における実力が実践を通して徐々に身についていきました。
これらを通して気がついた点が、
- Webコーディングを勉強してなにか一つサイトを作る
- そのサイトを見て誰かが依頼をする
- その完成品(実績)をみて他の誰かがさらに依頼する
- 自分の経験と実力が積もっていきレベルも上がる
といった好循環が生まれていることです。
残念ながらこれらで金銭が発生したことはないのですが、上手くやれば副業レベルにまで到達できるかもしれませんえ。
自信がついたので転職を目指した
そんなこんなでそれなりにWebサイトを構築できるようになったので、ある日Web業界に転職を決めました。
そうすれば本業でもコーディングを行うようになり、より早くレベルアップします。
異業種からの転職にも関わらず幸い2社から内定を頂いたので、現在はWebデザイナー兼コーダーとして仕事を続けています。
そのあたりの詳しい経緯は以下の記事にてまとめていますので、よかったらご覧ください。
まとめ
最初の勉強法としては、
”実践型の入門書を読みながら自分の作りたいサイトに置き換えて学ぶ”
ことです。
その勉強を活かすためには、
”作ったサイトを実績として他者にアピールする”
と、お仕事をもらえることがあります。
アピール先は周りの人にさりげなく伝えてみるか、クラウドワークスなどで実際のお仕事を自分から募集してみるなどをすると、実際の経験や知識を積むことができるのでオススメです。
ぜひ、今後もWebの世界は広がっていくはずなので、これから学ばれる方はトライしてみてくださいね。
