DETAIL
制作物詳細
MELIA FITNESS
- Basic認証
- 「BasicID」:meliafitness
「Pass」:meliafitness - 制作期間
- 4日
- 使用スキル
- HTML、CSS、jQuery、Gulp、SASS、EJS
- 担当範囲
- コーディング
- 制作物説明
- パーソナルトレーニングジムのサイトで、Figmaで制作されたデザインデータをもとにコーディングしました。
デザインでは文字の間隔を細かく設定しているところがあったため、spanタグを用いて文字同士の間隔までデザイン通りになるよう制作。
苦労した点は、要素が多い箇所のレスポンシブ対応です。
要素が多くてレスポンシブ時に崩れやすい箇所(期間限定キャンペーンセクション)があり、少し画面幅を変えたりメディアクエリの切り替え前後で崩れたりすることも。
こうした問題に対し、メディアクエリを数個増やすのに加え、位置をpxではなく%指定にしてさまざまな画面幅に対応しました。