静的から動的へ: レスポンシブな 1 ページ Web サイトの構築

静的から動的へ: レスポンシブな 1 ページ Web サイトの構築
コード愛好家の皆さん、こんにちは！今日は、「The Last Stop Café」という架空のカフェのレスポンシブな 1 ページ Web サイトを構築した私の最近の経験を共有したいと思います。このプロジェクトは、HTML、CSS、JavaScript を組み合わせてスムーズでユーザーフレンドリーなエクスペリエンスを作成するための優れた演習でした。ご自身のプロジェクトに適用できる重要なポイントをいくつか見ていきましょう!

https://coffeepleace.netlify.app/

1. 構造が重要: 基盤としての HTML

1 ページの Web サイトを構築する場合、HTML 構造は非常に重要です。ここにいくつかのヒントがあります:

コンテンツに意味を与え、アクセシビリティを向上させるには、、、、、などのセマンティック HTML5 タグを使用します。
コンテンツを論理的なセクションに整理します。私たちのカフェ サイトには、概要、サービス、メニュー、ギャラリー、チーム、連絡先のセクションがありました。
セクションには id 属性を使用します。これは後でスムーズにスクロールするために重要になります!

私たちについて

2. 目的のあるスタイル: レスポンシブ デザイン用の CSS

レスポンシブ デザインはオプションではなくなりました。すべてのデバイスでサイトの見栄えを良くする方法は次のとおりです:

モバイルファーストのアプローチを使用します。モバイル デバイス用のスタイルから始めて、メディア クエリを使用して大きな画面に合わせて調整します。
レイアウトに CSS フレックスボックスまたはグリッドを活用します。メニュー項目には Flexbox を使用しました:

.menu-items {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

スケーラビリティを向上させるために、固定ピクセル値の代わりに相対単位 (em、rem、パーセンテージなど) を使用します。

3. 命を吹き込む: インタラクティブ性のための JavaScript

JavaScript は魔法が起こる場所です。以下に、私たちが実装した主な機能をいくつか示します:
スムーズなスクロール
不快なジャンプの代わりに、セクションへのスムーズなスクロールを実装しました:

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', function (e) {
    e.preventDefault();
    document.querySelector(this.getAttribute('href')).scrollIntoView({
      behavior: 'smooth'
    });
  });
});

レスポンシブナビゲーション

ドロップダウン メニューを切り替えるモバイル デバイス用のバーガー メニューを作成しました。

const menuBtn = document.getElementById("menu-btn");
const menu = document.getElementById("menu");

menuBtn.addEventListener("click", () => {
  menu.classList.toggle("hidden");
});

コンテンツの動的読み込み
すべてのコンテンツをハードコーディングする代わりに、JavaScript を使用してデータを動的にロードしました。

const menuSection = document.getElementById("menu");
menuData.forEach(item => {
  const menuItem = document.createElement("div");
  menuItem.innerHTML = `
    <h3 id="item-name">${item.name}</h3>
    <p>${item.description}</p>
    <span>${item.price}</span>
  `;
  menuSection.appendChild(menuItem);
});

4. パフォーマンスに関する考慮事項

パフォーマンスはユーザー エクスペリエンスの鍵であることを忘れないでください。ここにいくつかのヒントがあります:

画像をウェブ用に最適化します。 WebP などの最新形式の使用を検討してください。
CSS および JavaScript ファイルを縮小します。
すぐには表示されない画像には遅延読み込みを使用します。

5. テストとデバッグ

常にさまざまなデバイスやブラウザで Web サイトをテストしてください。 Chrome DevTools は、デバッグと応答性のテストの味方です。

結論

レスポンシブな 1 ページの Web サイトを構築することは、HTML、CSS、JavaScript のスキルを練習する優れた方法です。構造、スタイル、対話性、パフォーマンスなど、Web 開発のすべての重要な側面について学びます。
コーディングを楽しんでください。コーヒーが濃く、コードにエラーがありませんように!

ソースコードをダウンロード: https://buymeacoffee.com/techmobilebox/e/296490

以上が静的から動的へ: レスポンシブな 1 ページ Web サイトの構築の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。