プログラミング、気楽な生き方を中心に発信しています。
  • twitter
  • instagram
  • facebook

WEB制作学習のストラテジー【初心者から中級者を目指す】

こんにちは、たつきです。
WEB制作歴は3年程で、現在はフリーランスをしています。

本記事はWEB制作の基礎である【HTML/CSS】【JavaScript/jQuery】【WordPress】を初心者の方にわかりやすく1から解説していきます。

現在の僕はWEB制作でコンスタントに月10万以上の収益を稼げており、その知識を体系的にまとめたのが「WEB制作学習のストラテジー」になります。月5万〜月10万くらいをWEB制作で稼ぎたいという方には丁度良い知識量だと思います。

この記事はメイン教材として使うのではなく「プロゲート」や「ドットインストール」と併用して読みものとしてご活用くださると効果がより高いと思います。

記事の内容

  • WEB制作のための環境作り【下準備】
  • HTML/CSSの基礎を身につける【初級】
  • JavaScript/jQueryの基礎を身につける【初級】
  • 実際にWEBサイトを作ってみる【実践】
  • WordPress制作の基礎を身につける【中級レベルを目指す】

本記事の目標

コーディング案件からWordPress案件までの必要なスキルを身につける。

この記事の内容が全て理解できれば、既に案件獲得ができるフェーズだと思います。

WEB制作のための環境作り【下準備】

WEB制作のための環境作り【下準備】

WEB制作の学習前に環境作りをしていきます。既にプログラミングのできる環境の方は飛ばしてください。

パソコンの用意【何でもOK】

プログラミングのできるパソコンを用意します。

OSはMacでもWindowsでもどちらでも問題なしです。プログラミングはそこまでスペックは必要ないので、今あるパソコンを使えば問題なしです。

パソコンを持っていないという方は、サクッとMacBookを購入しましょう。OSはどっちでも平気と言いましたが、Mac向けの情報が多いですのでこれからパソコンを購入する方はMac一択だと思います。

テキストエディタをインストールする

パソコンの用意ができましたら、テキストエディタをインストールしていきます。

テキストエディタとは、プログラミングする際のコードを打ち込むためのツールです。自分の相棒となるツールなので、自分の好みに合わせて選びましょう。僕はAdobe社の「Brackets」を愛用しています。

おすすめのテキストエディタは下記の記事で解説しています。

WEB制作に必要な言語

WEB制作に必要な言語はザックリ下記の通りです。

  • HTML
  • CSS
  • JavaScript/jQuery
  • PHP/WordPress

WordPressはプログラミング言語ではないですが、PHPを使いますので含めています。

本記事で学んでいくのは【HTML/CSS/JavaScript/jQuery/WordPress】です。PHPは割と使う場面が少なかったりするので、解説しないです。余裕のある方は勉強してみましょう。

学習期間は3ヶ月〜6ヶ月

学習期間の目安ですが、3ヶ月から6ヶ月ほどを目安にやっていくのが良いかなと思います。

最短で3ヶ月ですので、勉強時間があまり確保できないという方は6ヶ月程かけて学んでいくの良いかなと思います。

僕も【怠惰×地頭悪い】だったので身につけるまで時間がかかりましたが、辛抱強く継続して今ではWEB制作で月10万以上稼いでいるので、継続していけばココまでは誰でも達成可能だと思います。

雑談はここまでにして、環境作りも終わったのでHTML/CSSの基礎から解説していきます。

HTML/CSSの基礎を身につける【初級】

HTML/CSSの基礎を身につける【初級】

HTML/CSSはコーディングをするために必要な言語です。
コーディングとはWEBサイトの見た目を作る事をいいます。

HTMLとCSSの違いを理解しよう

違いがわからないという方が多いかもですが、しっかりと役割が分かれています。

  • HTML:サイトの骨格を作る
  • CSS:サイトの見た目を作る

HTMLでサイトの骨格を作って、CSSで肉付けをしていくイメージです。詳しくは下記の記事で解説しています。

HTMLとCSSの基礎理解

ザックリ違いを理解をした所で、さらに深く学んでいきます。

とはいえ、割と学習しやすい部分だと思いますので気楽にいきましょう。各記事で解説しています。

HTMLの基礎理解

CSSの基礎理解

デベロッパーツールを使いこなす

WEB制作をしていく上で「デベロッパーツール」といわれるGoogleChromeの機能を使う事が増えてきます。

