【Progate】HTML&CSS初級編で作ったページを模写してみた

スポンサーリンク
スポンサーリンク

先月末にProgateのHTML&CSS初級編の最終試験を課しました。

初級編で作成したページを1から自分でコードを打っていって、模写してみました。初級編なので、できる人からしたら全然難しくはないんですが、学び始めた僕にとってはちょうど良かったです。

学べることも多かったので、ここで初級編の模写についてまとめておきます。
初級編のページの模写はかなり勉強になるので、まだやっていない人のためにやり方やツールも紹介しています。

Progate HTML&CSS初級編のページを模写

まずは模写をする目的から、模写の方法や様子を書いています。

Progate HTML&CSS初級編の模写する目的

模写をした理由はこちら。

  • コーディングスキルのスキルの向上
  • サイト作成の流れを理解する
  • あやふやなところを明確にする

この3つです。

正直、模写の完成度はあまり気にしていませんでした。最初なので気楽に楽しくろうと思っていました。
模写をする理由は個人的に重要だと思うので、少し解説していきます。何事も目的やその行動の意味、効果を考える必要がありますからね。

コーディングスキルの向上

これが1番の目的でした。
どんなことでもそうですが、実力は必要なので最優先事項です。自分で1からコードを書いていくのでそこそこ頭も使うので良い訓練になります。

僕は概念を理解した後は、最低限の基本的な知識を詰め込んだら即演習や実践をするタイプです。なので「模写」は僕にとって実力をつけるには適しているかなと思いました。

もちろんこれだけやっておけば良いと言う訳ではないですが、圧倒的な戦闘力をつけるためにサイト模写は効率が良いです。

サイト作成の流れを理解する

ある程度のサイト(ページ)作成の流れを理解しておいたら今後の参考にもなるかなと思いました。知識や理論だけじゃなくて、実際に手を動かすことも必要です。

コードを書くテキストエディタの使い方や効率的に書くことも学べます。

こういった要領よく、時間を短縮してテキパキとこなす力を磨いていきます。
今回は初めてと言うこともあり、テキストエディタの設定はスパルタの設定にしてみました笑

あやふやなところを明確にする

これはコーディングスキルの向上と少し関連するのですが、自分の分かっていない箇所をあぶり出します。

分かったようで分かっていない

ということは良くあると思います。分かったつもりでも、いざ説明をしようとするとパッと思い付かなかったり、思い出せない事もこれに当てはまります。

そういうのは、現段階で(現在の自分の実力で)1番勉強になるところです。
科学的にも、あやふやな記憶はそれを思い出すことによって定着するらしいです。まだ理解できていない箇所は、まずは概要などを理解します。

この辺は、あとで僕の実際の様子を見てもらえれば分かると思います。

Progate HTNL&CSS初級編の模写の方法

どんなツールを使って、どのように模写を進めていくのか書いていきます。
模写はこれが初めてなので、若干無駄なこともしています。そこら辺はその都度書いたり、最後の感想に書いています。
基本的には、

  • 模写するサイトの情報をサーチ
  • テキストエディタでコードを書いていく
  • 本物と見比べながら完成させる
  • 完成後は、見本のコードを見つつ足りない知識を補う

このステップだけです。流れに沿って簡単に書いていきます。

仕様書を作る

シンプルなページですが初めてだったんで、設計図みたいなものをホワイトボードに書きました。
書き込んだ内容は、

  • 全体像
  • 幅や大きさ、色彩コード、フォント
  • 余白
  • ヘッダの情報
  • 画像のURL(あらかじめProgateからメモアプリにコピー)

このくらいです。

Progateの方でコードの中身を確認しないといけない箇所が結構あるので少しめんどくさかったです。しかも、漏れもあったので結局はProgateの方で確認する羽目になりました。

結果的にこれは必要なかったです。(理由は、後述します。)

テキストエディタとブラウザの準備

  • テキストエディタ
  • ブラウザ

この2つは必須です。

テキストエディタはMicrosoft(マイクロソフト)のVisual Studio Codeを使っています。元々はAtomエディタを使っていましたが、今回の模写からVisual Studio Codeを使い始めました。

テキストエディタは何でもいいです。自分が使いやすいものでいいです。特になければVisual Studio Codeでいいと思います。見やすくて使いやすいです。

 

ブラウザはChromeを使いました。今回は使わなかったですが、開発者用のツールが揃っているのでChromeでいいでしょう。

基本的にどちらもインストールするだけで使うことができますが、テキストエディタの方はスパルタな設定をしました。

  • HTMLは宣言は途中で表示、閉じタグの予測の表示以外は入力補完・予測なし
  • CSSの入力補完・予測の表示はなし

この設定で突っ込みました笑
本当はHTMLも完全に何も表示されないようにしようと思ったのですが、出来ませんでした。こんな設定にする必要はありませんでした。

コードを書いていく

ようやくですが、ここからコードを書いていきます。

