HTML/CSSのコーディング初心者のためのおすすめの勉強方法を教えます




本日はコーディングについて書いていこうと思います。
絶賛コーディング案件対応中の僕が、初心者目線でおすすめの勉強方法を紹介しようと思います。今現在ではプログラミングスクールやprogateなどプログラミングへの学習環境が増えているので学習はしやすくなっていると思います。それでは書いていきます!

 

そもそもHTMLとCSSって?

ハイパーテキスト・マークアップランゲージの略です。そうなんですちゃんとした名前があるんです。
webサイトを表示するために必要な言語でタグと呼ばれるものを記述してルールに沿って書いていきます。CSSもカスケーディング・スタイル・シートという名前があり、HTMLで作成した要素に色をつけたり、文字サイズをきめたり装飾をおこなったりします。

ざっくり説明するとHTMLとCSSはwebサイトを表示する上で必要な言語になってきます。if文や関数を使うこともないのでプログラミング初心者にはとても入りやすい言語だと思います。

 

コーディングってなに?

コーディングはHTMLとCSSを使ってwebサイトをデザイン通りに作っていく作業のことをいいます。
デザイナーさんからデザインが降りてきてソレを基にコーディングをしていきます。デザインを作成する前にディレクターからも要望があったり、その上はクライアントから・・と長くなるのでここではコーディングについて書いていこうと思いますね!
photoshopやIllustratorを使ってデザインをみながらHTMLやCSSを書いていくことをコーディングと言います。

 

できたら最高なjQuery

昔と比べて昨今ではコーディングで求められることが大きくなってきました。デザイン通りに静的なサイトを作れるより動的なサイトを作成できることを求められることが大きくなってきているなーと思います。

例えばjQueryを使った動きのあるさいとだったり、PHPを用いてWordPressサイトの構築など最近だと最低限ここまでできることが前提になってきてしまっています。(案件も特にWordPres系が多いです)

 

HTMLとCSSのコーディングの勉強方法

いよいよ本題。勉強方法をご紹介します。完全な初心者から段階を追って説明をしていきますので参考にしていただければと思いますー

 

まずは自分の作りたいサイト(ゴール)を決める

自分の好きなサイトやこういったサイトを作ってみたい!と思うサイトをピックアップして1つ決めてください。ここで大事なのはサイト内の動きの部分は気にしないこと。Javascriptで動きをつけたりは無視してトップページのぱっと見の表示を真似したいなと思えるサイトを選びましょう。

 

書籍でコーディングのおおまかなルールを理解

いきなり手を動かすのはあまりおすすめしません。どんな仕組みで動くのかを把握した上で手を動かしていったほうがいいです。僕は下記の本を使って勉強をしていました。

これが本当にフルカラーで見やすく、しっかりと仕組みを理解することができました。今現在だと新しくなっているのでもっと丁寧に書いているかもしれません。(僕が読んでいた時は青色でした)

一回読んで理解はできなかったので何回も読み返しましょう。

 

実際にコーディングをしてみよう!

さぁ!本を見ながらコーディングしましょう!というのは鬼すぎますねw
でも僕が勉強していた時はこのまま実際に手打ちでコーディングしていました。しかもテキストエディタというパワープレイぶりですw

オススメするのはドットインストールProgateをオススメしたいと思います。
まず何をするべきか初心者の方はわからないのでこういったプログラミングのサービスを利用することをオススメします。ドットインストールは動画で解説してくれるのでその通りに手を動かしていくのもいいかもしれません。

Progateは問題形式で勉強していき、自分のステータスを高められるのでモチベーションは維持できるので学習するにはもってこいですね。
無料でもある程度はすすめられるので参考にしてみてください。

 

独学は難しい、は本当なのか

ぼくもswiftを勉強しているのですが、独学って相当意思を硬く、モチベーションを維持しないと難しいと思っています。何より普通の勉強と違って 答えがすぐにみつからないことに問題があると思っています。

プログラミングの場合はエラーを出してしまうとその原因をさがすのに時間がかかってしまいます。この時に自分で検索する力も大事なのですが、理解できていない状態で検索をしても5時間以上エラー探しに時間を費やした。なんてこともあります。

なので、プログラミングサービスか、スクールに通うのもありかなと思います。

 

ある程度コーディングができる人の勉強方法

ある程度は教本やぐぐらなくてもコーディングできるようになったひと、またはできる人は最初に目標設定した、作りたいサイトを見よう見まねでコーディングしてみましょう。
ここで大切なのはデベロッパーツールやソースを確認しての作業は、今はするのはやめましょう

余白感だったりフォントの大きさや色味などは自分で見てコーディングしてみてください。

そうしていくとサイトの余白や文字の大きさなどのwebのルールがわかってくると思います。コーディングが一通り完了したら、元々のソースを確認して答え合わせをするといいです。

 

ソースレビューをしてもらう

1からコーディングができたら知見のある人にソースレビューをしてもらえると最高です。
詳しくつっこんでもらえると自分のためになっていいですね。レビューを受けていると否定されているようでイライラしてしまうかもしれませんが、ここは勉強するつもりで聞きましょう!

 

コーディングは奥深く難しい

一通り勉強方法をお伝えしましたが、コーディングは奥が深いです。他のプログラミング言語を理解する人からすると「これはプログラミングじゃない!」という方もいました(某プログラミングスクール関係者)そこまで差別的にしなくてもいいかもしれませんが、それでもやり方が多種多様で難しいんですよね。

HTML/CSSのコーディングってやり方といいますか、流派?もたくさんあります。あの現場ではこのやり方だったのが、ここの現場では違うやり方だったりと、簡単そうに見えてすごく難しいんです。

だけど基本を理解していると柔軟に対応できますのでしっかり理解をしておきましょう!

 

個人的に思うこと

HTMLとCSSを理解できたらjQueryに入ってPHPさえ理解できれば結構案件取れるようになります!