3.2 KiB

Raw Blame History

id	title	challengeType	videoUrl	forumTopicId	dashedName
587d78b1367417b2b2512b0c	タイポグラフィをレスポンシブにする	0	https://scrimba.com/p/pzrPu4/crzN7T8	301141	make-typography-responsive

--description--

テキストサイズとして em や px を使用する代わりに、ビューポート単位を使用してレスポンシブなタイポグラフィを作成できます。ビューポート単位は、パーセンテージと同様に相対単位ですが、これらは異なる項目を基準にします。ビューポートの単位はデバイスのビューポート寸法 (幅または高さ) からの相対値ですが、パーセンテージは親コンテナ要素のサイズからの相対値です。

4 つの異なるビューポートの単位は次のとおりです:

vw (ビューポート幅): 10vw はビューポートの幅の 10% になります。
vh (ビューポート高さ): 3vh はビューポートの高さの 3% になります。
vmin (ビューポート最小値): 70vmin はビューポートの (高さまたは幅のうち) 短い方の 70% になります。
vmax (ビューポート最大値): 100vmax はビューポートの (高さまたは幅のうち) 長い方の 100% になります。

ここでは body タグをビューポートの幅の 30% に設定する例を示します。

body { width: 30vw; }

--instructions--

h2 タグの width をビューポートの幅の 80% に、段落の width をビューポートの短辺の 75% に設定します。

--hints--

h2 タグの width は 80vw に設定されている必要があります。

assert(
  __helpers
    .removeCssComments(code)
    .match(/h2\s*?{\s*?width:\s*?80vw;\s*?}/g)
);

p タグの width は 75vmin に設定されている必要があります。

assert(
  __helpers
    .removeCssComments(code)
    .match(/p\s*?{\s*?width:\s*?75vmin;\s*?}/g)
);

--seed--

--seed-contents--

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

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

3.2 KiB Raw Blame History