副業でWeb制作に挑戦しようとおもい勉強を続けていると、模写コーディングの段階でどうもうまくいかないなと悩んでいるひとがいるかもしれません。
「模写コーディングの勉強に進む予定だけど、HTML、CSSの学習でもむずかしくてこのあと無事に進められるか心配だな～。。。」
今ではなんとか目的は達成しましたが、当初模写コーディングをはじめたときにはそれまでの学習から比べるとむずかしく感じて挫折しそうでした。
ただ模写コーディングでつまづくところも一つずつ調べながらみていくと、初心者でもなんとか解決して進めていけるようになります。
ここでは自分と同じような初心者の方向けに模写コーディングでつまづきがちな点を整理して、その対応となる調べ方とあわせて紹介していきます。
模写コーディングの参考例のこと
副業でWeb制作の勉強をはじめた初心者が模写コーディングするときにはよく利用される例があります。
基本的に最初はLPサイトの模写からはじめるのがやりやすいですが、そのなかでもコーディングするうえでの練習要素が多く、レベル別で進めやすいものがよいです。
ただ初心者のうちに上記のようなサイトの模写コーディングをはじめると、たいていはどこかしらでつまづくような点がでてくるとおもいます。
模写コーディングでのつまづくこと
はじめて模写コーディングの勉強をするときは、結構な確率でつまづきを経験するとおもいます。
それは模写コーディングの段階から、それまでのHTMLのCSSを学習するという形から実践のコーディングに近い形に入っていくためです。
実際には案件対応とは少し違う部分もありますが、模写コーディングでは学習した内容の組み合わせや新たに調べたことをうまく利用することなどが必要になります。
そのためそれまでの学習とは自身で考えることや調べることの必要性が大きく変わります。
スポンサードサーチ
模写コーディングでつまづきがちな点
自分が模写コーディングをするときの経験から、０からはじめた初心者は模写コーディングにあたってこのあたりがむずかしいポイントだろうなという点を紹介します。
個人的に考える模写コーディングに入ってからつまづきがちな５つが、
- レスポンシブ
- 全幅表示
- 要素重ね
- アコーディオン
- 疑似要素
です。
このあたりは学習だけを進めているとあまり出てこない、使い所がわからないため、模写コーディングの段階でつまづきやすいです。
ただLP制作案件などでは頻出する点なので、模写コーディングのおすすめサイトでもよく出てくる要素ですし、対応できるようになることが必要です。
とりあえず模写コーディングの最初はきれいでもなんでもなくても、まずは調べてできることが重要です。
逆にどうしてもこのあたりのつまづきが解消できない、調べることもできないという場合には、副業でのWeb制作の勉強はあまり向いていなかったのかもと切り替えるのもアリです。
レスポンシブ
模写コーディングでレスポンシブデザインの作成をどうしようかというつまづきです。
レスポンシブで作成することが必要ということはわかっているけど、PC、スマホのデザインどちらから手をつけるか、なにを考えながら進めるべきかなどが最初はわからないことが多いです。
学習のなかではレスポンシブデザインのことは出てきていても、実際の作成時に考えること、進め方などはつかめなかったりします。
最初からレスポンシブを考慮して模写コーディングできるひとはそのまま進めてよいですが、難しい場合にはまずは無視して進めても大丈夫です。
当然、コーディングで二度手間になる部分やレスポンシブ化で崩れる部分などもバシバシでてきますが、それを経験していくことでレスポンシブデザインでの作り方も徐々につかめていきます。
全幅表示
サイトトップなどで多い、要素を全幅表示させる場面でのつまづきです。
模写コーディングに取り掛かり、あまり気にせずにBootstrapやコンテナを設定しているとここのつまづきがでてくることが多いのではとおもいます。
最初のうちにここでつまづいてとれる対応としては、
- 対象要素をコンテナ外にする
- 要素をはみださせる
のいずれかになることが多いです。
個人的には模写コーディングはじめのときは方法は選ばずにとりあえずできることが大事だと考えているので、最初はやりやすい方法でとりあえず模写コーディングを完成させることを優先して問題ないです。
要素重ね
各要素をレイヤーで配置して表示させる場面でのつまづきです。
こうした要素同士の重なりではCSSのpositionを使うということは学習でもでてきますが、実践で使ってみないとあまり理解できなかったりもします。
模写コーディング当初はたいていヘッダー固定や画像の重なり、位置の調整などがうまくいかなかったりすることが多いです。
ここも最初のうちは多少無理やりにでもposition関連でレイアウトをおもったように配置できるようになることが大事かとおもいます。
この要素の重なりのところは、画面上にはみえないけど存在するレイヤーの感覚をつかむことができると早いです。
アコーディオン
アコーディオンメニューを実装するところでのつまづきです。
たいてい模写コーディングをするときには、FAQなんかで多く使われている印象です。
調べるとスクリプトでのやりかたもでてきますが、最初のうちjQueryなどの学習をしていなければCSSのみで実装できる方法で問題ありません。
表示されたりされなかったりする要素をHTMLでどう書くか、CSSでどう切り替えるかの部分がつかめれば、模写コーディングの段階ではよいとおもいます。
疑似要素
疑似要素をつかって装飾をするということでのつまづきです。
あとからこうした場面では疑似要素を使えばいいのかとわかって、どうやればいいのかを考えた部分になります。
模写コーディングのときにでてくる形で多いのは、見出しの装飾、文言の前後にアイコン等を付け足す、上下に文言を並べるなどの場面です。
これらの形を設定するのために、そもそも疑似要素を使うという意識がないと調べようもなかったりしてつまづいたりします。
【副業Web制作】模写コーディングが難しいときの対処紹介まとめ
【副業Web制作】初心者模写コーディングのつまづきと対応のまとめです。
- 副業でWeb制作をはじめようと考える初心者は模写コーディングでつまづくことは多い
- はじめて模写コーディングの勉強をするときはつまづきを経験して調べることが大事
- 自分が模写コーディングをするときの経験からつまづきやすいと考えるポイントはこちら
- レスポンシブ
- 全幅表示
- 要素重ね
- アコーディオン
- 疑似要素
- 副業でのWeb制作のために勉強をはじめた当初はとりあえず模写コーディングの最初はきれいでもなんでもなくても、まずは調べてできることが重要
未経験から副業のWeb制作で月１万円を稼ぐための参考情報はこちらでも紹介しています。
コメント