chore(i18n,learn): processed translations (#44851)
This commit is contained in:
camperbot
GitHub
@ -0,0 +1,91 @@
|
||||
---
|
||||
id: 587d78b0367417b2b2512b08
|
||||
title: メディアクエリを作成する
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pzrPu4/cqwKrtm'
|
||||
forumTopicId: 301139
|
||||
dashedName: create-a-media-query
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
メディアクエリは CSS3 で導入された新しい手法で、異なるビューポートサイズに基づいてコンテンツの表示を変更するものです。 ビューポートとは、Web ページでユーザーが見ることが可能な領域のことであり、サイトアクセス時に使用されているデバイスによって異なります。
|
||||
|
||||
メディアクエリはメディアタイプで構成されており、そのメディアタイプがドキュメントを表示しているデバイスのタイプと一致する場合、該当するスタイルが適用されます。 メディアクエリ内に必要な数だけセレクターやスタイルを指定できます。
|
||||
|
||||
下記はデバイスの幅が `100px` 以下の場合にコンテンツを返すメディアクエリの例です:
|
||||
|
||||
```css
|
||||
@media (max-width: 100px) { /* CSS Rules */ }
|
||||
```
|
||||
|
||||
そして次のメディアクエリは、デバイスの高さが `350px` 以上である場合にコンテンツを返します:
|
||||
|
||||
```css
|
||||
@media (min-height: 350px) { /* CSS Rules */ }
|
||||
```
|
||||
|
||||
メディアクエリ内の CSS が適用されるのは、メディアタイプが使用中デバイスのタイプと一致する場合のみであることに注意してください。
|
||||
|
||||
# --instructions--
|
||||
|
||||
デバイスの高さが `800px` 以下の場合に `p` タグの `font-size` が `10px` になるように、メディアクエリを追加してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`800px` 以下の `height` を持つデバイスに対する `@media` クエリを宣言する必要があります。
|
||||
|
||||
```js
|
||||
const media = new __helpers.CSSHelp(document).getCSSRules('media');
|
||||
assert(media.some(x => x.media?.mediaText?.includes('(max-height: 800px)')));
|
||||
```
|
||||
|
||||
デバイスの `height` が `800px` 以下である場合、`p` 要素の `font-size` が `10px` である必要があります。
|
||||
|
||||
```js
|
||||
const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-height: 800px)');
|
||||
assert(rules?.find(x => x.selectorText === 'p')?.style?.fontSize === "10px");
|
||||
```
|
||||
|
||||
デバイスの `height` が `800px` 以上である場合、`p` 要素の `font-size` は初期値の `20px` である必要があります。
|
||||
|
||||
```js
|
||||
const ifPFirst = new __helpers.CSSHelp(document).getCSSRules()?.find(x => x?.selectorText === 'p' || x?.media);
|
||||
assert(ifPFirst?.style?.fontSize === '20px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
p {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
/* Only change code below this line */
|
||||
|
||||
/* Only change code above this line */
|
||||
</style>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis tempus massa. Aenean erat nisl, gravida vel vestibulum cursus, interdum sit amet lectus. Sed sit amet quam nibh. Suspendisse quis tincidunt nulla. In hac habitasse platea dictumst. Ut sit amet pretium nisl. Vivamus vel mi sem. Aenean sit amet consectetur sem. Suspendisse pretium, purus et gravida consequat, nunc ligula ultricies diam, at aliquet velit libero a dui.</p>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
p {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
@media (max-height: 800px) {
|
||||
p {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis tempus massa. Aenean erat nisl, gravida vel vestibulum cursus, interdum sit amet lectus. Sed sit amet quam nibh. Suspendisse quis tincidunt nulla. In hac habitasse platea dictumst. Ut sit amet pretium nisl. Vivamus vel mi sem. Aenean sit amet consectetur sem. Suspendisse pretium, purus et gravida consequat, nunc ligula ultricies diam, at aliquet velit libero a dui.</p>
|
||||
```
|
||||
@ -0,0 +1,76 @@
|
||||
---
|
||||
id: 587d78b1367417b2b2512b09
|
||||
title: 画像をレスポンシブにする
|
||||
challengeType: 0
|
||||
forumTopicId: 301140
|
||||
dashedName: make-an-image-responsive
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
CSS で画像をレスポンシブにするのは、実は非常に簡単です。 次のプロパティを画像に追加するだけです:
|
||||
|
||||
```css
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
```
|
||||
|
||||
`max-width` を `100%` にすることで画像が決してそれが入っているコンテナより広がらないようにし、`height` を `auto` にすることで画像が元のアスペクト比を保つようにします。
|
||||
|
||||
# --instructions--
|
||||
|
||||
`responsive-img` クラスにスタイルルールを追加し、これをレスポンシブにします。 コンテナ (この場合はプレビューウィンドウ) の幅より広がらないようにし、かつ元のアスペクト比を維持する必要があります。 コードを追加したら、画像の動作を確認するためにプレビューのサイズを変更してみましょう。
|
||||
|
||||
# --hints--
|
||||
|
||||
`responsive-img` クラスは `max-width` を `100%` に設定する必要があります。
|
||||
|
||||
```js
|
||||
assert(getComputedStyle($('.responsive-img')[0]).maxWidth === '100%');
|
||||
```
|
||||
|
||||
`responsive-img` クラスは `height` を `auto` に設定する必要があります。
|
||||
|
||||
```js
|
||||
assert(code.match(/height:\s*?auto;/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.responsive-img {
|
||||
|
||||
|
||||
}
|
||||
|
||||
img {
|
||||
width: 600px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<img class="responsive-img" src="https://s3.amazonaws.com/freecodecamp/FCCStickerPack.jpg" alt="freeCodeCamp stickers set">
|
||||
<img src="https://s3.amazonaws.com/freecodecamp/FCCStickerPack.jpg" alt="freeCodeCamp stickers set">
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.responsive-img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 600px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<img class="responsive-img" src="https://s3.amazonaws.com/freecodecamp/FCCStickerPack.jpg" alt="freeCodeCamp stickers set">
|
||||
<img src="https://s3.amazonaws.com/freecodecamp/FCCStickerPack.jpg" alt="freeCodeCamp stickers set">
|
||||
```
|
||||
@ -0,0 +1,77 @@
|
||||
---
|
||||
id: 587d78b1367417b2b2512b0c
|
||||
title: タイポグラフィをレスポンシブにする
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pzrPu4/crzN7T8'
|
||||
forumTopicId: 301141
|
||||
dashedName: make-typography-responsive
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
テキストサイズとして `em` や `px` を使用する代わりに、ビューポート単位を使用してレスポンシブなタイポグラフィを作成できます。 ビューポート単位は、パーセンテージと同様に相対単位ですが、これらは異なる項目を基準にします。 ビューポートの単位はデバイスのビューポート寸法 (幅または高さ) からの相対値ですが、パーセンテージは親コンテナ要素のサイズからの相対値です。
|
||||
|
||||
4 つの異なるビューポートの単位は次のとおりです:
|
||||
|
||||
<ul><li><code>vw</code> (ビューポート幅): <code>10vw</code> はビューポートの幅の 10% になります。</li><li><code>vh</code> (ビューポート高さ): <code>3vh</code> はビューポートの高さの 3% になります。</li><li><code>vmin</code> (ビューポート最小値): <code>70vmin</code> はビューポートの (高さまたは幅のうち) 短い方の 70% になります。</li><li><code>vmax</code> (ビューポート最大値): <code>100vmax</code> はビューポートの (高さまたは幅のうち) 長い方の 100% になります。</li></ul>
|
||||
|
||||
ここでは `body` タグをビューポートの幅の 30% に設定する例を示します。
|
||||
|
||||
```css
|
||||
body { width: 30vw; }
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
`h2` タグの `width` をビューポートの幅の 80% に、段落の `width` をビューポートの短辺の 75% に設定します。
|
||||
|
||||
# --hints--
|
||||
|
||||
`h2` タグの `width` は 80vw に設定されている必要があります。
|
||||
|
||||
```js
|
||||
assert(
|
||||
__helpers
|
||||
.removeCssComments(code)
|
||||
.match(/h2\s*?{\s*?width:\s*?80vw;\s*?}/g)
|
||||
);
|
||||
```
|
||||
|
||||
`p` タグの `width` は 75vmin に設定されている必要があります。
|
||||
|
||||
```js
|
||||
assert(
|
||||
__helpers
|
||||
.removeCssComments(code)
|
||||
.match(/p\s*?{\s*?width:\s*?75vmin;\s*?}/g)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
||||
<h2>Importantus Ipsum</h2>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis tempus massa. Aenean erat nisl, gravida vel vestibulum cursus, interdum sit amet lectus. Sed sit amet quam nibh. Suspendisse quis tincidunt nulla. In hac habitasse platea dictumst. Ut sit amet pretium nisl. Vivamus vel mi sem. Aenean sit amet consectetur sem. Suspendisse pretium, purus et gravida consequat, nunc ligula ultricies diam, at aliquet velit libero a dui.</p>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h2 {
|
||||
width: 80vw;
|
||||
}
|
||||
p {
|
||||
width: 75vmin;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2>Importantus Ipsum</h2>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis tempus massa. Aenean erat nisl, gravida vel vestibulum cursus, interdum sit amet lectus. Sed sit amet quam nibh. Suspendisse quis tincidunt nulla. In hac habitasse platea dictumst. Ut sit amet pretium nisl. Vivamus vel mi sem. Aenean sit amet consectetur sem. Suspendisse pretium, purus et gravida consequat, nunc ligula ultricies diam, at aliquet velit libero a dui.</p>
|
||||
```
|
||||
@ -0,0 +1,64 @@
|
||||
---
|
||||
id: 587d78b1367417b2b2512b0a
|
||||
title: 高解像度ディスプレイのために Retina 画像を使用する
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pzrPu4/cVZ4Rfp'
|
||||
forumTopicId: 301142
|
||||
dashedName: use-a-retina-image-for-higher-resolution-displays
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
インターネット接続デバイスの増加に伴い、そのサイズや仕様は様々になり、使用されるディスプレイは外部的にも内部的にも異なる可能性があります。 ピクセル密度はデバイスによって異なる場合があり、この密度は Pixel Per Inch (PPI) もしくは Dots Per Inch (DPI) と呼ばれます。 最も有名なディスプレイは、最新の Apple MacBook Pro ノートブックや最近の iMac コンピューターに搭載された「Retina ディスプレイ」と呼ばれるものです。 Retina ディスプレイと非 Retina ディスプレイ間のピクセル密度の違いにより、高解像度ディスプレイを想定して作成されていない画像を高解像度ディスプレイで表示すると「ピクセル化」して見える場合があります。
|
||||
|
||||
MacBook Pro の「Retina ディスプレイ」のような高解像度ディスプレイで画像を適切に表示する最も簡単な方法は、`width` と `height` の値を元のファイルの半分だけと定義することです。 以下に、元の画像の高さと幅の半分を設定する例を示します。
|
||||
|
||||
```html
|
||||
<style>
|
||||
img { height: 250px; width: 250px; }
|
||||
</style>
|
||||
<img src="coolPic500x500" alt="A most excellent picture">
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
`img` タグの `width` と `height` を元の値の半分に設定してください。 今回の場合、オリジナルの `height` とオリジナルの `width` は両方とも `200px` です。
|
||||
|
||||
# --hints--
|
||||
|
||||
`img` タグは `width` が 100 ピクセルである必要があります。
|
||||
|
||||
```js
|
||||
assert(document.querySelector('img').width === 100);
|
||||
```
|
||||
|
||||
`img` タグは `height` が 100 ピクセルである必要があります。
|
||||
|
||||
```js
|
||||
assert(document.querySelector('img').height === 100);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
||||
<img src="https://s3.amazonaws.com/freecodecamp/FCCStickers-CamperBot200x200.jpg" alt="freeCodeCamp sticker that says 'Because CamperBot Cares'">
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
img {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<img src="https://s3.amazonaws.com/freecodecamp/FCCStickers-CamperBot200x200.jpg" alt="freeCodeCamp sticker that says 'Because CamperBot Cares'">
|
||||
```
|
||||
Reference in New Issue
Block a user