ストアサイト（書店）【CodeJump】
デモサイトをもとに、レイアウトの再現性を意識して制作しました。
この作品について
HTML/CSSを用いて制作したWebサイトです。
PC・スマートフォンそれぞれで見やすいレイアウトになるよう、レスポンシブ対応を意識して制作しました。
使用技術
- HTML
- CSS
制作情報
- 制作期間
- 7日
- 制作時期
- 2026年3月
- 担当範囲
- コーディング
- 使用ツール
- Visual Studio Code
工夫したこと
- 背景画像と文字を重ねるレイアウトを実装し、デモサイトの見た目を再現できるよう工夫しました。
- Flexboxを活用し、画像とテキストを横並びに配置することで、統一感のあるレイアウトを実装しました。
- wrapperを用いてコンテンツ幅を管理し、各セクションの余白や配置に一貫性を持たせました。
苦労したこと
- 背景画像の上にテキストを重ねるレイアウトでは、文字が読みやすくなるよう配置や余白の調整を繰り返しました。
- 画像とテキストのサイズバランスが崩れないよう、Flexboxやwidthの指定を調整することに苦労しました。
- デモサイトを再現するため、余白・文字サイズ・行間など細かなデザインの調整を繰り返しました。
デモサイト
サイトを見る