こんにちは、きゅんです(@kyun_anothercas)
今日はプログラミングでも最も？人気のあるhtml/cssのコーディングについて書いていきます。
この記事はコーディングをしてみたい、でもどうやって学習するの？という方とある程度コーディングできるけど、もっとすんなりコーディングできるようになりたい！という方向けに書いています。
[voice icon=”https://loop-bitter.com/wp-content/uploads/2019/05/usagi02.png” name=”うさぎ” type=”l”]htmlとcssのコーディングって難しくない？プログラミングスクールにいくべきかな？[/voice]
[voice icon=”https://loop-bitter.xyz/wp-content/uploads/2018/07/image3.png” name=”きゅん” type=”r”]スクールに行くのも一つの手だけど、まずは自分でも学習ができる方法があるからそれを紹介していくよ！[/voice]
今現在ではプログラミングスクールやprogateなどプログラミングへの学習環境が増えているので学習はしやすくなっていると思いますが、自分でもある程度学習ができるので参考にしてみてください。それでは書いていきます！
HTML/CSSのコーディングは稼げます
そもそもコーディングをしてみたいなと思う方は一番疑問に思うかもしれませんが、ぶっちゃけ稼げるのか？と考えると思いますが。コーディングは稼げます。
クラウドソーシングや企業でのコーダーの募集はやはり多いと思ってもいいです。みなさんが目にするwebサイトを構築ということもあり人手が足りないのか？と思うほどです。
そもそもコーディングって？
そもそもコーディングとは、webサイトを目にしていると思いますが、そのサイトを表示させるためにプログラムを書いていくこと、です。
表側をフロントエンドといい、バックエンド（webサイトを表示させるために裏側でプログラムを書く人と今は思っておいてください。）この二つでwebサイトをみなさんが閲覧できるようになっているのです。ありがたやー
コーディングはHTMLとCSSを使ってwebサイトをデザイン通りに作っていく作業のことをいいます。
しかし、これではまだざっくりすぎますね・・・
デザイナーさんからデザインが降りてきてデザインを基にコーディングをしていきます。デザイン通りも具体的すぎましたが、もっと詳細にいうと「タグ」というものを打ってコーディングをしていきます。
タグってなに？
下記の文字を囲っている文字をタグと言われています。
[box class=”black_box” title=””]<p>はろーわーるど</p>[/box]
上がHTMLで
下がCSSといわれているものです。
[box class=”black_box” title=””]. p {
color:#ccc;
}[/box]
文字を表示するのがHTMLで文字を装飾するのがCSSだと覚えておきましょう！
コーディングはタグを理解していき、適切なタグを使ってwebサイトのページを構築していきます。コーディングで大事なことはSEOをしっかり意識して適切なタグを使って行かなければなりません。SEOの話も長くなってしまうのでここでは割愛させていただきます。
HTMLとCSSを理解することがコーディングの上達の近道だと思います。
ここで大事なのはタグを覚えることではありません。全て覚えようとは思わないでください。
全て覚えるなんて時間がかかりますし効率が悪いです。
最初はググって「このタグはこういった意味なのかー、これ使えばデザイン通りじゃん！」くらいの心意気で問題ありません。
[voice icon=”https://loop-bitter.xyz/wp-content/uploads/2018/07/image3.png” name=”きゅん” type=”r”]ここで小話だけど・・デザインを作成する前にディレクターからも要望があったり、その上はクライアントから・・と長くなるのでここではコーディングについて書いていこうと思いますね！[/voice]
大事なポイントをまとめてみました。
[box class=”blue_box” title=”ポイント”]・コーディングは稼げる
・コーディングはwebサイトを表示する上で大事な作業
・タグは覚えるのではなく理解をする
[/box]
コーディングだけでなくデザインツールも
コーディングで案件を取っていきたいのであれば、デザインツールが使用できることも必須になっていきます。
デザインツールとはphotoshopやIllustratorなどのことです。最近ではSketchやAdobe XDなども聞くことが多くなってきました。
[box class=”green_box” title=”ラベル名”]Adobe
[/box]
photoshopやIllustratorを使ってデザインを確認しながら、HTMLやCSSを書いていくことがほとんどです。デザインを確認しながらデザイナーさんと相談したりコーディングを進めていきます。
なので最低でもphotoshopを使用できるようになることを勧めます。画像をスライスしたり色味を確認したり文字のサイズ感を確認することはマストでできないと厳しいかもしれません。
もう一つ大事なことは、コミニュケーション力も大事ですね。プログラミングは人と話すことはない。と思う方もいるかもしれませんが、その逆でめちゃめちゃ人と話すことを要する仕事です。デザイナーさんやディレクターさんともやりとりを要するので、結構話すことが多かったりします。
[box class=”blue_box” title=”ポイント”]・photoshopは使えるようになろう
・画像のスライスはできるようになろう
・コミニュケーション力も必須になってくる[/box]
[quads id=1]
ここからコーディングの学習方法
これまではコーディングとはどんなことか？コーディングは稼げるのか？デザインツールも使えるようになるべきかを書いていきました。僕もコーダーとしての業務は8年になるので確かな情報と思ってもらって構いません！
いよいよ本題。勉強方法をご紹介します。完全な初心者から段階を追って説明をしていきますので参考にしていただければと思いますー
まずは自分の作りたいサイト(ゴール)を決める
自分の好きなサイトやこういったサイトを作ってみたい！と思うサイトをピックアップして１つ決めてください。
大事なのはサイト内の動きの部分は気にしないこと。Javascriptで動きをつけたりは無視してトップページのぱっと見の表示を真似したいなと思えるサイトを選びましょう。
[voice icon=”https://loop-bitter.xyz/wp-content/uploads/2018/07/image3.png” name=”きゅん” type=”r”]こんなサイトを作って人を驚かしたいぜ！という気持ちを持ちましょう。[/voice]
注意したいのは、アーティストやアパレル系のサイトです。動きも多く複雑なデザインでかっこいいのですが、初心者には難しいと思います。まずはコーポレートサイトで自分の好きなサービzを行なっている会社のサイトの真似をするつもりで選んだ方が無難です。
書籍でコーディングのおおまかなルールを理解
作りたいサイトは決まりました。これからコーディングだ！と思う方もいるかもしれませんが、いきなり手を動かすのはあまりおすすめしません。どんな仕組みで動くのかを把握した上で、手を動かしていったほうがいいです。
僕は下記の本を使って勉強をしていました。
これが本当にフルカラーで見やすく、しっかりと仕組みを理解することができました。今現在だと新しくなっているのでもっと丁寧に書いているかもしれません。(僕が読んでいた時は青色でした)
一回読んで理解はできなかったので何回も読み返しましょう。
実際にコーディングをしてみよう！
さぁ！本を見ながらコーディングしましょう！というのは鬼すぎますねw
でも僕が勉強していた時はこのまま実際に手打ちでコーディングしていました。しかもテキストエディタというパワープレイぶりですw
オススメするのはドットインストールとProgateをオススメしたいと思います。
まず何をするべきか初心者の方はわからないのでこういったプログラミングのサービスを利用することをオススメします。ドットインストールは動画で解説してくれるのでその通りに手を動かしていくのもいいかもしれません。
Progateは問題形式で勉強していき、自分のステータスを高められるのでモチベーションは維持できるので学習するにはもってこいですね。
無料でもある程度はすすめられるので参考にしてみてください。
コーディングの独学は難しくない
ぼくもswiftを勉強しているのですが、独学って相当意思を硬く、モチベーションを維持しないと難しいと思っています。何より普通の勉強と違って 答えがすぐにみつからないことに問題があると思っています。
プログラミングの場合はエラーを出してしまうとその原因をさがすのに時間がかかってしまいます。この時に自分で検索する力も大事なのですが、理解できていない状態で検索をしても5時間以上エラー探しに時間を費やした。なんてこともあります。
なので、プログラミングサービスか、スクールに通うのもありかなと思います。
ある程度コーディングができる人の勉強方法
ある程度は教本やぐぐらなくてもコーディングできるようになったひと、またはできる人は最初に目標設定した、作りたいサイトを見よう見まねでコーディングしてみましょう。
ここで大切なのはデベロッパーツールやソースを確認しての作業は、今はするのはやめましょう
余白感だったりフォントの大きさや色味などは自分で見てコーディングしてみてください。
そうしていくとサイトの余白や文字の大きさなどのwebのルールがわかってくると思います。コーディングが一通り完了したら、元々のソースを確認して答え合わせをするといいです。
ソースレビューをしてもらう
1からコーディングができたら知見のある人にソースレビューをしてもらえると最高です。
詳しくつっこんでもらえると自分のためになっていいですね。レビューを受けていると否定されているようでイライラしてしまうかもしれませんが、ここは勉強するつもりで聞きましょう！
ソースレビューを行うことはその人のレベルをしっかり見てもらえることと、に繋がります。ソースレビューをしてもらえる機会があれば積極的に行ってもらいましょう。
[quads id=1]
気をつけたいこと
コーディングは敷居も低く誰でも仕事に繋げやすい仕事だなと思っています。しかし敷居が低い分競合も多いのも事実です。
HTMLとCSSは他のプログラミングと違って敷居も低く、記述を覚えてしまえばwebサイトの更新や修正の案件が獲得できてしまいます。コーディング案件はランサーズやクラウドワークスにも結構募集しているので、気軽に応募ができてしまいます。
実際にランサーズでもコーディング案件は多いのが現状です。
こちらから案件が確認できます。
[voice icon=”https://loop-bitter.com/wp-content/uploads/2019/05/usagi02.png” name=”うさぎ” type=”l”]え！じゃ案件獲得って難しいんじゃん・・一つの依頼に提案20~30はある・・[/voice]
[voice icon=”https://loop-bitter.xyz/wp-content/uploads/2018/07/image3.png” name=”きゅん” type=”r”]コーディングの問題は競合が多いことなんだ・・プログラミングスクールですんなり学習ができるため、提案の数も多くなってるのも事実[/voice]
ではどうするのか？
まずは地道に提案をし続けることに限ると思います。小さい依頼をこなしていって実績が増えていくと、提案も通りやすくなります。別案件での依頼もくることがあるので、地道に提案し続けましょう。
個人的に思うこと
一通り勉強方法をお伝えしましたが、コーディングは奥が深いです。他のプログラミング言語を理解する人からすると「これはプログラミングじゃない！」という方もいました(某プログラミングスクール関係者)そこまで差別的にしなくてもいいかもしれませんが、それでもやり方が多種多様で難しいんですよね。
HTML/CSSのコーディングってやり方といいますか、流派？もたくさんあります。あの現場ではこのやり方だったのが、ここの現場では違うやり方だったりと、簡単そうに見えてすごく難しいんです。
だけど基本を理解していると柔軟に対応できますのでしっかり理解をしておきましょう！
