【制作時期と期間】
2020年9月/2週間
コーディング：約18時間
【学んだ点】
今回は動画教材で学びながらモダンなCSSの実装を試していく、またScssとターミナルを用いて体系的にファイルを構築していく方法を学ぶという趣旨で作成しました。
上記趣旨のもとで、JavaScript等を一切使用せずに、CSSだけでどこまでアニメーションや装飾ができるのかということを学ぶことができました。
具体的に学びが多かった点は、transformプロパティの様々なバリエーションを利用して多様な動きを出せること。またclip-pathやbackground-blend-modeといった、装飾をより豊かにできるプロパティを新たに体験できたことです。
さらにターミナル、node.jsを用いてバックグラウンドでScssとCSSの連結や圧縮、prefix付与などを一括で行う方法も学びました。今後は時間ができた際に、さらにJavaScriptを追加して実際に使用できる状態までページを進化させたいと思っております。
【サイト詳細】
下記URLにてデモサイトを公開しておりますので、実際にぜひ動作をご確認いただけましたら幸いです。
※デザインと教材のコピーライト：Jonas Schmedtmann氏
https://eiisg.com/Natour_demo/
※デスクトップ版
※モバイル版
