エンジニアステップ

初心者エンジニア(1年目~3年目くらい)のための技術ブログ

【DAY8】AdobeXDからフッターのコーディング【#30DAYSトライアル2nd】

こんにちは、アルパカです

#30DAYSトライアル2ndの復習&解説記事です。

個人的につまずいた箇所、調べた箇所を中心に書いています。

» 参考:Webコーダーとして仕事できるようになる30日まとめ

 

【DAY8課題】AdobeXDからフッターのコーディング

DAY8の課題は「AdobeXDからフッターのコーディング」です。

 

今回は既存技術を使いこなせれば出来るはずです。 

WEBサービス(SNS)のブランドカラーコード

画面右下の色のついたアイコンはSNSへのリンクですね。

 

画像を使う

or

自分で円を作成して背景色をつける

 

でOKだと思います。

私は、WEBサービス(SNS)のブランドカラーコードを利用しました。

今回だと、Twitter,Facebook,Instagramの3つですね。

 

カラーについては以下のページが参考になります。

www.ukar.jp

 

トップへ戻るボタン

画面右下にあるのは「トップへ戻るボタン」ですね。

※不等号を上向きにしたようなやつ

詳しい動きは、まだ無くて良さそうです。

 

グラデーションを描くCSS

グラデーションを描くCSS(というか関数)については、DAY4で学びましたね。

www.engineer-step.com

 

はにわまんさんのソースコードと比較しよう

はにわまんさんのソースコードと比較しましょう。

 

Slackに入って、トライアル課題のページを参照しましょう(CodePenというウェブサービスを使っています)。

※Slackに入っていない人は、ショーヘー@バンコク🇹🇭 (@showheyohtaki) のツイートから加入してくださいね

 

はにわまんさんのコードと比較して修正する前に、自分の元のソースコードファイルはコピーしておくのも忘れずに。

 

【余談】便利そうなツール・WEBサービス

今日はそんなに書くことなかったので、便利そうなツール・WEBサービスを紹介します。

ショーヘーさんのツイートを見逃した人向けです

 

 

Flexbox Froggyは面白いので、是非やってみてください!

すぐ終わると思いますが、一応回答も用意しました↓

www.engineer-step.com

 

~~~

 

ちょっと最近の課題は大変だったので、明日は1日お休み(復習日)のようです。

30日間食らいついて進めるのが(モチベーション的にも)一番効率良いと思うので、キャッチアップがんばりましょう~(灬╹ω╹灬)

 

以上「AdobeXDからフッターのコーディング」というお話でした。

www.engineer-step.com