Cresta Design(株式会社PENGIN様の無料配布デザインカンプからのコーディング)

Cresta Designのページへ

デザインカンプは株式会社PENGIN様(https://pengi-n.co.jp/column/design/coding-practice2/)からお借りしました。

※2024/1/9 追記

株式会社PENGIN様のご意向により、Basic認証をかけました。

【サイトスクリーンショット】

(※サイト内の画像は、配布されていたデザインカンプから書き出した画像になります。)

【製作期間】

約4日

【設計方法】

FLOCSS、BEMを用いてコーディングしました。

【工夫した部分】

・TOPページのファーストビューの高さを過ぎたらという条件と、CONTACTページのファーストビューの高さを過ぎたらという2つの条件をJavaScriptで制御する部分を工夫しました。

・どの画面幅でもレイアウトがすべて最適化されるようにリキッドレイアウトを意識してコーディングしました。