副業や在宅の仕事を始めるために、コーディングを学ぼうという人は多いですよね。でも実際にやり始めると
コーディングを学ぶのに良い教材が知りたい
どうやって仕事を獲得すればいいの？
と色々わからないことが多いですよね。そこでこの記事では、
- Webサイトのコーディングに必要な知識
- コーディングの順番
- コーディングの学び方
を初心者の方でもわかりやすく解説します。
そもそもコーディングとは？
Webサイトをコーディングするということは、Webサイトのデザインをコンピュータにわかる言葉で表示させるように指示する作業です。
Webサイトのコーディングに必要なことは？
言語について知る
Webサイトを作るには、以下の3つの言語でコーディングができるようになる必要があります。
- HTML
- CSS
- JavaScript（jQuery）
あなたもよく目にするWebサイトは、この3つの言語で作られています。HTMLとCSSだけでも良いのですが、動きがないサイトになってしまいます。私たちが普段見慣れているWebサイトは、画像が自動でスライドしたりお問い合わせフォームがあったりなど自動で動いたり何かしら動くようになっています。
また仕事の案件でも最低限HTMLとCSS、JavaScriptのスキルが必要となります。そのため趣味で終わりではなく仕事を受けたいと思う場合は、HTMLとCSS、JavaScriptを扱えるようにしましょう。さらに詳しく知りたい人は、こちらの記事をチェックしてくださいね。
サイト構造について理解する
コーディングを始める前に、ページがどのような枠組みで構成されているのかを理解する必要があります。Webページはいくつものパーツの集まりで作られています。そのパーツごとにどのようなレイアウトやデザインかを理解していないとせっかく作ったレイアウトが崩れてしまう場合があります。
Webページは図のように、大きく分けて3つのパーツで構成されています。
-
- ヘッダー
サイトのロゴやタイトルがある部分です。
-
- メイン
文章や動画、画像などが表示されているメインコンテンツです。
-
- フッター
メインより下部にある部分で、コピーライトや運営者情報などが表示されている部分です。
ヘッダーとフッターは基本的に全ページで共通の内容が表示されます。
どんな順番でWebサイトをコーディングする？
Webサイトを制作するときは、まずHTMLとCSSで全体の構造を作っていきます。サイト構造について理解するで解説したヘッダーとフッター、メインの大枠ですね。だいたいヘッダーとフッターを先に作り、後からメインを作り込んでいくことが多いパターンです。
全体のレイアウトやデザインを整えた後に、JavaScriptで動きを追加していきます。動きとは例えば、ボタンをクリックすると表示が変化したり、画像がスライドしたりするような動きです。HTMLとCSSでコーディングするよりも、難しい作業になります。
まずはどこかのサイトを真似したりすることから始めましょう。さらに詳しい内容が知りたい方はこちらの記事を参考にしてくださいね。
Webサイトのコーディングを学ぶ方法
独学で学ぶ
まずは自分でやってみたいという方は、学習サイトや本を利用すると良いでしょう。
Progate
学習サイトならProgateがオススメです。Progateはゲーム感覚で学習ができるので、飽きにくく楽しみながら学習を進めることができます。また基本部分は無料で学習できるところも、気軽に学習を始めたい初心者にはオススメです。
デザインの学校 これからはじめる HTML & CSSの本
表紙にも書かれている通り「一番やさしいホームページ制作の入門書」です。今まで全くHTMLやCSSについて学習をしたことがない初心者にオススメの一冊です。サンプルが入ったCD-ROMが入っているので、この一冊があればWebサイトが作成できます。
スクールで学ぶ
独学でWebサイト制作について学ぶのは、限界があります。基本的なことは学べても、実際に仕事を受けれるレベルになるには、実際に会社に入って実務を経験したり詳しい人に教えてもらいながら学習する必要があります。
どこを選べばいいのかわからない
なんとなく緊張する
いざスクールにいきたいと思っても、なかなか難しいですよね。お金をかけて学習するなら、スクール選びに失敗したくないですよね。そこでオススメなのが、無料カウンセリングです。
多くのプログラミングスクールでは、お試し体験ができる無料レッスンを設けています。まずはそこでどんな雰囲気のスクールなのか、どんな内容を学習できるのか体験してみましょう。
しかし中には、そもそもどんなことを勉強すればいいのかわからないという人もいますよね。そういう人はたくさんあるスクールから、どんなコースが自分に合っているのかがわからず選べずじまいになってしまいがちです。
そんなあなたには弊社、侍エンジニアの無料カウンセリングを受けてみてはいかがでしょう？他のスクールとは違い、プロのコンサルタントがあなたが学ぶ目的を明確化し最短で学習するための学習プランを提案させて頂きます。下記のカレンダーより空いているお日にちを選んでお気軽にお越しください。
お急ぎの方はこちらからお問い合わせください。
読み込みに失敗しました。
大変お手数ですが、本ページを再度読み込んでください。
再度読み込んでも、読み込み失敗が起こる場合は
こちらからお問い合わせください。
カウンセリングはオンラインにて実施しております。
※予約完了後に、カウンセリングのためのURLやIDなどをメールにてご案内します
1.ご希望の日時を選択してください
2.必須事項を入力してください
ご予約ありがとうございます！
予約が完了しました。ご予約情報とご参加前の準備をご確認ください。
【ご予約情報】○月○日(△) ○○：○○〜
カウンセリング参加に向けてのご準備
②LINE友だち登録
人生を切り開いた卒業生の事例をご紹介！
LINEトークで簡単にお問い合わせができます。
※記入いただいたメールアドレスに確認用メールをお送りしておりますのでご確認ください。
※オンラインカウンセリングはGoogle Meetにて実施します。URLが発行したら別途ご案内いたします。
※メールが届かない場合は、SAMURAI ENGINEERサポート（support@sejuku.net）までご連絡ください。
まとめ
いかがでしたか？Webサイトをコーディングするには
- ページの構造を理解、設計する
- ヘッダーまたはフッター、メインの順でコーディングする
必要があることが理解できましたね。Webサイトを自分でコーディングできるようになるには、実際に作ってみることが一番の近道です。また独学だけではWebサイトの仕事を受注できるレベルになるまでに、とても時間がかかってしまいます。
人によってはモチベーションが保てずに、挫折してしまうことも少なくありません。行き詰まったり、これ以上何をすればわからない、という人はスクールで学習することも考えてみましょう。
