2022-01-21 01:00:18 +05:30
|
|
|
|
---
|
|
|
|
|
|
id: 587d78af367417b2b2512b04
|
|
|
|
|
|
title: プロダクトのランディングページを作成する
|
|
|
|
|
|
challengeType: 3
|
|
|
|
|
|
forumTopicId: 301144
|
|
|
|
|
|
dashedName: build-a-product-landing-page
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
# --description--
|
|
|
|
|
|
|
|
|
|
|
|
**目標:** こちら <https://codepen.io/freeCodeCamp/full/RKRbwL> と同様の機能を持つ [CodePen.io](https://codepen.io) アプリを構築します。
|
|
|
|
|
|
|
|
|
|
|
|
以下の[ユーザーストーリー](https://en.wikipedia.org/wiki/User_story)を満たし、すべてのテストがパスするようにしてください。 あなた独自のスタイルを与えてください。
|
|
|
|
|
|
|
2022-01-22 20:38:20 +05:30
|
|
|
|
このプロジェクトを完了するために、HTML、JavaScript、CSS を使用することができます。 これまでのレッスンでカバーされた純粋な CSS の練習をするため、純粋な CSS の使用を推奨します。 Bootstrap や SASS を使用しても構いません。 このプロジェクトで追加のテクノロジー (jQuery、React、Angular、Vue など) を使用することは推奨されません。使用する場合は自己責任で使用してください。 React のようなさまざまな技術スタックで作業する機会は他のプロジェクトで得られます。 このプロジェクトで推奨される一連のテクノロジーを使用している場合の不具合報告については、freeCodeCamp にて報告を受け入れ、修正するよう努めます。 ハッピーコーディング！
|
2022-01-21 01:00:18 +05:30
|
|
|
|
|
|
|
|
|
|
**ユーザーストーリー #1:** 私のプロダクトランディングページには `id="header"` を持つ `header` 要素があります。
|
|
|
|
|
|
|
|
|
|
|
|
**ユーザーストーリー #2:** `header` 要素内には `id="header-img"` を持つ画像が表示されます。 会社のロゴがあればここでいいイメージを与えることができるでしょう。
|
|
|
|
|
|
|
|
|
|
|
|
**ユーザーストーリー #3:** `#header` 要素内に `id="nav-bar"` を持つ `nav` 要素があります。
|
|
|
|
|
|
|
|
|
|
|
|
**ユーザーストーリー #4:** `nav` 要素内に少なくとも 3 つのクリック可能な `nav-link` クラスの要素があります。
|
|
|
|
|
|
|
|
|
|
|
|
**ユーザーストーリー #5:** `nav` 要素内の `.nav-link` ボタンをクリックしたら、ランディングページの対応するセクションに移動します。
|
|
|
|
|
|
|
|
|
|
|
|
**ユーザーストーリー #6:** `id="video"` を持つプロダクトの埋め込み動画を見ることができます。
|
|
|
|
|
|
|
|
|
|
|
|
**ユーザーストーリー #7:** 私のランディングページには `id="form"` を持つ `form` 要素があります。
|
|
|
|
|
|
|
|
|
|
|
|
**ユーザーストーリー #8:** フォーム内には、E メールアドレスが入力可能な `id="email"` を持つ `input` フィールドがあります。
|
|
|
|
|
|
|
|
|
|
|
|
**ユーザーストーリー #9:** `#email` 入力フィールドには、フィールドの用途をユーザーに知らせるためのプレイスホルダ―テキストが必要です。
|
|
|
|
|
|
|
|
|
|
|
|
**ユーザーストーリー #10:** `#email` 入力フィールドは、入力されたテキストがメールアドレスであるか確認するために HTML5 のバリデーションを使用します。
|
|
|
|
|
|
|
|
|
|
|
|
**ユーザーストーリー #11:** フォーム内には、`id="submit"` を持つ送信ボタンの `input` があります。
|
|
|
|
|
|
|
|
|
|
|
|
**ユーザーストーリー #12:** `#submit` 要素をクリックすると、email の情報が静的ページに送信されます (このモック URL を使用してください: <https://www.freecodecamp.com/email-submit>)。
|
|
|
|
|
|
|
|
|
|
|
|
**ユーザーストーリー #13:** ナビゲーションバーは常にビューポートの上部に表示されている必要があります。
|
|
|
|
|
|
|
|
|
|
|
|
**ユーザーストーリー #14:** 私のプロダクトランディングページには、少なくとも 1 つのメディアクエリがあります。
|
|
|
|
|
|
|
|
|
|
|
|
**ユーザーストーリー #15:** 私のプロダクトランディングページは、少なくとも 1 つの CSS フレックスボックスを使用しています。
|
|
|
|
|
|
|
|
|
|
|
|
<a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>この CodePen テンプレートを使用して</a>あなたのプロジェクトを構築することができます。`Save` をクリックすると、あなた用の pen を作成することができます。 または、この CDN リンクを使用して任意の環境でテストを実行できます: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
|
|
|
|
|
|
|
|
|
|
|
完了したら、すべてのテストがパスする状態の作業プロジェクトの URL を送信します。
|
|
|
|
|
|
|
|
|
|
|
|
# --solutions--
|
|
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
|
// solution required
|
|
|
|
|
|
```
|
