2020年2月7日ツイートシェアB!はてブポケットコーディング上達の近道にサイト模写があります。コーディング模写は公開されているWebサイトを見て、ソースコードを見ずに似たようにコーディングすることですね。実際に公開されているサイトですので、実践力を身につけるには最適な方法かと思います。おわり模写の対象サイトを決めるまずはどのサイトを模写するかを決めましょう。難しすぎても途中で諦めてしまいますし、簡単すぎたら時間の無駄になりかねません。2017-06-16AmazonKindle楽天ブックス画像がメインのLPとかのサイトはあまり練習にならないので、テキストベースのサイトを選ぶのがいいかと思います。Photoshop、Illustrator、XDからのコーディングに慣れよう!コーディングルールとツールなんの計測も行わずに目視だけでコーディングするのは、おそらく不可能です。カラーコードとか見ただけでは分からないので。そこで、いくつか計測してもいいルールを自分なりに設けています。Font」を使用して、フォントサイズやフォントファミリー、色、行間などを調べることはOKとしています。Downloader」で画像を取得していきます。Downloader」のダウンロードページあと、背景で使われている画像は上記ツールでは保存されません。デベロッパーツールなどでコードを確認して保存していきましょう。幅の計測OKものさしで測るのであくまでもザックリした数字になりますが、おおよそでも分からないと微調整が面倒臭すぎたりします。Chrome拡張機能「Ruler」を使ってザックリ距離を測りながら作ると少し効率的です。「Ruler」のダウンロードページ要素の幅などは、デベロッパーツールでも確認できます。色の取得OK目視だけで色のカラーコードが分かったら超人ですね。カラーピッカーで色を取得しましょう。「ColorPicker」のダウンロードページソースコードの確認は基本NG基本的にはソースは見ないで実装する方が望ましいです。絶対にダメというわけではありません。カンニングしてもOKです。丸パクリは勉強にならないのでダメですが、チラッと見てヒントを貰って実装する方が、無駄に時間を使わずに勉強になる場合もあります。(知らないことは考えたって出てきませんから・・・)この辺は今の自分のスキル等から決めるといいでしょう。ピクセルパーフェクトでなくてOK値の正確さよりは、デザインを見ただけで、HTML、CSS、javaScriptで実現でできるかどうかを試すトレーニングだと捉えています。数ピクセルずれているとかは特に問題ではありません。ブレークポイントはそれっぽくでOK模写するサイトがレスポンシブデザインの場合は、細かく見ていくと時間がかかりすぎます。個人的にはタブレット時の表現は気にしていません。自分の中でブレークポイントを決めて、ウインドウ幅を変えたときは滑らかに状態が変わりスマホ表示ができればOK。スマホ時のデザインは再現しましょう。リンクコーディングの流れ特に決まったやり方はありませんが、個人的な流れとしては、HTML構造を作るCSSでデザインを当てる(レスポンシブ化対応も行う)JavaScriptで動きをつけるといった感じです。2、3はゴッチャになることもあります。見栄えや動きが上から完成していった方が気持ちいいので・・・。各フェーズで時間を計測しておくことをおすすめします。自分がどこに時間がかかっていて、どこがボトルネックとなっているか、など見えてくるものがあります。凝っているサイトだと、日をまたいだりします・・・。コーディング後のチェックコーディングが終わったら、簡単に確認しておきましょう。実際の案件とは違って自分がよければOKなので、特に厳格に行う必要もありませんが。デザイン構成に大きなズレはないかデザイン構成に大きなズレがないかは必ずチェックします。ここを再現できるかを試すために模写しているようなものですので。わたしのやり方としては、ページ全体のキャプチャをそれぞれ取得して比較するようにしています。Recorder」というアドオンでFireFoxから取得しています。375px)あたりの横幅で揃えて取得すると比較しやすくなります。キャプチャを取得したら、Photoshopで2枚画像を並べておおまかに確認しています。ブラウザで直接比較してもいいと思います。スムーズにレスポンシブ化されるかレスポンシブサイトの場合は、ブラウザの幅を動かしてスムーズに状態が変わっていくか確認しましょう。PCからタブレットあたりが崩れやすいの注意してください。動きは再現できているかマウスホバー時やクリック時、JavaScriptで仕組みを作った場所など。動きが再現できているか確認します。タグのエラーはないか手打ちで作っているはずなので、タグのエラーは起こりやすかったりします。対応するdivタグがない、とか。確認用のいろんなツールがあるかと思いますが、「タグ対応チェック」のブックマークレットがシンプルで愛用しています。「タグ対応チェック」ブックマークレットの紹介ページ次に繋げるコーディング模写を!模写して得た知見やボトルネックは次に活かせるようにしましょう。「同じようなタグを数十回打っているな」と気づいたら、スニペットとして登録して時間を短縮させる、など。わたしは、Webコーディング用のテンプレートを作成して、コーディングする度にアップデートさせています。https://github.com/haniwaman/template0コーディング模写って数時間かかる割と時間取られる作業です。その時間を無駄にしないように、次に活かす!という意識で1回1回を取り組むと、どんどんと向上していくのではないでしょうか。サイトを選ぶときは、新しい知識が1つは身につきそうだなって観点で選ぶと勉強になるかと思います。@haniwa008実際にどうやるかの情報がなかったので、わたしなりに実践している情報をまとめました。リンクこのページが役に立ったらいいね!お願いします運営の励みになります...。「無料」で使えるお問い合わせフォームのPHPテンプレート7選!静的H...はにわまんWordPressが好きなフリーのWebコーダー。300件以上のWordPressカスタマイズを対応してきました。