Treat Myself

海外生活中アラサー女子の英語・プログラミング学習備忘録

余裕がある人向け課題 フッター編 【30Daysトライアル2nd】

スポンサーリンク

footers

30Daysトライアル2nd Day16 余裕がある人向け課題をやった感想記事です。

 

 

課題の内容

Day16の余裕がある人向け課題↓

  • PerfectPixelでチェック
  • フッター別パターンの作成

 

この記事では「フッター別パターンの作成」をやってみた感想記事を綴っていきます。

 

コーディング課題のリンクとイメージ

課題のURLはこちら↓

https://xd.adobe.com/spec/171b68cb-2cd6-4415-7b7f-acaa279b263b-612a/grid

 

(パスワードは東フリさんのスラックに参加すると確認できます)

 

 課題の完成イメージ↓ 

 

footers

 

フッターの一部に背景の画像を入れたり、SNSの投稿を埋め込んだりする感じですね。

 

チャレンジ結果

相変わらずレスポンシブではないのですが、こんな感じにできました↓

See the Pen 30 DAYS trial 2nd footer by Yaponka (@Yaponka) on CodePen.

 

部分的に背景を入れる方法としては「position: absolute; 」を使い、「z-index」で重なりの調整を(文字が一番上に表示されるように)しています。

 

最後に

本課題ではDAY16まで進めるとデザインカンプからのコーディングが一旦完了します。

余裕があるひと向けの課題もすべてやりきるとできるようになったコーディングのバリエーションが広がったことを実感できます。

 

私はレスポンシブに対して特に苦手意識があることに気付いたので、少しずつでも苦手意識を取り除けるように頑張っていきます。

 

30Daysトライアル2ndの本課題の感想はこちらからどうぞ↓

 

treatmyself.hatenablog.jp