Web Entertainment Design【Code Jump】

デモサイトをもとに、制作しました。

この作品について

HTML/CSSを用いて制作した企業サイトです。
レスポンシブ対応を意識しながら、レイアウトや余白を丁寧に再現しました。

使用技術

HTML
CSS

制作情報

制作期間: 7日
制作時期: 2026年3月
担当範囲: コーディング
使用ツール: Visual Studio Code

工夫したこと

Flexboxを活用し、画像とテキストを横並びに配置することで、画面全体に統一感のあるレイアウトを実装しました。
position: absoluteを使用し、会社情報セクションの画像配置など、デモサイトに近いレイアウトを再現できるよう工夫しました。
wrapperを用いてコンテンツ幅を統一し、各セクションの余白や配置に一貫性を持たせることを意識しました。

苦労したこと

PC・スマートフォンの両方でレイアウトが崩れないよう、Flexboxやメディアクエリを用いたレスポンシブ対応の調整に苦労しました。
会社情報セクションでは、画像をposition: absoluteで配置しているため、レスポンシブ時のレイアウト切り替えや位置調整を何度も見直しました。
デザインに近づけるため、余白・文字サイズ・行間・画像サイズなど細かなデザイン調整を繰り返しました。

デモサイト

サイトを見る