Viewport単位

CoddyのHTMLジャーニー「CSSによるスタイリング」セクションの一部。レッスン 64/76。

CSSでは、ビューポート単位はブラウザーのビューポート（ウェブページの表示領域）のサイズを基準とする相対的な測定単位です。ビューポートの幅や高さに比例して要素やテキストのサイズを設定することで、レスポンシブデザインを作成できます。ビューポート単位は、流動的なレイアウトの作成、テキストの拡大縮小、さまざまな画面サイズに合わせて調整される方法での要素の配置に特に役立ちます。

ビューポート単位は4つあります。

vw（ビューポート幅）：ビューポートの幅の1%を表します。たとえば、10vwはビューポート幅の10%に相当します。

vh（ビューポートの高さ）：ビューポートの高さの1%を表します。たとえば、25vhはビューポートの高さの25%に相当します。

vmin（ビューポートの最小値）：ビューポートの幅または高さのうち、小さい方の寸法の1%を表します。たとえば、ビューポートの幅が高さより広い場合、5vmin はビューポートの高さの5%に相当します。

vmax（ビューポートの最大値）：ビューポートの幅または高さのうち、大きい方の寸法の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に設定します。

自分で試してみよう

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

腕試し

このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。

CSSによるスタイリングのすべてのレッスン

自分で練習してみよう: Webプレイグラウンド