1から始めるコーディングの勉強方法【webサイトを作る】まなびアクト初心者がプログラミングを学びIT業界に就職・転職する為の情報をお伝えしていますHOMEHTMLコーダー1から始めるコーディングの勉強方法【webサイトを作る】1から始めるコーディングの勉強方法【webサイトを作る】2019年8月21日HTMLコーダーツイートシェアはてブ送るPocket主にHTMLコーディングでwebサイトを作る為に勉強方法を知りたい方向けの記事です。HTMLコーダーになる為の情報は以下の記事でもまとめていますので参考にしてみてください。覚えなければいけないのは主に以下の3つです。HTMLCSSJavaScriptHTMLwebサイトを構築するマークアップ言語となります。プログラミング言語とは異なり、何か処理を記述するわけではないので難易度は低いです。習うよりなれろで入門書か、無料でオンライン学習できる範囲でまずはやってみるのが手っ取り早いです。【全部無料】HTML&CSSの学習方法(入門編)を試してみた【初心者向】2019年6月24日ここは基本構造がわかればさっさと次のステップへ移ってしまってOKです。CSSHTMLは各要素を配置するだけ、CSSでは文字の色やサイズ、レイアウトなどスタイルを指定する言語になります。こちらもプログラミング言語とは違い、ただ決められた記法で各々のスタイルを指定していくだけなので難しくないです。HTMLの学習を始めた時点でセットで覚えていくことになるので、CSSだけ別途勉強しなくても並行で進められます。JavaScriptこちらはプログラミング言語になりますので少し難易度が上がってきます。webサイトではスライダーやアニメーションなどの動きを実装する際に利用します。HTMLコーディングではイチからJavaScriptを書くようなことはなく、既に用意されたライブラリを使うことがほとんどです。ファイルをダウンロードしてきて設置、指定の記法で読み込んで利用するということができれば最低限OKです。ライブラリはドキュメントが英語なので、英語ページを見るか、日本語の解説記事を探すことができれば大方何とかなります。勉強の次にすることはHTMLまわりの勉強は上記の基本的なことを1週間もやれば十分でしょう。あとはいくら勉強しても実践的なことは学べません。実践的なことを学ぶにはどうするか?ということですが、それは実際のサイトを同じように作ってしまえばOKです。現在公開されているサイトはプロのエンジニアが作成したサイトですので、同じものを作れるならあなたもコーディングができるレベルと言っていいでしょう。何をつくればいいのかわからないとはいえいざ真似して作ってみようとすると、どのサイトを参考にすればいいのか結構迷うんですよね。いう場合は実際に仕事としてどんなサイトの作成依頼があるかを参考にしてみたらいいです。クラウドワークスやランサーズといったサイトでは「こういったサイトを作ってください」という依頼がたくさんあります。いうサイトの様に、といった具合に参考サイトのURLがある場合もあるのでそれを真似してもいいでしょう。全部真似しなくてもいい真似するサイトは見つかったけど、縦にとても長く、これをすべて模倣するにはくじけてしまいそうだっていう場合も多いと思います。いう場合は同じような構成のブロックはカットしてしまってOKです。極端な話、同じ手法で組めるような場所は省いてしまっても大丈夫です。コーディングの練習なので、組んだことが無い部分だけをピックアップして練習台にすれば良いでしょう。実際に私が練習用にXDで作成した記事を参考までに載せておきます。【HTML&CSS初心者向け】模写コーディング練習用サンプル【XDデザイン】2019年8月11日あなたが就職を目指している場合もしあなたがコーディングスキルを磨いて正社員としてどこかの企業に就職しようという目的がある場合は、少し注意した方が良いかもしれません。いってHTMLコーディングだけができる正社員の募集というのはかなり少ない、というかほぼない印象です。それは正社員として働くようなwebデザイナーは自分でコーディングもできてしまう場合がほとんどだからです。正社員としてどこかの企業で働くことを目指しているなら次のステップとしてwebデザイナーやwebエンジニアを検討するのが良いと思います。一方で、家で出来る仕事を探している、フリーランスで仕事をしたいという場合にはHTMLコーディングの案件はちょうど良いです。企業としては正社員として雇ってまでじゃなく、必要な時だけ払いきりでコーディングを任せたいというニーズにもマッチします。今の仕事を続けながら、まずはコーディングを副業で始めて経験を積むという選択も有りだと思います。いった仕事を取るにも実績作りやアピールが必須になってきますので、決して楽な道というわけではないです。コーディングを仕事として受ける際の別費用コーディング案件を仕事として受けるのに一つ注意点があります。案件ではデザインカンプと呼ばれるデザインを頂き、それを参考にコーディングを行っていくという流れがほとんどです。そのデザインカンプがフォトショップやイラストレーターで作られていることが多いという点です。adobe製品の利用料フォトショップやイラストレーターはadobeの製品となり、購入しなければ利用できずファイルも開けません。買い切りではなく月額制、年額で月税抜き2480円(フォトショップは980円のプラン有り)さらに単月で利用しようとすると税抜きで月3480円。2~3万円の案件を受けるだけではadobe製品の利用料だけで下手すれば赤字になる可能性すら出てきます。オンラインスクールでの学生割は大人も可能デジタルハリウッドやヒューマンアカデミーといった社会人でも利用可能なコースでadobe製品を学割で利用することができます。現時点では年4万円いかない程度といった値段感です。これであれば4万円前後の案件を1件取れればひとまず利用料は回収できるので、あとは1年間でどれだけ仕事を受けられるかですね。実はどちらも7日間ほどの無料試用はできるので、ある程度準備が整ったら実際に使って練習してみるのがいいでしょう。PSD・AIのデザインカンプからHTMLコーディングを行う方法2019年7月24日その7日間でがっつり練習して問題なさそうであれば、ひとまず利用はせずに仕事を取れるように頑張り、実際に仕事が取れたらお金を払って利用を始めるという方法が一番効率が良いかもしれませんね。最近ではフォトショップやイラストレーターだけでなく、XDでデザインカンプが上がってくることも増えています。XDも同じくadobe社の製品ですが、こちらは無料プランで普通に利用が可能です。お金が勿体ないという方はデザインカンプがXDの案件を選んで受注するという選択も有りでしょう(確実に対象案件数は減ります)XDによるデザインカンプからのコーディング練習記事もありますので参考にしてみてください。XDのデザインカンプからHTMLコーディングを行う方法|画像書き出し等2019年7月17日まとめコーディングの勉強は、正直基本だけ抑えたら後は実践で調べながら、学びながらといった形になります。どんな本やサイトにもあなたが作るサイトそのものの作り方はそのものズバリで載ってはいないので、調べて自分なりに組んでみて、動かして確認するというフローが必要不可欠です。web系サーバサイドの開発をメインに10年以上お仕事をさせていただいております。