模写コーディングに関してよく頂くご質問への回答をまとめました!
前半は、スクリーンショットの準備などの具体的な作業や操作方法について頂くご質問にわかりやすく動画でお答えしたものなので、解決済みの方は飛ばして 10:40 からご覧ください!
★動画内で紹介した「デバイスピクセル比確認ページ」はこちら
https://webgodweb.com/device-pixel-ratio.html
★ご質問一覧
オープニング 0:00
【模写コーディングの準備について】 1:06
Q. スクリーンショット画像を使って、要素の大きさを測ったりするときに使用しているアプリはなんですか? 1:22
Q. スクリーンショット画像が、実際のサイズよりも極端に大きい気がします。
スクリーンショット画像で測る要素の大きさに合わせてコーディングしようとしたら、全然お手本通りの見た目になりません。2:22
Q. スクリーンショット画像に、マークアップの計画を書き込んでいるとき使っているのは何のアプリですか? 9:31
【模写コーディングの手順について】 10:40
Q. 模写するサイトがなかなか決められません。どんなサイトを模写すればいいのでしょうか? 10:51
Q. 模写コーディング、難しくてなかなかできるようになりません。 11:46
Q. jQuery、JavaScriptや、Bootstrapを使っているサイトの場合、全て忠実に模写した方がいいですか? 12:20
Q. HTMLの編集で、どのタグを使うべきか考えるのが難しいです。
CSSのクラス名はどうやって決めればいいんでしょうか。 12:59
↓↓↓模写コーディングシリーズ↓↓↓
【超入門】初心者向け 模写コーディング!オススメのやり方とポイント【HTML・CSS コーディング】
https://www.youtube.com/watch?v=OH1X09Ilu9E
【超入門】初心者必見!模写コーディングをやってみた 実践編【HTML・CSS コーディング】
https://www.youtube.com/watch?v=RBLkXAG4QTM
【超入門】初心者必見!模写コーディングをやってみた 実践編 Part2【HTML・CSS コーディング】
https://www.youtube.com/watch?v=KH-lN82sf7I&t=29s
【超入門】初心者必見!模写コーディングをやってみた 実践編 Part3 レスポンシブデザイン編【HTML・CSS コーディング】
https://www.youtube.com/watch?v=oGV1dmomUP0&t=5428s
↓↓↓「iSara」模写コーディングシリーズ↓↓↓
【超入門】実践!「iSara」模写コーディングをやってみた① ソースコード配布 【HTML・CSS コーディング】
https://youtu.be/OnkZv78HMGY
【超入門】実践!「iSara」模写コーディングをやってみた② ソースコード配布 【HTML・CSS コーディング】
https://youtu.be/1POssr40n8I
【超入門】「iSara」模写コーディングをやってみた③ Font Awesome読み込み方法 ソースコード配布【HTML・CSS コーディング】
https://youtu.be/ztMAxJsXPnY
【超入門】「iSara」模写コーディングをやってみた④ 初心者向けレスポンシブコーディング手順解説!ソースコード配布【HTML・CSS コーディング】
https://youtu.be/SehqR5439Ss
【超入門】「iSara」模写コーディングをやってみた⑤ 初心者向け 効率的なレスポンシブコーディング方法!ソースコード配布【HTML・CSS コーディング】
https://youtu.be/oeAU6CrwRho
【初心者向け】「iSara」模写コーディングをやってみた⑥ レスポンシブコーディング&jQueryでアコーディオンメニュー作成!ソースコード配布【HTML・CSS コーディング】
https://youtu.be/cxD151Lxz4s
【HTML/CSS 初心者向け】お問い合わせフォームのコーディングの基本を解説!「iSara」模写コーディングをやってみた⑦ 【form/input/button など】
https://youtu.be/DqbeKUyuv-w
【初心者向け】「iSara」模写コーディングをやってみた⑧ 次回最終回!レスポンシブ対応など ソースコード配布【HTML・CSS コーディング】
https://youtu.be/tAWptl3F5bk