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

デイトラ30DAYSトライアルの感想・体験

こんにちは、タキ(@engineeraru)です。

デイトラ2期(#30DAYSトライアル2nd)「DAY8 AdobeXDからフッターのコーディング」について解説します。

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

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

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

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

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

 

画像を使う

or

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

でOKだと思います。

 

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

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

>参考:カラーについて

 

トップへ戻るボタン

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

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

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

 

グラデーションを描くCSS

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

 

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

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

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

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

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

 

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

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

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

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

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

Flexbox Froggyの回答まとめ

 

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

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

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