Viewport 単位

CoddyのHTMLジャーニー「Styling with CSS」セクションの一部 — レッスン 64/76。

CSSにおいて、ビューポート単位はブラウザのビューポート（ウェブページの表示領域）のサイズに基づいた相対的な測定単位です。これらは、要素やテキストのサイズをビューポートの幅や高さに比例させることで、レスポンシブなデザインを作成する方法を提供します。ビューポート単位は、フルイドレイアウトの作成、テキストのスケーリング、および異なる画面サイズに適応するような要素の配置に特に役立ちます。

ビューポート単位には以下の4つがあります：

vw (ビューポートの幅): ビューポートの幅の1%を表します。例えば、10vw はビューポートの幅の10%に相当します。

vh (ビューポートの高さ): ビューポートの高さの1%を表します。例えば、25vh はビューポートの高さの25%に相当します。

vmin（viewport minimum）: ビューポートの短い方の寸法（幅または高さ）の1%を表します。例えば、ビューポートの幅が高さよりも大きい場合、5vmin はビューポートの高さの5%に等しくなります。

vmax (viewport maximum): ビューポートの大きい方の寸法（幅または高さ）の1%を表します。例えば、ビューポートの幅が高さよりも大きい場合、8vmax はビューポートの幅の8%に相当します。

ビューポート単位を使用するための基本的な構文は以下の通りです：

selector {
    property: value;
}

selector: スタイルを適用したいHTML要素を対象とするCSSセレクター。

property: 設定したいCSSプロパティ（例：width、height、font-size、margin、padding）。

value: ビューポート単位（例: 50vw, 75vh, 10vmin, 5vmax）を含む値。

例えば：

.box {
    width: 50vw; /* ボックスの幅はビューポートの幅の50%になります */
    height: 30vh; /* ボックスの高さはビューポートの高さの30%になります */
}

この例では、.box 要素の幅は 50vw、高さは 30vh であり、ビューポートの幅と高さの両方に対してレスポンシブになります。

チャレンジ

簡単

見出し（<h1>）、段落（<p>）、および区分（<div>）が含まれるHTMLドキュメントが与えられています。あなたのタスクは、ビューポート単位を使用して、これらの要素をレスポンシブにすることです。以下の手順に従ってください：

<h1>要素をターゲットにするCSSルールを記述してください。そのfont-sizeを6vwに設定します。
<p>要素をターゲットにするCSSルールを記述してください。そのfont-sizeを4vminに設定します。
<div>要素をターゲットにするCSSルールを記述してください。そのwidthを80vwに、heightを50vhに設定します。

チートシート

ビューポート単位は、ブラウザのビューポートサイズに基づいた相対単位であり、レスポンシブデザインを作成するのに役立ちます。

4つのビューポート単位：

vw (viewport width): ビューポートの幅の1%
vh (viewport height): ビューポートの高さの1%
vmin (viewport minimum): ビューポートの小さい方の寸法の1%
vmax (viewport maximum): ビューポートの大きい方の寸法の1%

基本的な構文：

selector {
    property: value;
}

例：

.box {
    width: 50vw; /* ビューポートの幅の50% */
    height: 30vh; /* ビューポートの高さの30% */
}

自分で試してみよう

<html>
<head>
    <title>Viewport Units</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body style="background-color:lightblue">
    <h1>Antarctica</h1>  
    <p>The coldest continent, covered in ice and home to penguins and seals.</p>  
    <div>It has no permanent residents, only research stations.</div> 
</body>
</html>