0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【フロントエンド1000本ノック】0070_vwとvh単位を使い、常にビューポートの高さ一杯に広がるヒーローイメージセクションを作成せよ。

Posted at

この記事は人間が書きました

はじめに

こんにちは、赤神です!
この記事は、「1000本ノック」という取り組みの中のフロントエンドのための課題の1つです。

「1000本ノックとは」
https://qiita.com/sora_akagami/items/c8da4296dea3823376ca

vwvh に関して

rem がフォントサイズを基準にしたのに対し、vwvh はビューポート(ブラウザの表示領域)のサイズを基準にします。

  • vw(Viewport Width):ビューポートの幅の1/100
  • vh(Viewport Height):ビューポートの高さの1/100

作成したコード

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>フロントエンド1000本ノック 0070</title>
</head>
<body>
  <section style="height: 100vh; background-color: lightblue;">ヒーローイメージ</section>
</body>
</html>
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?