静的から動的へ: レスポンシブな 1 ページ Web サイトの構築-jsチュートリアル-php.cn

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

WBOY

リリース： 2024-08-30 18:33:12

オリジナル

1084 人が閲覧しました

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

From Static to Dynamic: Building a Responsive One-Page Website

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>${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 サイトの他の関連記事を参照してください。