Travel Blog【Code Jump】
HTML/CSSで旅行ブログサイトを制作しました。
この作品について
HTML/CSSを用いて制作した旅行ブログサイトです。
レイアウト設計や余白のバランスを意識し、見やすく使いやすいサイトになるよう細部まで丁寧にコーディングしました。
使用技術
- HTML
- CSS
制作情報
- 制作期間
- 7日
- 制作時期
- 2026年4月
- 担当範囲
- コーディング
- 使用ツール
- Visual Studio Code
工夫したこと
- Flexboxを活用し、メインコンテンツとサイドバー、フッターなど複数のレイアウトを画面幅に応じて切り替えられるよう実装しました。
- position: fixed を用いてヘッダーを常に表示し、スクロールしてもナビゲーションしやすいUIを実現しました。
- 共通のwrapperクラスを使用してコンテンツ幅を管理し、各セクションの余白や配置に一貫性を持たせました。
苦労したこと
- PCでは2カラム、スマートフォンでは1カラムへ切り替わるレスポンシブ対応で、レイアウトが崩れないようFlexboxやwidthの調整を繰り返しました。
- サイドバーやフッターの各コンテンツが均等に見えるよう、余白や要素間のバランスを細かく調整しました。
- デザインを再現するため、文字サイズ・行間・余白・ボーダーなど細かなデザインの調整を何度も行いました。
デモサイト
サイトを見る