2022-01-21 01:00:18 +05:30
|
|
|
|
---
|
|
|
|
|
|
id: 587d78b0367417b2b2512b05
|
|
|
|
|
|
title: テクニカルドキュメントページを作成する
|
|
|
|
|
|
challengeType: 3
|
|
|
|
|
|
forumTopicId: 301146
|
|
|
|
|
|
dashedName: build-a-technical-documentation-page
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
# --description--
|
|
|
|
|
|
|
|
|
|
|
|
**目標:** こちら <https://codepen.io/freeCodeCamp/full/NdrKKL> と同様の機能を持つ [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="main-doc"` を持ち、ページのメインコンテンツ (テクニカルドキュメント) を含む `main` 要素があります。
|
|
|
|
|
|
|
|
|
|
|
|
**ユーザーストーリー #2:** `#main-doc` 要素内に、それぞれのクラスが `main-section` である複数の `section` 要素があります。 最低でも 5 個必要です。
|
|
|
|
|
|
|
|
|
|
|
|
**ユーザーストーリー #3:** 各 `.main-section` 内の最初の要素は、そのセクションの主なトピックを説明するテキストを含む `header` 要素でなければなりません。
|
|
|
|
|
|
|
|
|
|
|
|
**ユーザーストーリー #4:** クラスが `main-section` の各 `section` 要素は、それぞれの `header` のテキストに対応する id も持つ必要があります。 すべてのスペースはアンダースコアに置き換える必要があります (例: "JavaScript and Java" ヘッダーを含む `section` には対応する `id="JavaScript_and_Java"` が必要です)。
|
|
|
|
|
|
|
|
|
|
|
|
**ユーザーストーリー #5:** `.main-section` 要素は少なくとも (それぞれではなく) 合計で 10 個の `p` 要素を含む必要があります。
|
|
|
|
|
|
|
|
|
|
|
|
**ユーザーストーリー #6:** `.main-section` 要素は少なくとも (それぞれではなく) 合計で 5 個の `code` 要素を含む必要があります。
|
|
|
|
|
|
|
|
|
|
|
|
**ユーザーストーリー #7:** `.main-section` 要素は少なくとも (それぞれではなく) 合計で 5 個の `li` 要素を含む必要があります。
|
|
|
|
|
|
|
|
|
|
|
|
**ユーザーストーリー #8:** `id="navbar"` を持つ `nav` 要素があります。
|
|
|
|
|
|
|
|
|
|
|
|
**ユーザーストーリー #9:** navbar 要素には、テクニカルドキュメントのトピックを説明するテキストを含む `header` 要素が含まれている必要があります。
|
|
|
|
|
|
|
|
|
|
|
|
**ユーザーストーリー #10:** さらに、ナビゲーションバーには `nav-link` のクラスを持つリンク (`a`) 要素が含まれている必要があります。 これはクラス `main-section` の各要素ごとに一つ存在する必要があります。
|
|
|
|
|
|
|
|
|
|
|
|
**ユーザーストーリー #11:** ナビゲーションバーの `header` 要素は navbar のどのリンク (`a`) 要素よりも前に置かれなければなりません。
|
|
|
|
|
|
|
|
|
|
|
|
**ユーザーストーリー #12:** `nav-link` クラスの各要素には、各 `section` 内の `header` テキストに対応するテキストが含まれていなければなりません (例えば、もし "Hello world" セクション / ヘッダーがあるならば、ナビゲーションバーには "Hello world" テキストを含む要素が必要です) 。
|
|
|
|
|
|
|
2022-01-22 20:38:20 +05:30
|
|
|
|
**ユーザーストーリー #13:** ナビゲーションバーの要素をクリックしたとき、ページは `main-doc` 要素の対応するセクションに移動しなければなりません (例えば、"Hello world" テキストを含む `nav-link` 要素をクリックしたならば、その id を持ち、対応する `header` を含む `section` 要素に移動しなければなりません)。
|
2022-01-21 01:00:18 +05:30
|
|
|
|
|
2022-01-22 20:38:20 +05:30
|
|
|
|
**ユーザーストーリー #14:** 通常サイズのデバイス上 (ラップトップ、デスクトップ) では、`id="navbar"` を持つ要素は画面の左側に表示され、常にユーザーから見える状態にしなければなりません。
|
2022-01-21 01:00:18 +05:30
|
|
|
|
|
2022-01-22 20:38:20 +05:30
|
|
|
|
**ユーザーストーリー #15:** 私のテクニカルドキュメントページは、少なくとも 1 つのメディアクエリを使う必要があります。
|
2022-01-21 01:00:18 +05:30
|
|
|
|
|
2022-01-22 20:38:20 +05:30
|
|
|
|
<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`
|
2022-01-21 01:00:18 +05:30
|
|
|
|
|
2022-01-22 20:38:20 +05:30
|
|
|
|
完了したら、すべてのテストがパスする状態の作業プロジェクトの URL を送信します。
|
2022-01-21 01:00:18 +05:30
|
|
|
|
|
|
|
|
|
|
# --solutions--
|
|
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
|
// solution required
|
|
|
|
|
|
```
|