デベロッパーツールはブラウザ上で、スタイルの検証などを行う事ができる便利なツールですので、必要最低限の使い方を身につけておきましょう。

詳しい使い方は下記で解説しています。

レスポンシブ対応を覚える

WEB制作においてスマホ対応は必須ですので、早い段階で身につけていきましょう。

少しだけ癖の強めの書き方をしますが、使い方だけ覚えたら後はコピペで対応できますのでサクッとマンでしまいましょう。

レスポンシブ対応の方法は下記の記事で解説しています。

パスの仕組みと書き方を覚える

プログラミングをしていく上でパスの理解は必須です。

パスとはファイルまで行き方を指示して、そのファイルを読み込むというイメージです。画像、cssファイルなどを読み込む時などに使用します。

基本的には絶対パスと相対パスというのを使ってパスを書いていくのですが、そんなに覚える事はないのでサクッと学んでしまいましょう。

絶対パスと相対パスの書き方は下記の記事で解説しています。

marginとpaddingを理解する

初心者が苦労するポイントであるmarginとpaddingを理解していきます。どちらも要素の余白を設定するプロパティになります。

marginとpaddingをザックリ分けるとこんな感じです。

  • margin:外側の余白
  • padding:内側の余白

コーディングをしていく上でmarginとpaddingは欠かせない存在ですので、しっかりと両者の違いを覚えて自分なりの使い分けのルールを決めましょう。

Flexboxをマスターする【要素を並べる】

要素を横に並べたり、縦にしたりする時は「Flexbox」を使って実装していきます。以前はfloatと呼ばれるもので要素を並べていましたが、今はFlexboxを使うのが主流です。

少ないコードで要素を自由に並べる事ができる便利な機能ですので、サクッと学習していきましょう。一気に覚える必要はなく、使う時にググりながら使えればOKです。

画像付きで分かりやすく解説していますのでどうぞ。

positionをマスターする【要素の位置を決める】

要素の位置を変える時は「position」を使って実装します。

  • position:relative;
  • position:absolute;
  • position:fixed;

上記の3つを使用して要素の位置を指定していきます。
こちらも下記の記事でわかりやすく解説しておりますのでどうぞ。

コラム:この3つで大体のコーディングができる

少し休憩です。
先ほど解説した3つをマスターすれば大体のコーディングはできます。

  • margin/padding:余白を取る
  • Flexbox:要素を並べる
  • position:要素の位置を決める

この3つを使いこなせるようになれば、大体のコーディングはできるようになります。

重要な部分なので、マスターできるように頑張りましょう。

formタグでお問い合わせフォームを作る

WEBサイトに必要になってくるのがお問い合わせフォームです。

大体のサイトにお問い合わせフォームがあるくらい必須なものなので作れるようになりましょう。とはいえ、お問い合わせフォームは大体な形が決まっているのでコピペで大体の形を作る事ができます。

下記の記事でformタグの使い方と汎用性の高いテンプレートを配布しているのでどうぞ。

サイトのナビゲーションを作ろう

WEBサイトにあるナビゲーションを作っていきます。

グローバルナビゲーションと呼ばれており、全ページ共通にあるメニューの事をいいます。

こちらもWEBサイトの必須レベルの要素になるので、作れるようにしていきます。

こちらもサクッと作れるように下記の記事で、コピペで使いまわせるグロナビを配布しているのでどうぞ。

発展:擬似要素と擬似クラスを使ってみる

HTML/CSS最後のレクチャーとして、「擬似要素」と「擬似クラス」を学習して次のステップにいきましょう。

擬似要素と擬似クラスが使えなくても、コーディングはできますが使えるようになる事でコーディングの幅が広がりますので「擬似要素」と「擬似クラス」の存在だけでも知っておきましょう。

下記の記事で詳しく解説しておりますので、軽く読んでおきましょう。

JavaScript/jQueryの基礎を身につける【初級】

JavaScript/jQueryの基礎を身につける【初級】

HTML/CSSで制作したサイトに動きを付けるための言語です。
少し難易度が上がりますが、はじめは何となくコピペで使えればOKです。

JavaScriptの基礎理解

JavaScriptはHTML/CSSで制作したページに動きつけるためのプログラミング言語です。

HTML/CSSと比べると難易度は上がりますので、挫折率が高いかもです。なので、はじめはガッツリ学ばずに最低限の知識だけ身につけておきコピペで実装していくのが良いと思います。

