目次
概要
CodeJumpの「Profile」を模写コーディングしました。
Figmaデザインをもとに、HTML、CSS、JavaScriptを使用し、レスポンシブ対応を行いました。
商品一覧ページや商品詳細ページを実装し、CSS GridやFlexboxを活用してレイアウトを構築しています。
使用技術
- HTML
- CSS
- JavaScript
- Flexbox
- CSS
- Grid
- Git
- GitHub
- GitHub Actions
実装内容
ヘッダー
Flexboxを利用してロゴとハンバーガーメニューを配置しました。
JavaScriptを使用し、メニューの開閉機能を実装しています。
商品一覧ページ
CSS Gridを利用して商品を4カラムで表示しました。
grid-template-columns: repeat(4, 1fr);を使用し、均等なレイアウトを実現しています。
Companyページ
会社情報を表示するレイアウトを作成し、Googleマップを埋め込みました。
レスポンシブ対応
@media screen and (max-width: 900px)を使用し、スマートフォンでは商品一覧を2カラム表示に変更しています。
また、商品詳細ページや会社概要ページも縦並びレイアウトへ切り替えています。