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. 【超入門】初心者向けJavaScript解説!これから学習を始め…
  2. 【初心者向け】JavaScriptの関数の仕組み・使い方を徹底解…
  3. 【Google Chrome】知ってる?どんなWebサイトにも自…
  4. 【超入門・初心者向け】CSSの小技シリーズ③ 便利なカウンター機…
  5. 【初心者向け】10分で学べる!PHP入門編 #01 文法ルールの…
  6. 【超入門】作業効率爆上がり!必ず覚えておきたい超絶便利ショートカ…
  7. 【超入門】初心者必見!CSSアニメーションの基本が学べる入門講座…
  8. 【Web・IT業界就活】とにかく第一印象が重要!!知ってるだけで…
PAGE TOP