こんにちは！Takeshi(lhZJlNpUPZ1iCfR)です！
webサイト制作の勉強をしていると避けて通れないのがwebサイトの模写ですよね。
僕がwebサイトの模写を初めてした時は上手く進まないしイライラするしで、とても苦労しました。
今回は僕が実際に初めて模写した時に失敗したことを語っていきたいと思います。
プロパティの使い方をほぼ理解してなかった
これに尽きますね。
Progateに出てくるやつしか知らない…！
CSSのプロパティの意味や種類がよく分からずに模写を始めたので全然上手く行きませんでした。
まあ、このような経験を経て成長できたのも確かなのですが流石にインプットが足りな過ぎましたね。
具体的に掘り下げて紹介していきます。
要素の位置をmarginとpaddingだけでどうにかしようとしてた
要素の位置を整えるプロパティって色々ありますよね。
例えばvertical-alignとかpositionとかですね。
僕はこういったプロパティを一切使わずmarginとpaddingだけで全てをどうにかしようとしていましたw
早く模写するサイトのソースコードを見てどんなプロパティが使われてるか確認すれば良かったんですけど、なぜかソースコードは見ない！と意地になって多くの時間を消耗してしまいました。
これから模写を始める人は「何かこれやり方違くね？」と思ったら最初のうちは素直にソースコードを見ることをお勧めします。
真ん中に要素を配置する時はtext-align、効かなかったらmargin: auto;という脳筋プレイ
とりあえず要素を真ん中に配置したい時は、それっぽい所にこれを書くという脳筋状態で作業していました。
正直この作戦を使っていると、大抵の場合は要素が真ん中に配置されますが、それぞれのプロパティの意味を理解していないので、なぜtext-align: center;が効かないのか？なぜmargin: auto;が効かないのか？を全く理解できていませんでした。
とりあえずこれ使っとけば真ん中に配置されるらしい、みたいなかなりふわふわした状態で最初は模写してましたね。
そして一度試してダメだった時に効かなかったプロパティを消さずにそのままにしていたので、cssの中身がtext-align: center;まみれでしたねw
碇シンジ君の「センターに入れてスイッチ…！」並みの脳筋ですね。
クラスやidの名前を適当につけていた
最初はクラスの名前を適当につけまくっていました。
例えば、top-migi、とかabcとか笑
css設計もクソもなかったですね。
この時は「模写だし誰かに見せるわけでもないしいいか！」と思ってたのですが、ポートフォリオサイトを作ったり、いざ受注した時なんかにとても苦労しました。
できれば早い段階で適切なクラス名をつける、カスタマイズしやすいcss設計を考えながらコーディングすることをオススメします。
クラスの名前の決め方
クラスの名前の決め方って最初はどうすればいいかよく分からないですよね。
クラスの名前何にしようか無駄に悩む…！
これに関しては「CSS クラス 命名」とかでググると沢山の情報が出てきますのでそちらを参考にしましょう。
ちなみに僕は、
こちらの記事を参考にクラス名つけることが多いです。
まだ見たことない方は自分の辞書的な感じで使えるので是非ブクマしておきましょう。
Chromeの検証機能を理解していなかった
Chromeの検証機能って本当に便利ですよね。
自分で数字やテキストを書き換えて調整してみたり、とても使う機会が多いと思います。
しかし残念ながら僕はChromeの検証機能を全く理解できていませんでした。
ソースコードとプロパティ見れるらしい、ぐらいの知識感しかなかったので、「なぜ上手くいかないのか」の原因を究明するのにアホみたいに時間がかかってしまいました。
自分のレベル感に見合わないサイトを模写した
最初に模写するサイトを選ぶ時に「せっかくならオシャレなサイトを模写したい」と思い、オシャレなアニメーションが盛りだくさんのLPを模写していました。
オシャレなのはいいけど全然上手く進まない！！！
到底Progateでちょっと何周かしたレベルでは上手く進むことができず、ここで本格的に挫折しそうになりました。
結果的にオシャレなLPを作成することは諦め、自分でもできそうなよくあるコーポレートサイトの模写に切り替えました。
挫折してしまっては意味がないので最初は自分でもなんとかなりそう！と思ったWEBサイトを模写することをオススメします。
模写するサイトを決める時のオススメな方法
オススメな方法としては、クラウドソーシングのサイトで「WEB コーディング」と検索して、出てきた案件に参考用に添付してあるサイトを模写しましょう。
見てみると分かるかと思いますが、結構簡単な感じのサイトが多いです。
ここにあるサイトを模写できるということは、その案件もこなせるということなので、自分の自信にも繋がりますし、「これだけできればこれだけ稼げる」という１つの目安にもなるのでオススメです。
最後に
以上が僕が模写した時の代表的な失敗談です。
正直他にも無数の反省点がありますが、書ききれないので代表的な失敗を抜粋しました。
ただ失敗する、というのは決して悪いことではなく、成功するためのプロセスの１つだと思っているので、何かで失敗して落ち込んでいる方は「失敗したことで成功に一歩近づいた」とポジティブに考えてみましょう！
それでは最後まで読んで頂きありがとうございました。