diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98c9.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98c9.md new file mode 100644 index 00000000000..90529f307e3 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98c9.md @@ -0,0 +1,53 @@ +--- +id: 5d822fd413a79914d39e98c9 +title: ステップ 1 +challengeType: 0 +dashedName: step-1 +--- + +# --description-- + +CSS 変数を使ったスカイラインのプロジェクトにようこそ！ まず、読み込まれるドキュメントの種類をブラウザーに伝えるために、ドキュメントの先頭に `!DOCTYPE html` 宣言を追加しましょう。 + +# --hints-- + +コードに `DOCTYPE` 参照を入れる必要があります。 + +```js +assert(code.match(/` を入力して、`DOCTYPE` 宣言を閉じる必要があります。 + +```js +assert(code.match(/html\s*>/gi)); +``` + +`DOCTYPE` 宣言は HTML の先頭にある必要があります。 + +```js +assert(__helpers.removeHtmlComments(code).match(/^\s*/i)); +``` + +# --seed-- + +## --seed-contents-- + +```html +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ca.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ca.md new file mode 100644 index 00000000000..1bcc6d850f7 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ca.md @@ -0,0 +1,54 @@ +--- +id: 5d822fd413a79914d39e98ca +title: ステップ 2 +challengeType: 0 +dashedName: step-2 +--- + +# --description-- + +`DOCTYPE` の下に `html` の開始タグと終了タグを追加して、コードを書き始める場所を用意しましょう。 言語は英語に設定してください。 + +# --hints-- + +`DOCTYPE` 宣言は HTML の先頭にある必要があります。 + +```js +assert(__helpers.removeHtmlComments(code).match(/^\s*/i)); +``` + +`html` 要素が開始タグを持ち、`lang` 属性が `en` という値に設定されている必要があります。 + +```js +assert(code.match(//gi)); +``` + +`html` 要素には終了タグが必要です。 + +```js +assert(code.match(/<\/html\s*>/)); +``` + +`html` タグは正しい順序になっている必要があります。 + +```js +assert(code.match(/\s*<\/html\s*>/)); +``` + +`html` 要素は 1 つだけにしてください。 + +```js +assert(document.querySelectorAll('html').length === 1); +``` + +# --seed-- + +## --seed-contents-- + +```html + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cb.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cb.md new file mode 100644 index 00000000000..561587b0eb2 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cb.md @@ -0,0 +1,69 @@ +--- +id: 5d822fd413a79914d39e98cb +title: ステップ 3 +challengeType: 0 +dashedName: step-3 +--- + +# --description-- + +次に、`html` 要素内に `head` タグと `body` タグの開始タグおよび終了タグを追加してください。 + +# --hints-- + +`head` の開始タグが 1 つ必要です。 + +```js +assert(code.match(//i)); +``` + +`head` の終了タグが 1 つ必要です。 + +```js +assert(code.match(/<\/head\s*>/i)); +``` + +`body` の開始タグが 1 つ必要です。 + +```js +assert(code.match(//i)); +``` + +`body` の終了タグが 1 つ必要です。 + +```js +assert(code.match(/<\/body\s*>/i)); +``` + +`head` 要素と `body` 要素は兄弟要素である必要があります。 + +```js +assert(document.querySelector('head').nextElementSibling.localName === 'body'); +``` + +`head` 要素は `html` 要素の中にある必要があります。 + +```js +assert([...document.querySelector('html').children].some(x => x.localName === 'head')); +``` + +`body` 要素は `html` 要素の中にある必要があります。 + +```js +assert([...document.querySelector('html').children].some(x => x.localName === 'body')); +``` + +# --seed-- + +## --seed-contents-- + +```html + +--fcc-editable-region-- + + + +--fcc-editable-region-- + +``` + diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cc.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cc.md new file mode 100644 index 00000000000..a0cac06a7ec --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cc.md @@ -0,0 +1,108 @@ +--- +id: 5d822fd413a79914d39e98cc +title: ステップ 4 +challengeType: 0 +dashedName: step-4 +--- + +# --description-- + +`head` 内に、`charset` として `UTF-8` を指定する `meta` 要素と、`City Skyline` というタイトルを持つ `title` 要素と、`styles.css` ファイルにリンクする `link` 要素をネストしてください。 + +# --hints-- + +`head` 要素の中に新しい `meta` 要素を作成する必要があります。 + +```js +assert.exists(document.querySelector('head > meta')); +``` + +`meta` タグに、値が `UTF-8` に設定されている `charset` 属性を加える必要があります。 + +```js +assert.equal(document.querySelector('head > meta')?.getAttribute('charset')?.toLowerCase(), 'utf-8'); +``` + +コードには `title` 要素が 1 つ必要です。 + +```js +const title = document.querySelector('title'); +assert.exists(title); +``` + +`title` 要素は `head` 要素内にある必要があります。 + +```js +assert.exists(document.querySelector('head > title')); +``` + +プロジェクトには `City Skyline` というタイトルが必要です。 + +```js +const title = document.querySelector('title'); +assert.equal(title.text.toLowerCase(), 'city skyline') +``` + +タイトルについて、大文字小文字の区別とスペルに気をつけましょう。 + +```js +const title = document.querySelector('title'); +assert.equal(title.text, 'City Skyline'); +``` + +コードには `link` 要素が 1 つ必要です。 + +```js +assert.match(code, / link')); +``` + +`link` 要素には `rel` 属性があり、値が `stylesheet` に設定されている必要があります。 + +```js +const link_element = document.querySelector('link'); +const rel = link_element.getAttribute("rel"); +assert.equal(rel, "stylesheet"); +``` + +`link` 要素には `href` 属性があり、値が `styles.css` に設定されている必要があります。 + +```js +const link = document.querySelector('link'); +assert.equal(link.dataset.href, "styles.css"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +--fcc-editable-region-- + + + +--fcc-editable-region-- + + + +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cd.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cd.md new file mode 100644 index 00000000000..b86a1112b07 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cd.md @@ -0,0 +1,56 @@ +--- +id: 5d822fd413a79914d39e98cd +title: ステップ 5 +challengeType: 0 +dashedName: step-5 +--- + +# --description-- + +CSS では、アスタリスク (*) ですべての要素を選択できます。 すべての要素に境界線を追加するため、`*` セレクターを使用して `border` を `1px solid black` に設定してください。 これは要素の位置とサイズを視覚化するのに役立つ技です。 この設定は後ほど削除します。 + +# --hints-- + +`*` セレクターを使用する必要があります。 + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('*')); +``` + +`border` プロパティを使用してすべての要素のスタイルを設定する必要があります。 + +```js +assert(new __helpers.CSSHelp(document).isPropertyUsed('border')); +``` + +すべての要素が `1px solid black` の境界線を持つ必要があります。 + +```js +const astStyles = new __helpers.CSSHelp(document).getStyle('*'); +assert.equal(astStyles?.border, '1px solid black'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + + + +``` + +```css +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ce.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ce.md new file mode 100644 index 00000000000..082fe52dc05 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ce.md @@ -0,0 +1,61 @@ +--- +id: 5d822fd413a79914d39e98ce +title: ステップ 6 +challengeType: 0 +dashedName: step-6 +--- + +# --description-- + +更に、すべての要素の `box-sizing` を `border-box` に設定してください。 この設定により、境界線を追加しても要素のサイズが増加しなくなります。 + +# --hints-- + +`box-sizing` プロパティを使用する必要があります。 + +```js +assert(new __helpers.CSSHelp(document).isPropertyUsed('box-sizing')); +``` + +既存の `*` セレクターを使用してください。 + +```js +// Two selectors create two CSSStyleRule objects +assert.equal(new __helpers.CSSHelp(document).getStyleDeclarations('*').length, 1); +``` + +すべての要素の `box-sizing` が `border-box` に設定される必要があります。 + +```js +const astStyles = new __helpers.CSSHelp(document).getStyle('*'); +assert.equal(astStyles.boxSizing, 'border-box'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + + + +``` + +```css +--fcc-editable-region-- +* { + border: 1px solid black; +} + +--fcc-editable-region-- + +``` + diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cf.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cf.md new file mode 100644 index 00000000000..a470d5bf7a0 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cf.md @@ -0,0 +1,69 @@ +--- +id: 5d822fd413a79914d39e98cf +title: ステップ 7 +challengeType: 0 +dashedName: step-7 +--- + +# --description-- + +`body` (ページに表示されている内側のボックス) が見えます。その周りのボックスは `html` 要素です。 `body` をビューポートいっぱいに広げるため、`height` を `100vh` に設定してください。 また、`body` からデフォルトの `margin` を取り除くために `margin` を `0` に設定してください。 最後に、ビューポートの外にはみ出す要素があった場合に表示されるスクロールバーを隠すため、`overflow` プロパティを `hidden` に設定してください。 + +# --hints-- + +`body` セレクターを使用してください。 + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('body')); +``` + +`body` の `height` を `100vh` に設定する必要があります。 + +```js +const bodyStyles = new __helpers.CSSHelp(document).getStyle('body'); +assert.equal(bodyStyles?.height, '100vh'); +``` + +`body` の `margin` を `0` に設定する必要があります。 + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.margin, '0px'); +``` + +`body` の `overflow` プロパティを `hidden` に設定する必要があります。 + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.overflow, 'hidden'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + + + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +--fcc-editable-region-- + + +--fcc-editable-region-- + +``` + diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d0.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d0.md new file mode 100644 index 00000000000..0b36a2c2b21 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d0.md @@ -0,0 +1,65 @@ +--- +id: 5d822fd413a79914d39e98d0 +title: ステップ 8 +challengeType: 0 +dashedName: step-8 +--- + +# --description-- + +`body` 内に、`background-buildings` というクラスを持つ `div` 要素を作成してください。 これがビル群のコンテナーになります。 + +# --hints-- + +`div` 要素を作成してください。 + +```js +assert.exists(document.querySelector('div')); +``` + +`div` 要素は `body` の中にある必要があります。 + +```js +assert(document.querySelector('div')?.parentElement?.localName === 'body'); +``` + +`div` 要素には `background-buildings` のクラスが必要です。 + +```js +assert([...document.querySelector('div')?.classList]?.includes('background-buildings')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + +--fcc-editable-region-- + + + +--fcc-editable-region-- + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +``` + diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d1.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d1.md new file mode 100644 index 00000000000..09ec9dcf9de --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d1.md @@ -0,0 +1,68 @@ +--- +id: 5d822fd413a79914d39e98d1 +title: ステップ 9 +challengeType: 0 +dashedName: step-9 +--- + +# --description-- + +背景のビル群 (background buildings) の要素について `width` と `height` を `100%` に設定し、親要素である `body` の幅および高さ全体に広がるようにしましょう。 + +# --hints-- + +`background-buildings` クラスを使用して正しい要素を選択する必要があります。 + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.background-buildings')); +``` + +`.background-buildings` 要素の `width` が `100%` でなければなりません。 + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.width, '100%'); +``` + +`.background-buildings` 要素の `height` が `100%` でなければなりません。 + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.height, '100%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+ + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} +--fcc-editable-region-- + + +--fcc-editable-region-- + +``` + diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d2.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d2.md new file mode 100644 index 00000000000..339caa80785 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d2.md @@ -0,0 +1,83 @@ +--- +id: 5d822fd413a79914d39e98d2 +title: ステップ 10 +challengeType: 0 +dashedName: step-10 +--- + +# --description-- + +背景のビル群のコンテナー内に、クラス `bb1` を持つ `div` をネストしてください。 次に `styles.css` ファイルを開いて、`.bb1` の `width` を `10%` に、`height` を `70%` に設定してください。 「bb」は「background building」の略で、これを 1 つ目のビルにします。 + +# --hints-- + +新しい `div` 要素を作成してください。 + +```js +assert.equal(document.querySelectorAll('div').length, 2); +``` + +新しい `div` にクラス `bb1` を設定してください。 + +```js +assert.exists(document.querySelector('div.bb1')); +``` + +要素のスタイル設定にクラスセレクター `.bb1` を使用する必要があります。 + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1')); +``` + +`.bb1` 要素の `width` を `10%` に設定する必要があります。 + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.width, '10%'); +``` + +`.bb1` 要素の `height` を `70%` に設定する必要があります。 + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.height, '70%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +--fcc-editable-region-- +
+--fcc-editable-region-- + + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; +} + +``` + diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d3.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d3.md new file mode 100644 index 00000000000..9b6308a1119 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d3.md @@ -0,0 +1,105 @@ +--- +id: 5d822fd413a79914d39e98d3 +title: ステップ 11 +challengeType: 0 +dashedName: step-11 +--- + +# --description-- + +`.bb1` コンテナー内に `div` 要素を 4 つネストしてください。 それぞれのクラスを順に `bb1a`、`bb1b`、`bb1c`、`bb1d` としてください。 このビルは 4 つのパーツから成ります。 + +# --hints-- + +新しい `div` 要素を 4 つ作成する必要があります。 + +```js +assert.equal(document.querySelectorAll('div')?.length, 6); +``` + +新しい `div` 要素の 1 つに `bb1a` というクラスを設定する必要があります。 + +```js +assert.exists(document.querySelector('div.bb1a')); +``` + +新しい `div` 要素の 1 つに `bb1b` というクラスを設定する必要があります。 + +```js +assert.exists(document.querySelector('div.bb1b')); +``` + +新しい `div` 要素の 1 つに `bb1c` というクラスを設定する必要があります。 + +```js +assert.exists(document.querySelector('div.bb1c')); +``` + +新しい `div` 要素の 1 つに `bb1d` というクラスを設定する必要があります。 + +```js +assert.exists(document.querySelector('div.bb1d')); +``` + +新しい `div` 要素を正しい順番で配置する必要があります。 + +```js +function __t(a, b) { + return [...document.querySelector(a)?.nextElementSibling?.classList]?.includes(b); +} +assert(__t('div.bb1a','bb1b') && __t('div.bb1b','bb1c') && __t('div.bb1c','bb1d')); +``` + +新しい `div` 要素は `.bb1` 要素の中に入れる必要があります。 + +```js +assert.equal(document.querySelectorAll('div.bb1 > div')?.length, 4); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+--fcc-editable-region-- +
+--fcc-editable-region-- +
+ + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; +} + +.bb1 { + width: 10%; + height: 70%; +} + +``` + diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d4.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d4.md new file mode 100644 index 00000000000..68233005ca3 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d4.md @@ -0,0 +1,138 @@ +--- +id: 5d822fd413a79914d39e98d4 +title: ステップ 12 +challengeType: 0 +dashedName: step-12 +--- + +# --description-- + +ビルの各パーツの `width` プロパティと `height` プロパティの値を、`.bb1a` は `70%` と `10%`、`.bb1b` は `80%` と `10%`、`.bb1c` は `90%` と `10%`、`.bb1d` は `100%` と `70%` に設定してください。 これらのパーセンテージは親に対する相対値であること、高さが合計 100% となってコンテナーの高さ全体を占めることに注目してください。 + +# --hints-- + +クラスセレクターを使用して `.bb1a` のスタイルを指定してください。 + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1a')); +``` + +`.bb1a` の `width` を `70%` に設定する必要があります。 + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1a')?.width, '70%'); +``` + +`.bb1a` の `height` を `10%` に設定する必要があります。 + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1a')?.height, '10%'); +``` + +クラスセレクターを使用して `.bb1b` のスタイルを指定してください。 + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1b')); +``` + +`.bb1b` の `width` を `80%` に設定する必要があります。 + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1b')?.width, '80%'); +``` + +`.bb1b` の `height` を `10%` に設定する必要があります。 + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1b')?.height, '10%'); +``` + +クラスセレクターを使用して `.bb1c` のスタイルを指定してください。 + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1c')); +``` + +`.bb1c` の `width` を `90%` に設定する必要があります。 + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1c')?.width, '90%'); +``` + +`.bb1c` の `height` を `10%` に設定する必要があります。 + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1c')?.height, '10%'); +``` + +クラスセレクターを使用して `.bb1d` のスタイルを指定してください。 + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1d')); +``` + +`.bb1d` の `width` を `100%` に設定する必要があります。 + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.width, '100%'); +``` + +`.bb1d` の `height` を `70%` に設定する必要があります。 + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.height, '70%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+ + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; +} + +.bb1 { + width: 10%; + height: 70%; +} +--fcc-editable-region-- + +--fcc-editable-region-- + +``` + diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d5.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d5.md new file mode 100644 index 00000000000..c36cb168254 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d5.md @@ -0,0 +1,112 @@ +--- +id: 5d822fd413a79914d39e98d5 +title: ステップ 13 +challengeType: 0 +dashedName: step-13 +--- + +# --description-- + +`.bb1` の要素のスタイルプロパティとして、`display: flex;`、`flex-direction: column;`、`align-items: center;` を設定してください。 この設定により「フレックス」または「フレックスボックス」と呼ばれる方法で、ビルのパーツが中央に配置されます。 フレックスボックスについては別のプロジェクトで詳しく学習します。 + +# --hints-- + +`.bb1` の `width` および `height` プロパティは変更しないでください。 + +```js +const bb1Style = new __helpers.CSSHelp(document).getStyle('.bb1'); +assert.equal(bb1Style?.width, '10%'); +assert.equal(bb1Style?.height, '70%'); +``` + +`.bb1` 要素の `display` を `flex` に設定する必要があります。 + +```js +const bb1Style = new __helpers.CSSHelp(document).getStyle('.bb1'); +assert.equal(bb1Style?.display, 'flex'); +``` + +`.bb1` 要素の `flex-direction` を `column` に設定する必要があります。 + +```js +const bb1Style = new __helpers.CSSHelp(document).getStyle('.bb1'); +assert.equal(bb1Style?.flexDirection, 'column'); +``` + +`.bb1` 要素の `align-items` を `center` に設定する必要があります。 + +```js +const bb1Style = new __helpers.CSSHelp(document).getStyle('.bb1'); +assert.equal(bb1Style?.alignItems, 'center'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+ + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; +} +--fcc-editable-region-- +.bb1 { + width: 10%; + height: 70%; +} +--fcc-editable-region-- +.bb1a { + width: 70%; + height: 10%; +} + +.bb1b { + width: 80%; + height: 10%; +} + +.bb1c { + width: 90%; + height: 10%; +} + +.bb1d { + width: 100%; + height: 70%; +} + +``` + diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d6.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d6.md new file mode 100644 index 00000000000..9b10769579f --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d6.md @@ -0,0 +1,103 @@ +--- +id: 5d822fd413a79914d39e98d6 +title: ステップ 14 +challengeType: 0 +dashedName: step-14 +--- + +# --description-- + +少しビルらしく見えてきました。 ではここで初めての変数を作成しましょう。 変数の宣言は 2 つのハイフン (`-`) で書き始め、変数名と値を「`--variable-name: value;`」という形式で指定します。 `.bb1` クラス内に `--building-color1` という名前の変数を作成し、`#999` という値を代入してください。 + +# --hints-- + +`--building-color1` という名前の新しい変数を作成してください。 + +```js +assert(new __helpers.CSSHelp(document).isPropertyUsed('--building-color1')); +``` + +変数 `--building-color1` は `.bb1` の中で定義してください。 + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color1')); +``` + +`--building-color1` に値 `#999` を代入してください。 + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color1').trim(),'#999'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+ + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; +} +--fcc-editable-region-- +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} +--fcc-editable-region-- +.bb1a { + width: 70%; + height: 10%; +} + +.bb1b { + width: 80%; + height: 10%; +} + +.bb1c { + width: 90%; + height: 10%; +} + +.bb1d { + width: 100%; + height: 70%; +} + +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc174fcf86c76b9248c6eb2.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc174fcf86c76b9248c6eb2.md index 5a469326f63..1f92ddafbb5 100644 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc174fcf86c76b9248c6eb2.md +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc174fcf86c76b9248c6eb2.md @@ -9,11 +9,11 @@ dashedName: step-1 HTML 要素は、`

