こんにちは、けんぞうです。
Progate・ドットインストールが終わってからの学習方法として、部分模写がかなり効果的です。
- ProgateでHTML/CSSで上級コースをクリアしている
- Progate/ドットインストールが終わってから、何をしようか悩んでいる
- (サイト制作に興味がある)
動画でも解説しましたので、良かったら。
Progateが終わったら部分模写しよう
Progate上級コースを修了したら、部分模写をしましょう。
Progateはよくできており、上級コースまで完了したら、HTML/CSS/jQueryなどある程度理解は進んでいるはずです。
とはいえ、その段階で一から自分のアタマで考えてコードを書いていくのは無理があります。そこで、部分模写は効果的です。
サイトを模写することは、他のブログなどでもおすすめされていますが、正直全てを模写しきるのは大変です。、、というか、初学の頃は無理でしょう。
ですので、部分的に模写をするわけです。
初学のうちに挫折しない最も有効な方法は、難易度を下げつつ進歩することです。
Progateなどで勉強して「よしサービス作ろう」というのは、結構無理があります、、途中山積みの問題を処理しきれず挫折しがちです。
部分模写の具体的手順
以下の手順で行います。
- STEP①:真似してみたいサイトをChromeで開き、検証する
- STEP②:Sublime textを開き、必要ファイルを作成する
- STEP③:HTML/CSSで部分的に模写をする
僕が作っているサイトを参照しつつ、解説します。
STEP①:真似してみたいサイトをChromeで開き、検証する
画像で赤く囲った部分を模写してみようと思います。
Chromeがサイト開き、右クリック>検証でデベロッパーツールを開きます。
詳細なコードが画面下部で表示されます。
デベロッパーツールは、Web制作でめちゃ便利で頻繁に使えます。
WordPressのテーマを作成したり、自分でサイトを作りたいという人はぜひこの機会に使い方を覚えてください。
STEP②:Sublime textを開き、必要ファイルを作成する
<header class=”site-header”>の部分をクリックすると、ちょうど模写したい範囲が変色するので、<header>タグ内を模写すればOKです。
ここからは、Sublime textを使って実際にコードを書いていきましょう。必要となるファイルは以下の2つです。
- index.html(HTMLコード記載用)
- style.css(見た目編集用)
STEP③:HTML/CSSで部分的に模写をする
⬆︎左右で画面分割をして模写すると捗る
実際模写をする際は、上記画像のように左右画面を分割しながら模写をすると、かなり捗ります。(僕はディスプレイを使っているので画像が小さくなり、すいませんm(_ _)m)
模写したコードは、HTMLファイルをダブルクリックするorChromeにドラッグ&ドロップすると確認できます。
ここからは、ぜひご自身の力を使いつつ部分模写をしてみて下さい。
Chromeでうまく表示されない際は、以下のポイントをチェックしてみてください。
- head内で、CSSファイルを読み込んでいるか?
- HTMLで指定したclass/idと、CSSの記述はあっているか?
模写する際の注意点とコツ
最初に模写する際、参考にするサイトを選びのコツを書いておきます。
- コツ①:動きのないサイトを選ぶ
- コツ②:できれば完璧に模写する
- コツ③:模写した後に「なぜこう書くのか?」を考える
コツ①:動きのないサイトを選ぶ
最初はなるべく動きのない、簡単なサイトを選びましょう。
画像がスライドしたりアニメーションがついている部分は、jQueryなどの記載も必要になってくるのでちょい難易度があがります。
なので、本当に最初の模写はなるべく簡単そうなサイトにしましょう。
コツ②:できれば完璧に模写する
できれば、完璧に見た目を真似るレベルで模写しましょう。
例えば上記の例のようなものであれば、Progateをクリアして来た方なら完璧に真似できると思います。
もし分からないこと、忘れていることがあれば、Progateでスライドをみて再学習すれば良い復習にもなります。
コツ③:模写した後に「なぜこう書くのか?」を考える
模写し終わってからでいいので、「なぜこういう記述をするのか?」を自分の頭で考えましょう。
この過程を踏むのと、飛ばすのとでは理解度が大きく変わってくるはずです。
理由を理解できたら、「他の書き方で実現できないか?」なども考えてみると、さらに理解が深まりますね。
最後に:「真似」はスキル上達の基本
スキルの上達法で最も効率的なのは真似することだと思います。これはたぶん、プログラミングに限らず言えます。
僕は今までも誰かの真似を徹底することで、割りを数字は伸ばせて来ました。
- 英語:Atsueigoの学習法を徹底して真似てTOEIC600→855
- ブログ:マナブさんの文章の流れを真似することで、半年で17,000PV
- プログラミング:ひたすら模写を繰り返し、自分でサイトを作れるレベルに
真似る、真似る、真似ると何十回か繰り返していると、段々自分で操れるようになってきます。
ちょっと話がそれてしまいましたが、「模写大事だよ」ということです。
関連記事


けんぞう