Treat Myself

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

余裕がある人向け課題 ニュース編 【30Daysトライアル2nd】

スポンサーリンク

news

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

 

 

課題の内容

余裕があれば、ぜひニュース表示の別パターンも練習してみてください👍

 

ということで、余裕は全然ないですが、手を動かしてコーディング実践量を増やしたいので取り組みました。

 

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

課題のURLこちら↓

https://xd.adobe.com/spec/b106a10c-9c0b-41b9-6d1b-8597489cc319-c737/grid

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

 

 課題のイメージ↓ 

news

 

本課題でも悩まされた各ニュース項目の下に引かれてるボーダーがどちらにも含まれていることが確認できます。。

 

チャレンジ結果

今回はボタン部分はちゃんとボタンとわかるように、マウスホーバーするとカーソルがポインターになる・変化がある様にできました。(DAY12のボタン製作ノックのおかげです)

 

一番苦労したところは「Widget」右側にあるブログ一覧のボーダーを付ける部分。

 

よーく見ると、このブログ一覧には背景色がピンクではない所には青のボーダーがあるのを再現するために時間がかかりました。

 

私が実行した解決策↓

  • 背景色がピンクの部分は上2カ所の角のみborder-radiusを付ける
  • 青のボーダーは右・下・左のみ付けて、下の2カ所の角のみborder-radiusを付ける

 

もっと効率的な方法があるかもですが、見本と同じにできたのでOKとしました。

 

また、スペースの空き具合が見本と差異がありますが、そこはもう目をつぶってしまいました。(力尽きました)

レスポンシブにもなっていません(すみません。。)

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

 

最後に

余裕がある人向け課題をやることでも新しい発見や学びがあるので30Daysトライアル2ndのクオリティの高さはすごいと思います。

できないこと・目をそらしている部分はたくさんありますが、できるようになったこともたくさんあるので、できるようになったことを喜びながらこれからも課題をこなしていきます。

 

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

treatmyself.hatenablog.jp

 

treatmyself.hatenablog.jp

  

treatmyself.hatenablog.jp

 

treatmyself.hatenablog.jp