44 lines
3.9 KiB
Markdown
44 lines
3.9 KiB
Markdown
---
|
||
id: bd7158d8c442eddfaeb5bd18
|
||
title: トリビュートページを作成する
|
||
challengeType: 3
|
||
forumTopicId: 301147
|
||
dashedName: build-a-tribute-page
|
||
---
|
||
|
||
# --description--
|
||
|
||
**目標:** こちら <https://codepen.io/freeCodeCamp/full/zNqgVx> と同様の機能を持つ [CodePen.io](https://codepen.io) アプリを構築します。
|
||
|
||
以下の[ユーザーストーリー](https://en.wikipedia.org/wiki/User_story)を満たし、すべてのテストがパスするようにしてください。 あなた独自のスタイルを与えてください。
|
||
|
||
このプロジェクトを完了するために、HTML、JavaScript、CSS を使用することができます。 これまでのレッスンでカバーされた純粋な CSS の練習をするため、純粋な CSS の使用を推奨します。 Bootstrap や SASS を使用しても構いません。 このプロジェクトで追加のテクノロジー (jQuery、React、Angular、Vue など) を使用することは推奨されません。使用する場合は自己責任で使用してください。 React のようなさまざまな技術スタックで作業する機会は他のプロジェクトで得られます。 このプロジェクトで推奨される一連のテクノロジーを使用している場合の不具合報告については、freeCodeCamp にて報告を受け入れ、修正するよう努めます。 ハッピーコーディング！
|
||
|
||
**ユーザーストーリー #1:** 私のトリビュートページには `id="main"` を持つ要素があり、その中に他のすべての要素が含まれます。
|
||
|
||
**ユーザーストーリー #2:** `id="title"` を持つ要素があり、これにはトリビュートページで取り上げる対象者 (例: "Dr. Norman Borlaug) を説明する文字列 (すなわちテキスト) が記載されています。
|
||
|
||
**ユーザーストーリー #3:** `id="img-div"` を持つ、`figure` または `div` 要素のどちらかが表示される必要があります。
|
||
|
||
**ユーザーストーリー #4:** `img-div` 要素内に、`id="image"` を持つ `img` 要素があります。
|
||
|
||
**ユーザーストーリー #5:** `img-div` 要素内には、`id="img-caption"` を持つ要素があり、`img-div` 内に表示されている画像を説明するテキストコンテンツを含みます。
|
||
|
||
**ユーザーストーリー #6:** `id="tribute-info"` を持つ要素があり、これにはトリビュートページの対象者を説明するテキストコンテンツが含まれます。
|
||
|
||
**ユーザーストーリー #7:** `id="tribute-link"` を持つ `a` 要素があり、これはトリビュートページの対象者に関する追加情報を含む外部サイトへのリンクです。 ヒント: リンクを新しいタブで開くためには、要素に `target` 属性を与え、その値に `_blank` を設定しなければなりません (つまり `target="_blank"` となります)。
|
||
|
||
**ユーザーストーリー #8:** `img` 要素は、オリジナルのサイズを超えることなく、親要素の幅に応じてレスポンシブにサイズが変更される必要があります。
|
||
|
||
**ユーザーストーリー #9:** `img` 要素は、その親要素内で中央に配置される必要があります。
|
||
|
||
<a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>この CodePen テンプレートを使用して</a>あなたのプロジェクトを構築することができます。`Save` をクリックすると、あなた用の pen (CodePen 上の作品) を作成することができます。 または、この CDN リンクを使用して任意の環境でテストを実行できます: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||
|
||
完了したら、すべてのテストがパスする状態の作業プロジェクトの URL を送信します。
|
||
|
||
# --solutions--
|
||
|
||
```html
|
||
// solution required
|
||
```
|