初めてwebページを自作するならまずは写経！レベル別に作り方を解説します

この10週間プログラミング講座では、知識ゼロのプログラミング初心者の方がプログラマーとしてのキャリアをスタートできることを目指す講座です。

第2週目の「JavaScriptとjQueryを勉強するときの注意ポイント2つと学習手順を解説！」をまだ読んでいない方は、ぜひ先にこちらをお読みください。

今週は、第3週目として今まで学んだHTML+CSS (+jQuery) の知識を生かしてwebページを自作していきましょう！

今週の講座を終えるころには、以下のことができるようになります。

では、見ていきましょう。

webページの自作を写経（模写）から始めるべき理由

後にwebページを自作する具体的な方法を紹介しますが、どの方法も写経することを前提としています。

その理由として以下の2点が挙げられます。

初めてwebページを作成するなら全体像の理解が難しい

まず、1つ目の理由として、webページを作成するとき全体像を理解するのが難しい点が挙げられます。

例えば、web制作に慣れている人は全てHTMLを書いてからCSSを実装するなど、構造ができていればレイアウトは後回しでも作ることができます。

HTML全部書いてからCSS設計する男です

— TAK (@tak_dcxi) November 14, 2019

しかし、当然初めてwebページを作成する人が同じように進めると

・本来は必要な要素が不足する
・そもそものタグ構成がイメージできない

など、完成までに遠回りになってしまいます。

したがって、最初はある程度ゴールの目安を設置したほうが効率的に学習を進められるのです。

webページを作成する前にデザインを考える必要があるため

また、完全に0から作成するとなると、どのようなページを作成するかデザインを考える必要があります。

デザインくらい・・・と思われるかもしれませんが、webデザインは初めての人がやると簡単なページでもかなり時間がかかります。

あくまでも目的はwebサイトの制作を通してHTMLとCSS (+jQuery) の理解を深めることです。

したがって、オリジナルのものを作りたい気持ちはぐっとこらえて既存のコピーを作って学習しましょう。

【レベル別】webページを自作する方法

では、実際にwebページを自作する方法についてお話していきます。

ざっくりとレベル別で分けると以下のような方法で自作するのが、最もスキルを伸ばしやすいでしょう。

HTML+CSS+jQueryをある程度自在に組める => 公開ページの写経

既に今まで学んだことが理解できている人は実際のサイトを模写することから始めるといいでしょう。

模写・・・そっくり真似をして作成すること

具体的なレベル感で言うと以下のレベルの人です。

ここまで理解できていれば、模写をしていくことでより実践に近いサイトを作成することができるでしょう。

初めて作るのであれば、Uberのサイトなどはほどよい難易度で作りやすいかと思います。（画像やアイコンまでは忠実に再現しなくても大丈夫です）

逆にUberのサイトを見て「ここの実現の仕方がいまいちわからない…」と思われる方は、まだ写経で学習したほうが効率的にスキルを身につけることができます。

HTML+CSS+jQueryはわかるが応用できない => 書籍

HTML, CSS, jQueryの基礎はおおよそ理解できているけど、それを組み合わせて1つのサイトを作るイメージはまだわかない！という方には書籍での学習をおすすめします。

具体的には以下のレベル感の人です。

上記の方には、webページを作りながら学べる以下の書籍がおすすめです。

ただし、書籍学習にはいくつか注意点があり、この注意点を守らないと1週間で学習を終えるのは不可能です。

注意点は以下の3つです。

・書籍は始めから読まないこと
・まず本の全体をざっと読み学習範囲を決めること
・ふせんなどで学習範囲をメモしておくこと

今週の学習目的としては1ページだけでいいのでwebページを作成することです。

そのためにも書籍を全て読む必要はないため、HTML+CSS+jQueryを学習できる範囲を探すことに時間を割きましょう。

もし、他のページも学習したいと考えるのであれば、余裕が出てきてからでいいので、まずは最初に学習範囲を定めることは必ずしておいてください。

HTML+CSSはわかるがjQueryがいまいち => 動画

最後にHTML+CSSはわかるけどjQueryがいまいちと感じる人には動画学習をおすすめします。

具体的には以下のレベル感の人です。

動画学習の大きなメリットとしては、解説を聞きながら手を動かして学習を進めることができる点です。

動画学習であれば、Udemyでwebサイトを自作してみるのがいいでしょうね。

※Udemyは月に1回ほど1,200~1,400円で講座の購入ができるのでセールをしているかチェックしましょう

フロントエンドエンジニアになりたい人の Webプログラミング入門

こちらでwebサイトの全体を作るイメージを作っていきましょう！

ステップアップを狙うなら要素追加をしてみよう

ここまではwebページの写経をメインに進めてきましたが、さらに一歩レベルアップを目指すのであれば要素の追加をしてみましょう。

要素の追加と言われると難しく感じるかもしれませんが、例えば以下のような変更を加えてみると、より理解が深まるでしょう。

など様々な実装が考えられますね！

これらを実行することで、webページの自作はおよそのことはできるようになったと言えるかと思います。

まとめ：webページは完璧でなくてもいいので作りきろう！

今回は、10週間プログラミング講座の第3週目としてwebページを自作する方法について解説してきました。

今週の学習を終えるころには、実はクラウドソーシングで簡単な仕事を取るレベルには達しています。

ただし、プログラマとして活躍するまでには、まだまだ学習することもあるため一層スピードアップしていきましょう！

4週目はいよいよ自分が選んだ言語の学習に入っていきます。

プログラマとして活躍するためにも次の週の学習は最重要ステップの1つとなるため、ぜひ見逃さないようにしてください。

=> 4週目：プログラマになるならバックエンド言語も勉強すべき理由と学習ステップを解説！