WEB制作に慣れてきて余裕が出てきたらしっかりと学んでみましょう。下記の記事でJavaScriptの基礎を解説しておりますのでサラッと学習しましょう。

jQueryの基礎理解

jQueryはJavaScriptから派生したライブラリと呼ばれるものです。

JavaScriptをより簡単に扱えるようにしたイメージです。簡単なWEB制作でしたらjQueryで事足りるので、こちらの方が使う機会が多いかもです。

jQueryはオワコンと言われたりしていますが、使いやすいですし便利なので全然オワコンじゃないです。下記の記事を読めばjQueryの便利さが少しは伝わると思うのでこちらもサラッと読んでみてください。

コピペで作れればOKです

独自のプログラムなどを作る時は、しっかりとJavaScriptを書けるようになる必要がありますが、よく使うパーツというのはコピペで使えればOKです。

初心者の方は独自のプログラムを作る事はないと思いますので、WEB制作でよく使うパーツのをコピペして使えればとりあえずOKです。

僕が普段使用している、コピペ素材を貼っておきますので、こちら自由に使ってください。

ハンバーガーメニュー

アコーディオンパネル

スムーズスクロール

実際にWEBサイトを作ってみる【実践】

実際にWEBサイトを作ってみる【実践】

各言語を学んだ所で実際にWEBサイトを作っていきます。先ほどまでのはインプットで、ここからはアウトプットの時間です。

学習の流れは下記です。

  • ①:模写コーディング
  • ②:ポートフォリオ作り
  • ③:サイト公開

上記の3ステップでアウトプットしていきます。

①:模写コーディング

既存のWEBサイトを真似してコーディングする練習方法です。

本記事で解説している知識があれば大体のコーディングはできると思います。分からない部分が出てきてもその都度ググれば解決できると思いますので、気合で模写コーディングを頑張ります。

一気に難易度が上がると思います。1つめのサイトは辛すぎて2週間ぐらい掛かるかもですが、WEB制作のコツが掴めると思いますので乗り切りましょう。

模写コーディングの方法は下記で解説しています。

②:ポートフォリオ作り

模写コーディングが終わったら、自分のポートフォリオを制作していきましょう。

ポートフォリオは就活する時や、個人で仕事を貰う時に必要になりますので、1つ作っておく事をおすすめします。

自分のスキルや、模写コーディングで作ったサイトなどをまとめて自分をアピールできるようなサイトを作りましょう。デザインが苦手という方はシンプルなサイトでも大丈夫です。

ポートフォリオの作り方は下記の記事で解説しているのでどうぞ。

③:サイト公開

ポートフォリオを作成したら、実際にWEB上に公開してみましょう。

公開する事で、ブラウザでポートフォリオを確認できるようになります。無料と有料の方法があるので、自分に合う方を選択しましょう。

WordPress制作の基礎を身につける【中級レベルを目指す】

WordPress制作の基礎を身につける【中級レベルを目指す】

大半の方はポートフォリオを作成して満足してしまう方が多いですが、さらに他の人と差をつけたいという方はWordPress制作にも挑戦してみましょう。

WordPressが作れるようになると、扱える案件の幅が広がるのでさらに安定した収益を得る事ができるようになります。

※ポートフォリオ作りで疲れた方は一旦休憩してOKです。自分でペースでコツコツが大事です。

WordPressの自作テーマを作る

簡単な自作テーマを作れるようになる事を目指します。

自分のポートフォリオをWordPress化してみるのが良いかと思います。WordPressの自作テーマはほとんどコピペで作る事ができるので、PHPの知識がなくても何となく制作可能です。

下記で僕なりの自作テーマの作り方を解説しておりますので、サクッと自作テーマを作ってみて下さい。

条件分岐をサラッと理解

自作テーマが作れるようになったら、条件分岐を使ってみましょう。

条件分岐を使う事で、ページによって表示する内容を変えたりする事ができます。条件分岐を使えるようになる事で少しずつWordPressのカスタマイズが楽しくなると思います。ここまで覚えたらゴールです。

おわりに:コツコツやっていきましょう

ここまでくれば、コーディング案件や簡単なWordPress制作の案件はできると思います。実際に僕ができているので大丈夫です。

結構のボリュームだと思いますが、一つの学習の目安として参考にしてみて下さい。毎日コツコツと勉強していけば達成できますので頑張りましょう。

本記事の内容が理解できている方は後は案件に挑戦するのみです。

それではここまで。
ツイッターフォローしてね(笑)