URL

https://port-folio.xrea.jp/datamania/ （ベーシック認証あり）

カテゴリー

模写コーディング

担当

コーディング

スキル

HTML、CSS、JavaScript（jQuery）

概要

KROWLさんが作成された、コーディング課題である「Data Mania」を模写しました。要点をおさえたコンパクトなランディングページとなっております。

ただ現在、デモサイトは閉鎖されたみたいですので、恐縮ですがサンプルとの照らし合わせができません。つきましては作成した模写サイトでの確認のみでお願いいたします。

【特徴】

• XDファイルでのデザインカンプをもとに制作いたしました。
• レスポンシブデザインのブレークポイントは3か所、パソコン、タブレット、スマートフォンに対応してます。

ポイント

CSSのプロパティであるpositionが効果的に使われており、これを利用してボタンの配置がうまく施されています。

また「お客様の声」にて、パソコンVer.とスマートフォンVer.とで順番が入れ替わるのも模写において難儀なポイントでした。