デザインカンプからコーディングをする時の作業の流れについて、デザインデータの取り扱いからコーディング時の活用方法まで、初心者向けに徹底解説しました！ 今回は「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/