プログラミング 初心者は模写コーディング

プログラミング 初心者

Progateやドットインストールなどである程度知識がついてきたら、模写を行うことをお勧めします。ある程度、知識がついて来たらと言う部分は正確に言うと各サイトの講座を1周もしくは2周したら行ってください。3周はやる必要はありません。

そして、本記事では模写をする際の手順やコツを解説していきます。

模写の手順やコツ

模写の時にどのような方法で行なっていくかを本パートでは説明していきます。

1、元サイトをみてどのようなコードを書くか自分で考える

まずは、サイトの画面を見てヘッダーがここまで、でフッターがここまで。

ここはp要素を使うんだろうな。ここはfloatを使うんだろうな。などとどのようなコードを書くか大体でいいので想像してみましょう。

おそらく、ここはどうやってコード書くの?と言う部分が出てきますが、わからなけらばわからないで大丈夫です。(次パートで解説します。)

2、デベロッパーツールを使って元サイトのコードを見てみる

デベロッパーツールとは、元のサイトがどのようなコードで書かれているかをチェックできるもです。

macでは optionキー+commandキー+iで呼び出すことが出来ます。

windowsではf12で行えます。

この右側のページがデベロッパーツール です。コードが書いていますね。

このデベロッパーツールの右画面のコードにカーソルを合わせるとどの要素がどこまであるのかがわかります。

上記のように、要素の範囲が示されていますね。緑と青の部分です。

また、クリックをすると、赤い丸で囲った位置にその要素のcssが記載されます。ですのでhtmlだけでなくcssの確認も行えます。

これで、わからなかった部分も安心ですね( ^ω^ )

なお、モデルはこちらを使わせていただきました。

iSara[イサラ]|バンコクのノマドエンジニア育成講座
iSaraとは「稼ぐこと」にフォーカスしたエンジニア育成講座です。なお、iSaraで「基本的なプログラミングスキル」は教えません。基礎的なプログラミングスキルは無料で学べる時代。iSaraでは、基礎知識学習は事前課題とチャットサポートのみ。今なら月15万円稼げるまで永久サポート付きです。

3、ではコードを書いていきましょう!

以上で、大体の問題は解決できるのですが一つだけ問題がありこの「プロパティ何?」と言う問題が出て来ます。

ですが、それは当たり前です。

Progate,ドットインストールで習ったプロパティはごく一部なので、次々に色んなものが出て来ます。

その都度、どう言う意味を持ったプロパティか調べていきましょう!

わからないプロパティがあれば「わからないプロパティ名 css」で検索すれば必ず出て来ますので頑張ってください。ここは初めは辛い場面かもしれないですが頑張ってください。

わからないことがあると言うことはそこが、成長のための一歩なので頑張りましょう!

模写サイトの選び方

模写サイトの選び方ですが、一個目の模写は確実に出来そうなもを選ぶのがいいと思います。初めで難しすぎると心が折れてしまうと思います。

また、いいレベルのサイトが見つからない場合はサイトの一部だけの模写でいいかと思います。

下半分は難しいそうだから、上半分だけにしよう。などで大丈夫です。

まずは、模写の出来たときの喜びを感じましょう!

そして、2個目3個目からはちょっと難しそうかな?と言うものを選びましょう。

上記で書いているようにデベロッパーツールで答え合わせをできれば大丈夫ですので。

難しそうな物をやっていると、時間がかかったり詰まったりすると思いますが、レベルアップのためには必要なことなので難しい工作をしている!くらいの感じで遊び気分でやってみましょう!

また、模写サイトの素材、画像の用意はどうすればいいの?と言う方は別記事で紹介していますので下記をご覧ください。

最後に

模写コーディングの初めは難しいですが、同時にワクワクがあったりもするのでもがむしゃらに頑張ってみてください。また、ある程度模写が出来たら自分のオリジナルサイトなども作ってみてはいかがですか?

コメント

タイトルとURLをコピーしました