Files

camperbot 5c868af2b8 chore(i18n,learn): processed translations (#44851 )

2022-01-20 20:30:18 +01:00

3.7 KiB

Raw Permalink Blame History

id, title, challengeType, videoUrl, forumTopicId, dashedName

id	title	challengeType	videoUrl	forumTopicId	dashedName
587d78b0367417b2b2512b08	メディアクエリを作成する	0	https://scrimba.com/p/pzrPu4/cqwKrtm	301139	create-a-media-query

--description--

メディアクエリは CSS3 で導入された新しい手法で、異なるビューポートサイズに基づいてコンテンツの表示を変更するものです。ビューポートとは、Web ページでユーザーが見ることが可能な領域のことであり、サイトアクセス時に使用されているデバイスによって異なります。

メディアクエリはメディアタイプで構成されており、そのメディアタイプがドキュメントを表示しているデバイスのタイプと一致する場合、該当するスタイルが適用されます。メディアクエリ内に必要な数だけセレクターやスタイルを指定できます。

下記はデバイスの幅が 100px 以下の場合にコンテンツを返すメディアクエリの例です:

@media (max-width: 100px) { /* CSS Rules */ }

そして次のメディアクエリは、デバイスの高さが 350px 以上である場合にコンテンツを返します:

@media (min-height: 350px) { /* CSS Rules */ }

メディアクエリ内の CSS が適用されるのは、メディアタイプが使用中デバイスのタイプと一致する場合のみであることに注意してください。

--instructions--

デバイスの高さが 800px 以下の場合に p タグの font-size が 10px になるように、メディアクエリを追加してください。

--hints--

800px 以下の height を持つデバイスに対する @media クエリを宣言する必要があります。

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 である必要があります。

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 である必要があります。

const ifPFirst = new __helpers.CSSHelp(document).getCSSRules()?.find(x => x?.selectorText === 'p' || x?.media);
assert(ifPFirst?.style?.fontSize === '20px');

--seed--

--seed-contents--

<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--

<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>

3.7 KiB Raw Permalink Blame History