Coding
Portfolioコーディング（納品実績）
- 案件内容
- Portfolioページのコーディング
- デモページ
- View Demo ↗
- 制作内容
- 支給されたデザインをもとに、HTML / CSSでコーディング
- 対応画面
- PC（レスポンシブ対応なし）
- 使用ツール
- HTML / CSS
- 制作の目的
- 支給されたデザインを再現し、見た目だけでなく操作性にも配慮したPortfolioページを制作しました。
- 工夫した点
- デザインのレイアウトや余白を再現しながら、Works画像や「and more」にホバー時の動きを実装しました。
- 掲載について
- 納品作品を掲載許可のもと、デモページとして公開しています。
Demo page / Desktop view
こだわりポイント
支給デザインの再現
レイアウトや余白を調整し、支給デザインに沿ってコーディングしました。
ホバー表現の実装
Works画像と「and more」にホバー時の変化を加え、操作感を持たせました。
セクションデザインの統一
見出しや区切り線、余白を揃え、各セクションを統一して実装しました。