この10週間プログラミング講座では、知識ゼロのプログラミング初心者の方がプログラマーとしてのキャリアをスタートできることを目指す講座です。
第2週目の「JavaScriptとjQueryを勉強するときの注意ポイント2つと学習手順を解説！」をまだ読んでいない方は、ぜひ先にこちらをお読みください。
今週は、第3週目として今まで学んだHTML+CSS (+jQuery) の知識を生かしてwebページを自作していきましょう！
今週の講座を終えるころには、以下のことができるようになります。
- オリジナルのwebページを自作するイメージができる
- クラウドソーシングで最も簡単なレベルのプログラミング案件が取れる
では、見ていきましょう。
webページの自作を写経（模写）から始めるべき理由
後にwebページを自作する具体的な方法を紹介しますが、どの方法も写経することを前提としています。
その理由として以下の2点が挙げられます。
- 初めてwebページを作成するなら全体像の理解が難しいため
- webページを作成する前にデザインを考える必要があるため
初めてwebページを作成するなら全体像の理解が難しい
まず、1つ目の理由として、webページを作成するとき全体像を理解するのが難しい点が挙げられます。
例えば、web制作に慣れている人は全てHTMLを書いてからCSSを実装するなど、構造ができていればレイアウトは後回しでも作ることができます。
しかし、当然初めてwebページを作成する人が同じように進めると
など、完成までに遠回りになってしまいます。
したがって、最初はある程度ゴールの目安を設置したほうが効率的に学習を進められるのです。
webページを作成する前にデザインを考える必要があるため
また、完全に0から作成するとなると、どのようなページを作成するかデザインを考える必要があります。
デザインくらい・・・と思われるかもしれませんが、webデザインは初めての人がやると簡単なページでもかなり時間がかかります。
昔の僕はデザインもやろうとしたけど結局サイトは完成しなかったよ…
あくまでも目的はwebサイトの制作を通してHTMLとCSS (+jQuery) の理解を深めることです。
したがって、オリジナルのものを作りたい気持ちはぐっとこらえて既存のコピーを作って学習しましょう。
【レベル別】webページを自作する方法
では、実際にwebページを自作する方法についてお話していきます。
ざっくりとレベル別で分けると以下のような方法で自作するのが、最もスキルを伸ばしやすいでしょう。
- HTML+CSS+jQueryをある程度自在に組める => 公開ページの模写
- HTML+CSS+jQueryはわかるが応用できない => 書籍
- HTML+CSSはわかるがjQueryがいまいち => 動画
HTML+CSS+jQueryをある程度自在に組める => 公開ページの写経
既に今まで学んだことが理解できている人は実際のサイトを模写することから始めるといいでしょう。
具体的なレベル感で言うと以下のレベルの人です。
- レスポンシブの作り方がわかる
- flexboxについて理解できている
- jQueryで取得したオブジェクトが何かわかる
- htmlの基本タグ（a, p, div, img, tableなど）が使える
ここまで理解できていれば、模写をしていくことでより実践に近いサイトを作成することができるでしょう。
初めて作るのであれば、Uberのサイトなどはほどよい難易度で作りやすいかと思います。（画像やアイコンまでは忠実に再現しなくても大丈夫です）
逆にUberのサイトを見て「ここの実現の仕方がいまいちわからない…」と思われる方は、まだ写経で学習したほうが効率的にスキルを身につけることができます。
完璧を目指さずなんとなくでも作り切ることが大事！
HTML+CSS+jQueryはわかるが応用できない => 書籍
HTML, CSS, jQueryの基礎はおおよそ理解できているけど、それを組み合わせて1つのサイトを作るイメージはまだわかない！という方には書籍での学習をおすすめします。
具体的には以下のレベル感の人です。
- htmlの基本タグ（a, p, div, img, tableなど）が使える
- ヘッダーメニューなど横並びの要素を作る選択肢が2つ以上思いつく
- jQueryで簡単なアニメーションを作ることができる
上記の方には、webページを作りながら学べる以下の書籍がおすすめです。
ただし、書籍学習にはいくつか注意点があり、この注意点を守らないと1週間で学習を終えるのは不可能です。
注意点は以下の3つです。
今週の学習目的としては1ページだけでいいのでwebページを作成することです。
そのためにも書籍を全て読む必要はないため、HTML+CSS+jQueryを学習できる範囲を探すことに時間を割きましょう。
もし、他のページも学習したいと考えるのであれば、余裕が出てきてからでいいので、まずは最初に学習範囲を定めることは必ずしておいてください。
書籍は全部読むと挫折するので範囲を決めて読むのが鉄則！
HTML+CSSはわかるがjQueryがいまいち => 動画
最後にHTML+CSSはわかるけどjQueryがいまいちと感じる人には動画学習をおすすめします。
具体的には以下のレベル感の人です。
- htmlの基本タグ（a, p, div, img, tableなど）が使える
- ヘッダーメニューなど横並びの要素を作る選択肢が思いつく
- jQueryで取得した要素を自在には扱えない
動画学習の大きなメリットとしては、解説を聞きながら手を動かして学習を進めることができる点です。
動画学習であれば、Udemyでwebサイトを自作してみるのがいいでしょうね。
フロントエンドエンジニアになりたい人の Webプログラミング入門
こちらでwebサイトの全体を作るイメージを作っていきましょう！
ステップアップを狙うなら要素追加をしてみよう
ここまではwebページの写経をメインに進めてきましたが、さらに一歩レベルアップを目指すのであれば要素の追加をしてみましょう。
要素の追加と言われると難しく感じるかもしれませんが、例えば以下のような変更を加えてみると、より理解が深まるでしょう。
- webサイトのカラム数を1カラムに変更してみる
- 「先頭に戻る」ボタンを作ってみる
- スマホに表示されるハンバーガーメニューをアニメーションにしてみる
- トップページの画像をスライドショーにする
- ヘッダーをスクロールしても画面の一番上に表示するようにする
など様々な実装が考えられますね！
これらを実行することで、webページの自作はおよそのことはできるようになったと言えるかと思います。
まとめ：webページは完璧でなくてもいいので作りきろう！
今回は、10週間プログラミング講座の第3週目としてwebページを自作する方法について解説してきました。
今週の学習を終えるころには、実はクラウドソーシングで簡単な仕事を取るレベルには達しています。
ただし、プログラマとして活躍するまでには、まだまだ学習することもあるため一層スピードアップしていきましょう！
4週目はいよいよ自分が選んだ言語の学習に入っていきます。
プログラマとして活躍するためにも次の週の学習は最重要ステップの1つとなるため、ぜひ見逃さないようにしてください。
=> 4週目：プログラマになるならバックエンド言語も勉強すべき理由と学習ステップを解説！
コメント