テキストで学んだ通りにコードを書いたのに思った通りにWEBページが表示されず挫折しそうな人必見！WEBページの仕組みを理解して思い通りにレイアウトを実現できる方法。

皆さんこんにちは！
かずぱんです！

今回の記事ではプログラミング学習を
挫折しかけた僕が稼げるレベルになるまで
継続出来た学習方法についてお伝えします。

早速ですが皆さんはプログラミングの学習を
進める上でこんな風に思った経験はありませんか？

・エラーの原因が分からず挫折しそう
・学習に時間を要し、終わりが見えずに挫折しそう
・覚えなきゃいけない事が多くて大変そう

そう思ってしまうのも無理はないかもしれません。

事実プログラミングを独学で行った場合、
９割近くの人が挫折するというデータもあります。

「早く独立したくてプログラミング学習を
始めたのにエラーが出て思うように進まない！」

「エラーを出してばかりで自分には
向いていないのではないか？」等、

予定通りに進まない事が多くてストレスを
抱えた結果、挫折しそうだと思っている人が
多いのではないでしょうか？

私も同じような状況でした。
思い通りにいかない事が何度も続いて
挫折する寸前まで追い詰められた経験もあります。

でもある方からのアドバイスを基にした
学習方法で今ではプログラミング学習の
楽しさを実感しています！

あなたもこの学習方法を実践してみれば、
以下のメリットを得る事が出来ます。

・エラーが起こっても迅速に対処出来る。
・プログラミングを効率良く学習出来る。
・時間に余裕が出来て他にやりたい事が出来る。

その結果、時間が増えた分他の案件をこなして
収入を増やしたり、自分の趣味に費やす時間も
増えてストレスが少なく収入も高い
生活環境を手に入れる事が出来るでしょう。

逆に、この学習方法を実践しないままだと、

・エラーを解決するまでに時間がかかる。
・理解を深めるまでに時間がかかる。
・時間が足りなくて他に自分がやりたい事が出来なくなる。

その結果、自身の成長を実感できない状態が
続いている事に嫌気がさして
稼げるようになる前に挫折してしまいます。

そうなってしまうと今まで費やしてきた
時間とお金も全て無駄になり、

一生嫌いな上司と仕事をして収入も少ない人生を
送るという事になりかねません。

そんな状態のまま一生を過ごすのは嫌ですよね？

折角大金を払って学習しているのに、稼げる前に
挫折してしまうのは非常に勿体ないです！

私自身も挫折しかけた経験をしているので、
今挫折しそうな状況になっているあなたに

これまでかけた時間とお金を
無駄にして欲しくないという気持ちから
今回私が実践している学習方法を紹介します！

その前に私がその学習方法を取り入れるように
なったきっかけをお話しします。

そのきっかけは、プログラミングスクールで
学んでいた時に担当だったメンターさんから
アドバイスを頂いたことです。

私が学習を始めた当初はテキストをしっかり読んで
理解した上で課題をこなすように努めていました。

例として架空のページを作った時のエピソードを
画像を用いて説明します。

画像を見てみると文字列と
申し込みボタンがありますね！

この時は文字列とボタンの間に余白を加えて
下図のレイアウトにしようと試みました。

しかしボタンの上の部分に余白を
多く設定してみたのですが効きません。

それどころか値をいくら大きくしても
全く効きませんでした。

そこでコードの書き間違いがないかを
確認するためにテキストを読み返したり、
エラーチェッカーを用いましたが
書き間違いはありませんでした。

「ちゃんとテキスト通りに書いているのに何で
その通りに表示されないんだろう？」

「早く稼げるようになりたいのに
学習が進まなくてイライラしそう！」

そんな不満が積み重なっていって
挫折しそうになりました。

そこでスクールのメンターさんに相談したところ、
このような答えが返ってきました。

「似たようなレイアウトであるページのコード構造を検証ツールを使って調べてみると良いですよ。」

その答えを聞いた時、最初はこう思いました。

「え、知りたかった答えを教えてくれるんじゃないの？早く問題を解決したくて聞いているのに！」

そう思いつつもアドバイス通りに検証ツールの
使い方を教わってレイアウトが似ているサイトの
コード構造を調べました。

デモサイトのコードと自分のコードを
見比べてみると、btnクラスの上方向の余白が
指定できなかった原因が理解出来ました！

それと同時にこう思いました。

「他のページも検証ツールを使って調べてみれば、
プロパティが持つ本来の効果等の学びを
沢山得られるかもしれない！」

そう思っていくつか気になるWEBページの構造を
検証ツールを使って調べていきました。

そこで得たメリットは、

・今まで知らなかった便利なタグやプロパティを
知るきっかけが出来たこと
・WEBページを構成するタグやプロパティの役割を
深く理解する事が出来たこと
・読みやすいコードを書く上で参考になったこと

私自身検証ツールを使ってみた事で、
テキストだけでは得られなかった知識を
沢山学ぶことが出来ました。

そのおかげでエラーが生じても冷静に
対処出来るようになり、コードの記述量も減って
作業時間を短縮する事も出来ました。

エラーばかりで思うように
上手く行かず悩んでいるあなた！

エラーにずっと悩まされている状態から
脱出したいと思いませんか？

その為にあなたが今すべきことは、
WEBページが表示される仕組みを理解する事です！

ここでいう仕組みを理解するとはどういうことか？

それはWEBページを構成している
各コードやプロパティが
持つ役割を理解する事です！

例えるとWEBページが製品であるならば、
それを構成するコードやプロパティは
WEBページの部品のようなものです。

製品が正常に使えるようになるためには
各部品がそれぞれ役割を果たしている
状態でなければなりませんよね？

WEBページも同じです。

WEBページを構成しているコードやプロパティ値が
どんな役割を果たしているのか？

それを理解する事でエラーにも
対処出来るようになります。

それではWEBページの仕組みを理解するためには
どんな方法で学習を進めれば良いのか？

それは、既にあるページを模写する事です！

なぜ模写が学習方法として有効なのか？
それには以下のメリットがあるからです。

1.自分が知らない知識やテクニックを学べる
2.新しいデザインを考える上での分析力が身に付く
3.実際に自分で書く事で知識の定着がしやすくなる

1.自分が知らない知識やテクニックを学べる

初心者がいきなりページを
１から作ることは難しいものです。

そして先述した私自身の経験上、
テキストで学んだ事だけでは

タグやプロパティの性質を
充分に理解出来ないため、
実務に活かせるスキルにはなりづらいです。

そういった場合に模写をすることで、
タグやプロパティがもつ性質の理解が深まり、
エラーの原因を突止めやすくなります。

2.新しいデザインを考える上での分析力が身に付く

模写を進めていくうちに、
WEBサイトの作り方を考える力を
身に付ける事ができます。

以下の点を意識して模写を進めてみると良いです。

・使用する色とその比率
・レイアウトに使う余白の大きさ
・フォントの種類と大きさ
・ボタンのデザイン
・ページ構成
・導線設計

3.実際に自分で書く事で知識の定着がしやすくなる

せっかく新しいタグやプロパティ等の効果を
知ることが出来ても、実際に自分で書いて効果を
実感しなければ数日後には忘れてしまいます。

初めは上手く行かない事も多いと思いますが、
その分改善するチャンスもあるという事。

実践した分だけ成長も速くなります！

いかがでしょうか？

模写は早くスキルアップを行う上で
非常に効率的な方法なんです！

WEBページを模写して知識とデザインの引き出しを
増やし、WEBページがどのように作られているか
考える力を高めていきましょう！

実践！デモサイトのページ模写

---

それでは実際にＷＥＢページを模写していきます。