レスポンシブな「近日公開」ページの構築

私は最近、ファッション小売業者向けにレスポンシブな「近日公開」ランディング ページを作成するというフロントエンド メンターの課題に取り組みました。 概要では、電子メール購読フォーム、魅力的な背景画像、デスクトップとモバイル間でのシームレスな応答性が求められていました。この投稿では、私のアプローチ、重要な決定、問題解決戦略について詳しく説明します。

フェーズ 1: プロジェクトの解体

コーディングの前に、プロジェクトの要件を注意深く分析しました。

• ロゴと「Coming Soon」メッセージを紹介するヒーロー セクション。
• ユーザー登録用の電子メール購読フォーム。
• 画面サイズに動的に適応する背景画像を備えたレスポンシブなレイアウト。
• 正確な電子メール入力を保証するための基本的な電子メール検証。

フェーズ 2: HTML 構造

最小限の div を備えたクリーンでセマンティックな HTML 構造を優先しました。レイアウトは 2 つの主要なセクションで構成されていました:

1. 詳細セクション: ロゴ、見出し、説明、電子メール入力フォームを収容します。
2. 画像セクション: 背景画像を表示します。

私の HTML 構造:

<code class="language-html"><div class="coming-soon-container">
  <!-- Details Section -->
  <div class="details">
    <!-- Logo, Heading, Description, Form -->
  </div>
  <!-- Image Section -->
  <div class="image-container">
    <img src="..." alt="Coming Soon Image">
  </div>
</div></code>

フェーズ 3: CSS スタイルと応答性

Flexbox は、視覚的に魅力的で応答性の高いレイアウトを実現するのに役立ちました。 これにより、水平方向 (デスクトップ) と垂直方向 (モバイル) の両方で要素の配置が合理化されました。

当初、.coming-soon-container は横並びのデスクトップ レイアウトに display: flex を使用していました。 メディア クエリ (@media (max-width: 768px)) は、モバイルの flex-direction を column-reverse に切り替え、画像を詳細の下に配置しました。

フレックスボックス CSS:

<code class="language-css">.coming-soon-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@media (max-width: 768px) {
  .coming-soon-container {
    flex-direction: column-reverse;
  }
}</code>

フェーズ 4: メール入力と矢印アイコンのデザイン

電子メール フォームは、クリーンでモダンな美しさを目指してデザインされました。 入力フィールドと送信ボタン (矢印アイコン) は、視覚的に魅力的なスタイルになっています。

入力とアイコンの CSS:

<code class="language-css">.input-container {
  position: relative;
  width: 385px;
}

/* ... (input and span styles) ... */</code>

フェーズ 5: レスポンシブ ヒーロー イメージ

object-fit プロパティにより、ヒーロー画像が歪みなく応答性良く拡大縮小されるようになりました。

画像コンテナの CSS:

<code class="language-css">.image-container {
  width: 40%;
  height: 100vh;
  overflow: hidden;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}</code>

フェーズ 6: JavaScript 電子メールの検証

クライアント側の電子メール検証は、電子メール形式を検証するために JavaScript を使用して実装されました。 正規表現により、標準の電子メール パターンに対して入力がチェックされました。

JavaScript 検証関数:

<code class="language-javascript">function validateEmail() {
  // ... (validation logic) ...
}</code>

結論

この「近日公開」ページ プロジェクトは、私のレスポンシブ デザインとフォーム検証のスキルを磨きました。 レイアウト、カスタム スタイル、モバイル ファーストの原則に Flexbox を利用することで、クリーンで機能的なデザインが実現しました。 フロントエンド開発スキルを磨くには、Frontend Mentor のチャレンジを強くお勧めします。 完全なコードは GitHub で入手できます: GitHub Link

以上がレスポンシブな「近日公開」ページの構築の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。