初心者にオススメのweb制作の勉強方法

WEB制作の仕事をして、9ヶ月。その前にセブで3ヶ月間、ITの勉強をしていた。スクールではHTML、css、wordpress、php、photoshop、illustoratorなど。ITの勉強をし始めるときって、何から勉強したら良いか分からない。今でも分からないところは、あるけど、なんとなく概要が掴めてきた。私の経験をもとに、初心者に、おすすめの勉強法を書きたいと思う。私はフロント側の仕事をしているので、バックエンドのプログラミングの勉強方法は、自分でも、まだよく分かっていない。なので、フロントの勉強方法について書こうと思う。

とりあえずprogateとドットインストール

鉄板だけど、progateとドットインストール。基礎は、ここらへんで分かるようになる。progateは特に手を動かすから、良い練習になる。HTMLやcssは何回かやっていれば、覚えるようになる。はじめの方って環境づくりも大変だった。テキストエディタとか、ローカル環境つくりとか。テキストエディタはsublimeをずっと使ってる。ローカルはmacのときはmamp、windowsのときはxamppを使ってた。まぁあとyoutubeで動画探したり、udemy使ったりしたら、基礎練習になる。何個もやる必要はないと思う。udemyはネット上の教材みたいな感じ。無料のものもあったり、セールしてるものがあったりする。とりあえず、基礎知識をつけることから始めると良い。

1ページ作成してみる

基礎練習が終わったら1ページ、自分で作成してみると良いと思う。好きなように作成するのもありだし、企業のLPとかを模写してみるのも良いと思う。参考サイトを模写してて、分からないことがあれば、ディベロッパーツールで実際どうやってるか確認してみたらいい。以下、参照。あとPinterestっていうアプリがあるから、それでwebサイトとか検索すると参考にできそうなものがでてくるから、それ模写するのも良いと思う。何より手を動かすのが大事だから、ある程度の基礎ができたら、作成するべき。基本的に使うことって、横並びとかはfloat:leftよりdisplay flex。空白はmarginかpadding。簡単なレイアウトはこれで出来るはず。

ディバロッパーツールを使ってみる

右クリック、要素の検証で開く。ディベロッペーツールは、どういう風に作っているかが分かるから、勉強になる。作成する人によって、違いがあるから、見ると、わかりづらいものも多い。ディベロッパーツールの使い方は検索したら出てくるけど、ツール上でデザインを変えることができたり、使用しているものを消して、その要素が、どのように使われてるか分かったりできる。あとfont-size何かとか、幅どれくらいかとか。スマホにしたときの表示とか。使い方は色々あると思うから、ググると良い。

ソースコードをみる

右クリック、ページのソースを表示で、ソースコードが見れる。HTMLが表示される。cssやjsは、ファイルをクリックすれば、見ることができる。コマンドFで何がどこにあるか分かるので、この処理は、どのjsを使っているか調べることができる。jsの処理は該当のHTMLのclass名を検索するといい。jsのコードを、一個一個検索して、意味調べて、勉強することもある。全然わからないものもあるけど、それ続けてたら、なんとなくわかってきた。HTMLもclassの付け方、分かるから良い。サイトのによってclassの付け方はまちまち。私はBEM使ってるから、それが使いやすい。class名、考えるのは、けっこう面倒(笑)

プラグインを使う

webサイトだと、jsのプラグインを使っていることが、ほとんどだと思う。何枚かの写真が動くsliderとか、記事がフェードイン、フェードアウトするものとかクリックしたたら子ページ出てくるモーダルとか。動きがあるものはjsで処理していることが多い。そうゆうときは、スライダーとかスクロールしたらフェードインとかググってみる。そうするとプラグインが出てくる。プラグインの入れ方も色々あるかもしれないけど、だいたい、そのプラグインのcssいれて、min.jsを貼り付けて、jsにfunction記載って感じ。あとオプションがあるから、場面によって変える。swiperだったら、画像の切り替え速度変えるとか。

wordpressを使う

最近、仕事中、暇な時、wordpressの勉強してる。仕事でするから。初めてwordpress作った時(3年前)は、HTMLの触りかた、分からなかったな。とりあえず、FTPでデータ落として、カスタマイズの勉強すると幅が広がると思う。

ざっくり書いてみた。
私の知識なんて、ペーペーだけど、何かの役に立てば良いかなと、
てか本当、始めとかなんも分からなさすぎて、何から始めたら良いか分からなかった。
でも今、会社に頼りすぎてるのは否めないなと思う。ある程度、自分で理解しないと、やってても、前にすすまない。この数ヶ月で復習して、あーこうゆうことかって、ちょっと掴めてきて、あーじゃあどうゆうことなんかなって思える。コツコツって感じ。

コメント