【超初級編】XDデザインカンプからのコーディングをしよう【無料】
Web制作を始めて約2年半となりました！
今も副業として活動を続けております！こうだいです。
XDデザインカンプデータはこちら
XDデザインカンプからのコーディングをする理由
超初級編という事でデザインカンプを作成しました。
今回は超初級編ということですごくシンプルなデザインとなっています！
デザイナーではないので、プロからの厳しいご指摘はおやめください・・・。
表題のXDデザインカンプからコーディングを行う理由ですが、案件でXDデザインカンプが多いからです。
もちろんPhotoshopやIllustratorのデザインカンプも案件で出てくる可能性はあるので、後日作成する予定です。
コーディング制作手順
①要素分解していこう
上記写真の様にheader、main、footerに分解して考えます。
②ヘッダーの実装
この部分については色々な実装方法がありますが、初めてで難しいと感じる方がおられるかもしれませんので、参考記事を貼っておきます。
こちら一度参考にしてみてください。
③main のABOUT部分の実装方法
結論から言うとdisplay: flexを使用して実装していきましょう！
コーディングをする上でこれから多用すること間違いなしです！
もし使い方が分からない方は下記の記事を参考にしてみてください。
これから分からない事があれば自分で調べていく必要があるので、ググり力の向上はかなり大事です！
上記の様に写真とテキストの横並びにする方法が分からない時であれば、「コーディング 写真と文章横並び」これで色々な記事が出てきます。
そこから自分が分かり易い記事を探し出して答えを導き出す作業が必要になってきます！
コーダーは「自走力」が大事だと昔からよく言われています。
実際に案件をやっていく上でかなり重要だと認識しているので、調べつつ答えの導き方をマスターしていきましょう。
コーディングが完了すれば
次はこちらのコーディングにチャレンジしてみてください！
少し難易度は高くなりますが、こちらのコーディングが出来てこればかなり自信もついてきます。
そして、コーディングを終えれば感想をください。
・この部分の解説がもう少し欲しい
・簡単すぎるのでもう少し難易度を上げたデザインカンプを作成して欲しい
・ヘッダーの実装方法が分からないのでポイントを絞った解説が欲しい
上記の様な感想お待ちしています！
改善を繰り返してこれらのnoteでスキルアップできる様になればいいなと思っています👏