` のような開始タグと `

` のような終了タグを持ちます。 +要素のテキストは開始タグと終了タグの間に入ります。 + `h1` 要素を見つけて、そのテキストを下記に変更してください: - `CatPhotoApp` - -テキストが開始タグと終了タグの間にあることを確認してください。 +`CatPhotoApp` # --hints-- diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51578.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51578.md new file mode 100644 index 00000000000..99727e0185c --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51578.md @@ -0,0 +1,112 @@ +--- +id: 60b69a66b6ddb80858c51578 +title: ステップ 1 +challengeType: 0 +dashedName: step-1 +--- + +# --description-- + +HTML 構造の準備から始めましょう。 `` 宣言と、`lang` 属性を `en` に設定した `html` 要素を追加してください。 `html` 要素の中に `head` 要素と `body` 要素を追加してください。 + +# --hints-- + +コードに `DOCTYPE` 参照を入れる必要があります。 + +```js +assert(code.match(/` を入力して、`DOCTYPE` 宣言を閉じる必要があります。 + +```js +assert(code.match(/html\s*>/gi)); +``` + +`DOCTYPE` 宣言は HTML の先頭にある必要があります。 + +```js +assert(__helpers.removeHtmlComments(code).match(/^\s*/i)); +``` + +`html` 要素には `lang` 属性 `en` を持つ開始タグが必要です。 + +```js +assert(code.match(//gi)); +``` + +`html` 要素には終了タグが必要です。 + +```js +assert(code.match(/<\/html\s*>/)); +``` + +`head` の開始タグが 1 つ必要です。 + +```js +assert(code.match(//i)); +``` + +`head` の終了タグが 1 つ必要です。 + +```js +assert(code.match(/<\/head\s*>/i)); +``` + +`body` の開始タグが 1 つ必要です。 + +```js +assert(code.match(//i)); +``` + +`body` の終了タグが 1 つ必要です。 + +```js +assert(code.match(/<\/body\s*>/i)); +``` + +`head` 要素と `body` 要素は兄弟要素である必要があります。 + +```js +assert(document.querySelector('head')?.nextElementSibling?.localName === 'body'); +``` + +`head` 要素は `html` 要素の中にある必要があります。 + +```js +assert([...document.querySelector('html')?.children].some(x => x?.localName === 'head')); +``` + +`body` 要素は `html` 要素の中にある必要があります。 + +```js +assert([...document.querySelector('html')?.children].some(x => x?.localName === 'body')); +``` + +# --seed-- + +## --seed-contents-- + +```html + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` + +```css + +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51579.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51579.md new file mode 100644 index 00000000000..1f20bb26b42 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51579.md @@ -0,0 +1,63 @@ +--- +id: 60b69a66b6ddb80858c51579 +title: ステップ 2 +challengeType: 0 +dashedName: step-2 +--- + +# --description-- + +`head` 要素内に `meta` タグを追加し、`charset` 属性を `utf-8` に設定してください。 また、`title` 要素を追加して、`Picasso Painting` というテキストを設定してください。 + +# --hints-- + +`meta` 要素が 1 つ必要です。 + +```js +assert(document.querySelectorAll('meta').length === 1); +``` + +`meta` 要素には `charset` 属性が必要です。 + +```js +assert(document.querySelector('meta')?.getAttribute('charset')); +``` + +`charset` 属性を `utf-8` に設定する必要があります。 + +```js +assert(document.querySelector('meta')?.getAttribute('charset')?.toLowerCase() === 'utf-8'); +``` + +`title` 要素が 1 つ必要です。 + +```js +assert(document.querySelectorAll('title').length === 1); +``` + +`title` 要素は `Picasso Painting` というテキストをもつ必要があります。 スペルや大文字小文字の区別に気をつけましょう。 + +```js +assert(document.querySelector('title')?.innerText === 'Picasso Painting'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + --fcc-editable-region-- + + --fcc-editable-region-- + + + + +``` + +```css + +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157a.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157a.md new file mode 100644 index 00000000000..bb9dd91915f --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157a.md @@ -0,0 +1,56 @@ +--- +id: 60b69a66b6ddb80858c5157a +title: ステップ 4 +challengeType: 0 +dashedName: step-4 +--- + +# --description-- + +FontAwesome とは SVG アイコンのライブラリで、大部分が無料で利用できます。 このプロジェクトでは FontAwesome のアイコンをいくつか使用するので、HTML に外部スタイルシートをリンクする必要があります。 + +`link` 要素を追加して、`rel` を `stylesheet` に、`href` は `https://use.fontawesome.com/releases/v5.8.2/css/all.css` に設定してください。 + +# --hints-- + +`link` 要素が 2 つ必要です。 + +```js +assert(document.querySelectorAll('link').length === 2); +``` + +`link` 要素の `rel` は `stylesheet` に設定されている必要があります。 + +```js +assert(document.querySelectorAll('link')?.[1]?.getAttribute('rel') === 'stylesheet'); +``` + +`link` 要素の `href` は `https://use.fontawesome.com/releases/v5.8.2/css/all.css` に設定されている必要があります。 + +```js +assert(document.querySelectorAll('link')?.[1]?.getAttribute('href') === 'https://use.fontawesome.com/releases/v5.8.2/css/all.css') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + --fcc-editable-region-- + + --fcc-editable-region-- + + + + +``` + +```css + +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157b.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157b.md new file mode 100644 index 00000000000..7431ff9d301 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157b.md @@ -0,0 +1,50 @@ +--- +id: 60b69a66b6ddb80858c5157b +title: ステップ 5 +challengeType: 0 +dashedName: step-5 +--- + +# --description-- + +では絵画を作り始めます。まず `body` 要素の `background-color` を `rgb(184, 132, 46)` に設定してください。 + +# --hints-- + +`body` セレクターを使用してください。 + +```js +assert(new __helpers.CSSHelp(document).getStyle('body')); +``` + +`body` 要素の `background-color` プロパティが `rgb (184, 132, 46)` に設定されている必要があります。 + +```js +assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rgb(184, 132, 46)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + + + +``` + +```css + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157c.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157c.md new file mode 100644 index 00000000000..f869cdeaf53 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157c.md @@ -0,0 +1,51 @@ +--- +id: 60b69a66b6ddb80858c5157c +title: ステップ 6 +challengeType: 0 +dashedName: step-6 +--- + +# --description-- + +本文 (body) タグ内に `div` 要素を追加してください。 その `id` を `back-wall` に設定してください。 + +# --hints-- + +`div` 要素が 1 つ必要です。 + +```js +assert(document.querySelectorAll('div').length === 1); +``` + +`div` 要素の `id` の値を `back-wall` に設定する必要があります。 + +```js +assert(document.querySelector('div')?.getAttribute('id') === 'back-wall'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + + --fcc-editable-region-- + + --fcc-editable-region-- + + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b80da8676fb3227967a731.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b80da8676fb3227967a731.md new file mode 100644 index 00000000000..2214c78ba4b --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b80da8676fb3227967a731.md @@ -0,0 +1,71 @@ +--- +id: 60b80da8676fb3227967a731 +title: ステップ 3 +challengeType: 0 +dashedName: step-3 +--- + +# --description-- + +まだ CSS は書いていませんが、先に CSS ファイルをリンクしておきましょう。 + +`link` 要素を追加して、`rel` を `stylesheet` に、 `href` を `styles.css` に設定してください。 + +# --hints-- + + +コードには `link` 要素が 1 つ必要です。 + +```js +assert.match(code, / link')); +``` + +`link` 要素は値が `stylesheet` に設定されている `rel` 属性を持つ必要があります。 + +```js +const link_element = document.querySelector('link'); +const rel = link_element.getAttribute("rel"); +assert.equal(rel, "stylesheet"); +``` + +`link` 要素は値が `styles.css` に設定されている `href` 属性を持つ必要があります。 + +```js +const link = document.querySelector('link'); +assert.equal(link.dataset.href, "styles.css"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + --fcc-editable-region-- + + --fcc-editable-region-- + + + + +``` + +```css + +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f2abbe7d18d49a1e0e1c8.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f2abbe7d18d49a1e0e1c8.md new file mode 100644 index 00000000000..4294aa6571d --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f2abbe7d18d49a1e0e1c8.md @@ -0,0 +1,55 @@ +--- +id: 615f2abbe7d18d49a1e0e1c8 +title: ステップ 1 +challengeType: 0 +dashedName: step-1 +--- + +# --description-- + +基本的な HTML ボイラープレートはあらかじめ用意しておきました。 + +`body` 要素内に `h1` 要素を作成し、`Nutrition Facts` というテキストを設定してください。 + +# --hints-- + +新しい `h1` 要素を 1 つ追加してください。 + +```js +assert.exists(document.querySelector('h1')); +``` + +`h1` 要素は `body` 要素の中にある必要があります。 + +```js +assert(document.querySelector('h1')?.parentElement?.localName === 'body'); +``` + +`h1` 要素のテキストは `Nutrition Facts` でなければなりません。 + +```js +assert(document.querySelector('h1')?.innerText === 'Nutrition Facts'); +``` + +# --seed-- + +## --seed-contents-- + +```html +--fcc-editable-region-- + + + + + Nutrition Label + + + + + +--fcc-editable-region-- +``` + +```css + +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f2d4150fe0d4cbd0f2628.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f2d4150fe0d4cbd0f2628.md new file mode 100644 index 00000000000..eb0737c216d --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f2d4150fe0d4cbd0f2628.md @@ -0,0 +1,60 @@ +--- +id: 615f2d4150fe0d4cbd0f2628 +title: ステップ 2 +challengeType: 0 +dashedName: step-2 +--- + +# --description-- + +`h1` 要素の下に `p` 要素を追加して、テキストを `8 servings per container` にしてください。 + +# --hints-- + +新しい `p` 要素を 1 つ追加してください。 + +```js +assert.exists(document.querySelector('p')); +``` + +`p` 要素は `body` 要素の中にある必要があります。 + +```js +assert(document.querySelector('p')?.parentElement?.localName === 'body'); +``` + +`p` 要素を `h1` 要素の後に置く必要があります。 + +```js +assert(document.querySelector('p')?.previousElementSibling?.localName === 'h1'); +``` + +`p` 要素には `8 servings per container` というテキストが必要です。 + +```js +assert(document.querySelector('p')?.innerText === '8 servings per container'); +``` + +# --seed-- + +## --seed-contents-- + +```html +--fcc-editable-region-- + + + + + Nutrition Label + + +

Nutrition Facts

+ + + +--fcc-editable-region-- +``` + +```css + +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3b091162165948e1cb33.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3b091162165948e1cb33.md new file mode 100644 index 00000000000..ea62867938e --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3b091162165948e1cb33.md @@ -0,0 +1,70 @@ +--- +id: 615f3b091162165948e1cb33 +title: ステップ 11 +challengeType: 0 +dashedName: step-11 +--- + +# --description-- + +ブラウザーの開発者ツールで `.label` 要素を調べると、幅が 270 ピクセルではなく実際は 288 ピクセルになっていることに気づくかもしれません。 これは、ブラウザーが要素のサイズを決定する際、デフォルトでは境界線とパディングが含まれるためです。 + +これを解消するには、`*` セレクターを作成して `box-sizing` プロパティを `border-box` に設定することで、ボックスモデルをリセットします。 + +# --hints-- + +`*` セレクターを作成する必要があります。 + +```js +assert(new __helpers.CSSHelp(document).getStyle('*')); +``` + +`*` セレクターの `box-sizing` プロパティを `border-box` に設定する必要があります。 + +```js +assert(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing === 'border-box'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+

Nutrition Facts

+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+ + +``` + +```css +--fcc-editable-region-- + +--fcc-editable-region-- + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} +```