デザインカンプからコーディングをする時の作業の流れについて、デザインデータの取り扱いからコーディング時の活用方法まで、初心者向けに徹底解説しました！
今回は「Adobe Illustrator」で作成されたデザインデータの場合を例に解説しております。
★★★「Webの神様」メンタープランのご案内★★★
ナビゲーターの「なつこ」が講師となって、皆さんのWebデザイン・プログラミング学習をサポートする「メンタープラン」を実施中です！
【お知らせ動画】
「Webの神様」があなたのメンターになります
https://youtu.be/pJfpEVjAdqk
【プランの詳細・お申し込み（MENTA）】
https://menta.work/plan/5148
未経験から学習中の方、Web・IT業界に就職・転職活動中の方、フリーランス独立を目指して活動中の方など、必要として頂いている皆さんのお役に立てるように精一杯サポートさせて頂きます！
是非ともご検討いただければ幸いです。
★★★★★★★★★★★★★★★★★★★★★★★
〈目次〉
・オープニング 0:00
・前置き：この動画で解説する範囲について 1:11
・手順① デザインカンプを確認する 2:13
・補足：デザインデータの形式について 3:15
・デザインカンプの取り扱いルール 5:20
・「アウトライン化」されたデータについて 7:16
・補足：「Google Fonts」のダウンロード 12:17
・手順② コーディング計画を立てる 13:11
・手順③ HTMLマークアップを行う 19:19
・補足；HTMLマークアップ後の例 23:43
・手順④ 画像素材を書き出す 24:13
・手順⑤ CSSを書いてレイアウトを整える 27:27
・補足；リセットCSSの読み込み 29:21
・手順⑤ CSSを書いてレイアウトを整える 31:05
・最後のまとめ 35:17
--- Webの神様 ---
未経験、初心者のみなさんのHTML・CSSの学習を応援していくチャンネルです！
【タグ】
#Webデザイン #コーディング
【SNS】
--- Twitter ---
https://twitter.com/webgodweb
--- Facebook ---
https://www.facebook.com/webgodweb/
【運営会社】
株式会社カラフルクローバー
https://www.colorful-clover.co.jp/