---
id: bd7158d8c442eddfaeb5bd18
title: トリビュートページを作成する
challengeType: 14
forumTopicId: 301147
dashedName: build-a-tribute-page
---
# --description--
**目標:** https://tribute-page.freecodecamp.rocks と似た機能を持つアプリを構築します
**ユーザーストーリー:**
1. トリビュートページには `id` が `main` に設定された `main` 要素が 1 つあり、その中に他のすべての要素が含まれます
1. `id` の値が `title` に設定されている要素が 1 つあり、それにはトリビュートページで取り上げる対象者 (例: "Dr. Norman Borlaug") を説明する文字列 (すなわちテキスト) が記載されています
1. `id` の値が `img-div` に設定されている `figure` または `div` 要素のどちらか 1 つが必要です
1. `#img-div` の要素内には、`id="image"` を持つ `img` 要素があります
1. `#img-div` の要素内には、`id="img-caption"` を持つ要素があり、`#img-div` 内に表示されている画像を説明するテキストコンテンツを含みます
1. `id="tribute-info"` を持つ要素が 1 つあり、これにはトリビュートページの対象者を説明するテキストコンテンツが含まれます
1. `id="tribute-link"` を持つ `a` 要素が 1 つあり、これはトリビュートページの対象者に関する追加情報を含む外部サイトへのリンクです。 ヒント: リンクを新しいタブで開くためには、要素に `target` 属性を与え、その値に `_blank` を設定しなければなりません
1. `#image` に `max-width` と `height` プロパティを使用して、元のサイズを超えることなく、親要素の幅に応じてサイズが変更されるようにします
1. `img` 要素は親要素内の中央に配置する必要があります
上記のユーザーストーリーを満たして、以下のすべてのテストに合格してこのプロジェクトを完成させてください。 あなた独自のスタイルを加えましょう。 ハッピーコーディング!
**注:** スタイルシートをリンクして CSS を適用するため、HTML 内に ` ` を必ず追加してください
# --hints--
`id` の値が `main` に設定されている `main` 要素が 1 つ必要です。
```js
const el = document.getElementById('main')
assert(!!el && el.tagName === 'MAIN')
```
`#img-div`、`#image`、`#img-caption`、`#tribute-info`、および `#tribute-link` は、すべて `#main` の子孫要素である必要があります。
```js
const el1 = document.querySelector('#main #img-div')
const el2 = document.querySelector('#main #image')
const el3 = document.querySelector('#main #img-caption')
const el4 = document.querySelector('#main #tribute-info')
const el5 = document.querySelector('#main #tribute-link')
assert(!!el1 & !!el2 && !!el3 && !!el4 && !!el5)
```
`id` が `title` の要素が 1 つ必要です。
```js
const el = document.getElementById('title')
assert(!!el)
```
`#title` が空でないようにしてください。
```js
const el = document.getElementById('title')
assert(!!el && el.innerText.length > 0)
```
`id` の値が `img-div` に設定されている、`figure` または `div` 要素が 1 つ必要です。
```js
const el = document.getElementById('img-div')
assert(!!el && (el.tagName === 'DIV' || el.tagName === 'FIGURE'))
```
`id` の値が `image` に設定されている `img` 要素が 1 つ必要です。
```js
const el = document.getElementById('image')
assert(!!el && el.tagName === 'IMG')
```
`#image` は `#img-div` の子孫要素である必要があります。
```js
const el = document.querySelector('#img-div #image')
assert(!!el)
```
`id` の値が `img-caption` に設定されている、`figcaption` または `div` 要素が 1 つ必要です。
```js
const el = document.getElementById('img-caption')
assert(!!el && (el.tagName === 'DIV' || el.tagName === 'FIGCAPTION'))
```
`#img-caption` は `#img-div` の子孫要素である必要があります。
```js
const el = document.querySelector('#img-div #img-caption')
assert(!!el)
```
`#img-caption` が空でないようにしてください。
```js
const el = document.getElementById('img-caption')
assert(!!el && el.innerText.length > 0)
```
`id` が `tribute-info` の要素が 1 つ必要です。
```js
const el = document.getElementById('tribute-info')
assert(!!el)
```
`#tribute-info` が空でないようにしてください。
```js
const el = document.getElementById('tribute-info')
assert(!!el && el.innerText.length > 0)
```
`id` の値が `tribute-link` に設定されている `a` 要素が 1 つ必要です。
```js
const el = document.getElementById('tribute-link')
assert(!!el && el.tagName === 'A')
```
`#tribute-link` は `href` 属性とその値をもつ必要があります。
```js
const el = document.getElementById('tribute-link')
assert(!!el && !!el.href && el.href.length > 0)
```
`#tribute-link` は、値が `_blank` に設定されている `target` 属性をもつ必要があります。
```js
const el = document.getElementById('tribute-link')
assert(!!el && el.target === '_blank')
```
`img` 要素の `display` の値は `block` に設定されている必要があります。
```js
const img = document.getElementById('image');
const imgStyle = window.getComputedStyle(img);
const style = imgStyle?.getPropertyValue('display')
assert(style === 'block')
```
`#image` の `max-width` の値は `100%` に設定されている必要があります。
```js
const img = document.getElementById('image');
const imgStyle = window.getComputedStyle(img);
const style = imgStyle?.getPropertyValue('max-width')
assert(style === '100%')
```
`#image` の `height` の値は `auto` に設定されている必要があります。
```js
// taken from the testable-projects repo
const img = document.getElementById('image');
const imgStyle = window.getComputedStyle(img);
const oldDisplayValue = imgStyle.getPropertyValue('display');
const oldDisplayPriority = imgStyle.getPropertyPriority('display');
img?.style.setProperty('display', 'none', 'important');
const heightValue = imgStyle?.getPropertyValue('height')
img?.style.setProperty('display', oldDisplayValue, oldDisplayPriority);
assert(heightValue === 'auto')
```
`#image` は親要素内の中央に配置する必要があります。
```js
// taken from the testable-projects repo
const img = document.getElementById('image'),
imgParent = img?.parentElement,
imgLeft = img?.getBoundingClientRect().left,
imgRight = img?.getBoundingClientRect().right,
parentLeft = imgParent?.getBoundingClientRect().left,
parentRight = imgParent?.getBoundingClientRect().right,
leftMargin = imgLeft - parentLeft,
rightMargin = parentRight - imgRight;
assert(leftMargin - rightMargin < 6 && rightMargin - leftMargin < 6)
```
# --seed--
## --seed-contents--
```html
```
```css
```
## --solutions--
```html
The below card was designed as a tribute page for freeCodeCamp.
Togepi, happy as always.
Togepi
Togepi was first discovered in the Johto region, when Ash Ketchum
discovered a mysterious egg. However, when the egg hatched, Togepi saw
Ash's friend Misty first and imprinted on her. Like many other
creatures, this imprinting process created a bond and Togepi views
Misty as his mother.
Togepi is a very childlike Pokemon, and is very emotionally
expressive. He demonstrates extreme levels of joy and sadness.
Battle Information
Type: Fairy
Evolutions: Togepi -> Togetic -> Togekiss
Moves: Growl, Pound, Sweet Kiss, Charm
Weaknesses: Poison, Steel
Resistances: Dragon
Check out this
Bulbapedia article on Togepi
for more information on this great Pokemon.