DETAIL
制作物詳細
SAKATA KOMUTEN
- Basic認証
- 「BasicID」:sakatakomuten
「Pass」:sakatakomuten - 制作期間
- 3日
- 使用スキル
- HTML、CSS、jQuery、Gulp、SASS、EJS
- 担当範囲
- コーディング
- 制作物説明
- Photoshopのデザインデータを元にコーディングした工務店LPです。
デザインデータではPC画面(1440px)とスマホ画面(375px)のものが用意されていたため、これを基準にその他の画面幅でもレスポンシブ対応しました。
また、BEMをベースとしたCSS設計を使用し、さらにGulpによってコード整形や画像圧縮を行いました。
苦労したポイントは、「コンセプト」の文章部分や「施工実績」の背景部分といった画面端に接しているデザインをレスポンシブ対応させることです。
デザインが画面幅が変わるごとに大きく動いてしまったり、デザインの比率を逆転させないとデザインがかなり崩れてしまうことがありました。
これに対し、position:absoluteをかけてbottom: 0;で固定したり、メディアクエリを少し増やしてそれぞれで対応させることによって実装できました。