こんにちは！管理人ピスカです（@rina_pisca）！
さて、デイトラでは今までに初級編でHTMLとCSS、Bootstrapを。
中級編でJavaScriptとjQueryとSassについて学んできました。
そして今回はデザインカンプからのコーディングを学んでいきます。
この力はコーダーに必須の能力とのことなのでしっかり身につけたいです。
１. ヒアリング
２. 仕様決定
３. デザイナーがデザインを作成
４. デザインデータから静的にコーディング
５. 案件によってはWPテーマ化など
６. 納品
私たちコーダーの担当するところは４、５のここ。
この力が身につけばクラウドソーシングなどの募集の幅も広がり、「副業」レベルから「実務」レベルにまで習得できるのでがんばります！
デイトラとは
筆者は以前少しだけワードプレスでのブログ運営はしておりましたがすぐに挫折し、ほぼWEBスキル0からのスタートです。
まず、HTML、CSS、コーディングって何？のレベルから始めました。
デイトラWEB制作コースはそんな全くの未経験でも初級編だけで月5万のスキルが身に付くという内容の“未経験でも・迷わず・楽しく”学べるオンラインスクールです。
中級、上級レベルになると本業でバリバリやっていけるスキルが身につきそうです。
DAY１０〜１１ AdobeXDでWEBカンプを作ってみよう
まずは、デザインカンプとはどんなものでどういうふうに作られているのか、から学んでいきます。
デザインカンプは「コーディングの設計図」のようなもので、コーディング業務はカンプのデザイン通りに実装していくのが基本の流れ。
デザインカンプは様々なソフトで作られていますが、無料で高機能でシェア率の高いFigmaでの作り方を学びました。
私は、Canvaをよく利用するので、すっと頭に入ってきました。
利用者が多いので調べればすぐに使い方が見つかるのもメリットですね！
DAY１２ 準備編・ヘッダーとメインビジュアルのコーディング
さて、ここからfigmaのデザインカンプからのコーディングを学んでいきます。
練習するデザインはこちら。
準備
まずはいつも通り、コーディングをする準備としてVSCodeのフォルダを作るところから始めていきます。
とはいえ、何度新しいファイルを作っても忘れてしまうのは不思議なものです；；
ありがたいことに、レッスン動画ではフォルダを作るところから解説してくれていました♪
まずはそのサイト全体のフォルダを作り、index.html、CSSフォルダにstyle.css、imgフォルダ、Sassフォルダにstyle.scssを作る。
そしてデザインカンプから画像をダウンロードして、imgフォルダに入れる。
※ロゴなどぼやけたら困るものは２倍（〜@2x.〜となっているもの）を選ぶ。