①テキストエディタでHTMLファイルとCSSファイルを編集
②随時、保存してブラウザにドラッグ&ドロップして確認③①、②の繰り返し

こんな感じでキリが良いところで随時確認しながら進めていきました。

あまり確認していないと、間違えていたときにどこが間違えているのか探すのに時間がかかります。なので、こまめにチェックしておいた方がいいです。

今回は模写するにあたって、ルールを決めてからしました。

  • 0から自分で全てのコードを書く(HTMLの閉じタグはtabキーで入力してもよい)
  • コードの予測はと閉じタグ以外の表示はなし
  • 考えて分からない場合は、Googleで検索してよい(ただし、調べたサイトのタブは残しておく)

最初なので様子見です。あと一応タイムも測ってみました。


ジュースを飲みながら、昼前からスタートしました。
いきなりtitleの綴りが分からなくて調べました笑

3時間10分55秒後…

ようやく完成しました!完成した瞬間はめちゃくちゃ嬉しかったです笑
達成感もやばかった。

思ったより時間がかかってしましました。ヘッダーのCSSの適応までで約50分かかりました。

Progate HTML&CSS初級編の模写のメモ

模写が終わったら、反省会です。と言っても、出来なかったとこを調べたり、理解するだけでノートに書いたりはしません。

取り敢えず終わってすぐは箇条書きで、Twitterやメモアプリなどに書いておくとおくといいです。自分が分からなかったことを確認したり、あとで調べる時にすぐに確認できます。

その後に調べたりして、理解していくといいです。必要があればまとめたり、メモしておくって感じ。毎度毎度ノートに書いていてはキリがないので、ノートアプリにちょこちょこっとメモする程度です。

 

分からなかった箇所は、調べて残しておいたタブで解決したはずなので

僕が詰まったところを載せておきます。


ほとんどがCSSです。CSSは幅が広いので、まずは仕様頻度が高いプロパティから覚えていきたいです。

模写をしてみて思ったこと・感想

最後に、初めての模写の感想など、改善点などをまとめておきます。

  • 仕様書は作る必要なし
  • テキストエディタの機能はフル活用するべき
  • 思ったより時間がかかる
  • 模写して終わりではない

時間がかかってしまったのでそこら辺についてです。

仕様書を作る必要なし

今回はもう模写するページが決まっているので、必要な情報を調べていきます。ただ、ここは実際にコードを書きながら調べていく方がいいと思います。なぜかというと、仕様書を作るって時間がかかるんですよね。
さらに、いちいちコードの中を見て、仕様書を書いていくのはめんどくさかったです。
サイトを作るときに必要な情報はだいたいその場で調べたり、素材を用意する程度で十分です。

  • 全体像を書く→実際にサイトを見ながら模写をすればいい
  • 幅や色彩コード、フォント、大きさ→ツールで調べる
  • ヘッダの情報などの見えない情報→コードを見れば分かる(必要があれば見る感じ)
  • 画像やURL→URLをコピーするか、あらかじめダウンロードしておく

なので、わざわざ仕様書など大げさなものを書かずにツールを使えばOKです。

テキストエディタの機能はフル活用するべき

僕は変にスパルタの設定をしましたが、そんなことをする必要はないです。
理由はこちら。

  • 余計なところでつまずく
  • 時間がかかる

僕は初っ端から綴りを忘れてしまって調べる羽目になりました。こんなしょうもないところでつまずいたり、時間をかける必要はないです。

あと、タイピングに慣れていなかったり、遅いと時間もかかります。なので、これからは入力補完や予測をどんどん使っていきます!
テストをする訳でもないので、最初からコードを完璧に覚える必要もないです。

思ったより時間がかかる

僕もすぐに終わるかなーと思ったのですが、意外と時間がかかってしましました。
考えられるのはこの2つ。

  • タイピングが遅い
  • トレーニング不足

タイピングに関しては、一応キーボードを見ないでタイピングはできるのですがスピードはまだまだです。これはコードを書きながら練習したり、ネットの無料サービスを利用していきます。

もう一つは、単純にまだ考えることに必死すぎてコードを書くことに慣れていないことです。まだまだ理解もできていないし、パッと引き出せなくて考えたり悩んだりしています。瞬間的に出せるレベルまで訓練したいです。

模写を終えてからが勉強

当たり前ですが、やりっ放しでは意味がありません。模写の途中で調べたことも含めて徹底的に調べて理解します。

自分が分からなかったり、詰まったところを集中的に潰していきます。別にその日に全部やる必要はなく、小分けにしていってもいいと思います。でも、できれば早めの方がいいと思います。

模写はコーディングの練習にはなる

今回初めて模写をしたんですが、かなり実力が試されます。コーディングの力はかなり付くのではないかと思います。これからも模写を上手く活用していきたいです。

とはいえ、まだ僕のレベルだとそもそも模写できるサイトやページ自体が少ないので勉強を進めていきます。次はProgateの中級編が終わって、そのページを模写しようかと考えています。

コメント

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