Treat Myself

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

余裕がある人向け課題 アコーディオン編 【30Daysトライアル2nd】

スポンサーリンク

accordion

30Daysトライアル2nd Day25 余裕がある人向け課題の感想記事です。

 

 

課題の内容

 本課題のアコーディオンは縦並びでしたが、余裕がある人向けは横並びのアコーディオンの実装です。

 

jQueryは本課題で使ったものを使えるので、本課題ができていればそこまで苦しむことはないのかなという印象です。(私はjQueryが苦手すぎるため本課題でかなり苦しみました。。。)

 

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

課題のURLはこちら↓

https://xd.adobe.com/spec/1bfd6b1f-bb56-4dc7-63d0-0bb928eb14de-6dcc/

 

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

 

課題の完成イメージ↓ 

acordion

 

アコーディオンのボタンにマウスホーバーしたらボタンの色が変わりそうな雰囲気がでているけれど、白いボタンってopacityつけてもわかりづらいだろうからどうしたものか。。って感じで着手しました。 

 

チャレンジ結果

 レスポンシブが苦手なので練習としてタブレットサイズになったら縦並びになるようにしてみました。(要素が少ないレスポンシブなら少し慣れてきた気がします)

 

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

 

気になっていたマウスホーバーのボタンの色の変化はキーカラーとして使っている青色をSCSSの関数を使って明るくした色を設定しました。

 

本課題のアコーディオンはひとつ開いたら、開いている他のアコーディオンは自動的に閉まるようにしましたが、今回は横並びのアコーディオンなので、両方とも開いたままインできるようにしています。

 

アコーディオンの実装でお世話になった記事はこちら↓

flex-box.net

 

最後に

jQueryに関しては苦手意識が強くあるため、ほとんどコピペで済ましているのが現状ですが、コピペで使わせてもらっているコードを解読して何が起こっているのが考えるだけでも勉強になっています。

全部をいっぺんにできるようにはなれないけれど、少しずつできることを増やして最終的にはコピペに頼らずjQueryを扱えるようになりたいなーって思ってます。

 

 

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

 

treatmyself.hatenablog.jp