DAY8:XDからフッターのコーディング

以下のXDのデザインカンプをレスポンシブ込でコーディングしてください。DAY7の続きにコーディングしてく感じになります。

https://xd.adobe.com/spec/bb6eef73-7144-417b-608f-9fed26e6dbbf-cd5f/
※ パスワードはSlackの「#トライアル課題」にピン留めしています。
Slackへのグループ参加は東京フリーランスをご参考ください。

XDの使い方は、こちらの「共有されたXDの使い方」の項目を参考にしていただけたらと思います。

Adobe XDのデザインカンプをURLで共有するメリットと使い方(※コーダー視点)

コーディングに必要な値はデザインカンプから取得できます。その他の条件としては、以下の条件で作成してください。

  • 全体的にリンクの設定は不要
  • スマホ時は縦並びにする
  • 背景はグラデーション

余裕があったら…

※ デザインカンプの再現は別のHTMLファイルに作成してください。

PerfectPixelでチェック

DAY3でやった内容になります。

比較用の元画像

フッターの別パターンも試してみる

スマホ時の固定フッターや部分的な背景、SNS系のウィジェットの埋め込みはよくあるので、ぜひ作ってみてください!
https://xd.adobe.com/spec/171b68cb-2cd6-4415-7b7f-acaa279b263b-612a/

このページが役に立ったら
いいね!お願いします

運営の励みになります...。

関連の記事