Files

camperbot 43496432d6 chore(i18n,learn): processed translations (#45555 )

2022-03-28 20:14:21 +00:00

4.4 KiB

Raw Permalink Blame History

id, title, challengeType, videoUrl, forumTopicId, dashedName

id	title	challengeType	videoUrl	forumTopicId	dashedName
587d78a6367417b2b2512ade	CSS と HTML を使ってより複雑な形を作る	0	https://scrimba.com/c/cPpz4fr	301050	create-a-more-complex-shape-using-css-and-html

--description--

世界で最もポピュラーな形の一つはハート形でしょう。このチャレンジでは純粋な CSS を使ってハート形を作ります。まず、疑似要素の ::before と ::after を理解する必要があります。 ::before は選択された要素の最初の子要素である疑似要素を作成し、::after は選択された要素の最後の子要素である疑似要素を作成します。下記の例では、クラス heart を持つ要素に長方形を追加するのに ::before 疑似要素が使われています。

.heart::before {
  content: "";
  background-color: yellow;
  border-radius: 25%;
  position: absolute;
  height: 50px;
  width: 70px;
  top: -50px;
  left: 5px;
}

::before や ::after の疑似要素が正しく機能するためには、content プロパティの定義が必要です。このプロパティは通常、写真やテキストなどを選択された要素に追加するために使用されます。 ::before や ::after の疑似要素が図形を作るために使われるときにも content プロパティは必要ですが、空文字列に設定します。上の例では、クラス heart の要素は、高さ 50px 幅 70px の黄色の長方形を生成する ::before 疑似要素を持っています。この長方形は、25% の border-radius が設定されているので丸い角を持っています。また、左端から 5px、上端より 50px 上に絶対位置指定で配置されています。

--instructions--

画面に表示されている要素をハート形に変換しましょう。 .heart::after セレクターで、background-color を pink に、border-radius を 50% に変更してください。

次に、クラス heart (heart のみ) の要素に対し、transform プロパティを入力します。 rotate() 関数を -45deg を指定して使用してください。

最後に、.heart::before セレクターの中で content プロパティを空文字列に設定してください。

--hints--

.heart::after セレクターの background-color プロパティは pink である必要があります。

const heartAfter = code.match(/\.heart::after\s*{[\s\S]+?[^\}]}/g)[0];
assert(
  /({|;)\s*background-color\s*:\s*pink\s*(;|})/g.test(heartAfter)
);

.heart::after セレクターの border-radius は 50% である必要があります。

assert(code.match(/border-radius\s*?:\s*?50%/gi).length == 2);

heart クラスの transform プロパティは rotate() 関数を使用し、-45deg に設定されている必要があります。

assert(code.match(/transform\s*?:\s*?rotate\(\s*?-45deg\s*?\)/gi));

.heart::before セレクターの content は空文字列である必要があります。

assert(code.match(/\.heart::before\s*?{\s*?content\s*?:\s*?("|')\1\s*?;/gi));

--seed--

--seed-contents--

<style>
  .heart {
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: pink;
    height: 50px;
    width: 50px;
    transform: ;
  }
  .heart::after {
    background-color: blue;
    content: "";
    border-radius: 25%;
    position: absolute;
    width: 50px;
    height: 50px;
    top: 0px;
    left: 25px;
  }
  .heart::before {
    content: ;
    background-color: pink;
    border-radius: 50%;
    position: absolute;
    width: 50px;
    height: 50px;
    top: -25px;
    left: 0px;
  }
</style>
<div class="heart"></div>

--solutions--

<style>
  .heart {
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: pink;
    height: 50px;
    width: 50px;
    transform: rotate(-45deg);
  }
  .heart::after {
    background-color: pink;
    content: "";
    border-radius: 50%;
    position: absolute;
    width: 50px;
    height: 50px;
    top: 0px;
    left: 25px;
  }
  .heart::before {
    content: "";
    background-color: pink;
    border-radius: 50%;
    position: absolute;
    width: 50px;
    height: 50px;
    top: -25px;
    left: 0px;
  }
</style>
<div class="heart"></div>

4.4 KiB Raw Permalink Blame History