【模写コーディング⑥】コーポレートサイトの模写

OVERVIEW

psdデータから模写コーディングを行いました

YEAR 2020

 今回の模写コーディングではphotoshopからの書きおこしをしました。今までのコーディングではXDというアプリのデザインカンプを使っていたのですが、photoshopやillustratorを使っている企業がまだ多いと聞き、慣れるためにコーディングをしました。

【工夫したところ 】

  • カードの部分が途中で背景色を変化させていたのでそこを意識してコーディングを行った
  • flexboxでのheader制作(floatを禁止にした)
  • アクセスを書いている部分はレスポンシブのときに灰色部分が最初に無くなるように、ピンク背景の部分の幅はあえて%で表さなかった。

【次回の課題】

  • 画像を切り取る際に背景色を後々変える時を考えて、背景削除orトリミングを行うべき
  • 取り出した画像の画質が荒かった場合は自分で加工、編集を掛けるべき
  • sassで@extendを使うようにする。