HTML/CSS

【初心者向け】模写コーディングのよくあるご質問回答&お悩み相談!【HTML・CSS コーディング】

模写コーディングに関してよく頂くご質問への回答をまとめました!
前半は、スクリーンショットの準備などの具体的な作業や操作方法について頂くご質問にわかりやすく動画でお答えしたものなので、解決済みの方は飛ばして 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

【タグ】
#コーディング #プログラミング

関連記事

  1. 【作業効率化】Web制作にオススメ!Visual Studio …
  2. 【超入門】もうCSSの真ん中寄せで悩まない!横向き編【HTML・…
  3. 【超入門・初心者向け】CSSの小技シリーズ③ 便利なカウンター機…
  4. 【超入門】初心者向け 模写コーディング!オススメのやり方とポイン…
  5. 【超入門】初心者あるあるのつまづき回避!CSSをはじめてみよう(…
  6. 【超入門】「iSara」模写コーディングをやってみた③ Font…
  7. 【超入門】今さら聞けない?!positionプロパティ!相対位置…
  8. 【Web業界の常識】「パス」の書き方、説明できますか?Webデザ…
PAGE TOP