MENU
  1. ホーム
  2. HTML/CSS
  3. CodeJump | Store

CodeJump | Store

HTML/CSS
目次

概要

CodeJumpの「COFFEE」ランディングページデザインをもとに、模写コーディングを行いました。
Figmaデザインを参考に、HTML・CSS・jQueryを使用して1ページ完結型のLPを再現しています。

背景固定（parallax風）表現やスムーススクロール、レイアウトの余白設計など、LP特有のUI表現を意識して制作しました。

GitHub
デモサイト

使用技術

  • HTML
  • CSS
  • JavaScript（jQuery）
  • CSS Flexbox
  • background-attachment（固定背景表現）
  • スムーススクロール実装
  • Git / GitHub

実装内容

ヘッダー（ヒーローセクション）

min-height: 100vh を使用し、ファーストビュー全画面のヒーローセクションを実装しました。

ナビゲーションは右寄せのFlexboxレイアウトで構成し、スクロールアンカーリンクで各セクションへ移動できる構造にしています。

MENUセクション

2カラム構成のメニュー表示を実装しました。

  • display: flex による左右レイアウト
  • dl / dt / dd を使用した料金リスト構造
  • 区切り線（dotted border）による視認性の向上

また、セクション背景には固定背景を使用し、視覚的なアクセントを付けています。

ABOUTセクション

テキストコンテンツを中心とした情報セクションを実装しました。

  • Flexboxによる2カラムレイアウト
  • 箇条書きリストによる情報整理
  • CSS擬似要素を用いた装飾ボタン（四辺ラインアニメーション）

ボタンは ::before / ::after と span の擬似要素を組み合わせ、ホバー時に枠線がアニメーションするように実装しています。

LOCATIONセクション

Google Maps埋め込みを用いた店舗情報セクションを実装しました。

  • iframeによるGoogle Map表示
  • filter: grayscale(1) によるモノクロ化
  • 住所・営業時間・電話番号の構造化表示

視認性を意識し、情報を左寄せで整理しています。

スムーススクロール（jQuery）

ナビゲーションリンクをクリックした際に、ページ内をスムーススクロールする機能を実装しました。

$('a[href^="#"]').click(function () {
  let href = $(this).attr("href");
  let target = $(href == "#" || href == "" ? "html" : href);
  let position = target.offset().top;
  $("html,body").animate({ scrollTop: position }, 600, "swing");
  return false;
});

ページ内遷移を滑らかにすることで、LPとしての操作性を向上させています。

レスポンシブ対応

@media screen and (max-width: 767px) を使用し、スマートフォン表示に対応しています。

主な対応内容：

余白の再設計

ヘッダーのフォントサイズ調整

メニューセクションの2カラム → 1カラム化

ABOUTセクションの縦並び化

固定背景（parallax）の無効化（iOS対策）

HTML/CSS
CodeJump Store
目次