DETAIL
制作物詳細
Rich-Life
- Basic認証
- 「BasicID」:richlife
「Pass」:richlife - 制作期間
- 7日
- 使用スキル
- HTML、CSS、jQuery、Gulp、SASS、EJS
- 担当範囲
- コーディング
- 制作物説明
- Figmaで制作された家具・家電販売店LPのデザインデータをもとに制作したサイトです。
PC画面時とスマホ画面時で大きくデザインの変わる場所がいくつかあるため、対応したHTMLやCSSの記述を工夫しました。
また、全く同じの内容のセクションが3つあるため、そのセクションのみEJSで別ファイルに記述し、該当箇所で呼び出すことによってコードをスッキリさせるといったことも行いました。
苦労したポイントはデザインデータ以外の画面幅への対応です。
デザインが大きく変わる部分とそうでない部分があるため切り替える画面幅に迷うことや、要素の多い箇所では画面幅を少し変えるだけで簡単に崩れてしまうといった問題が発生しました。
これに対し、pxで指定しているところを%単位に置き換えたり、メディアクエリを数個増やして対応していきました。