幅と高さ

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

CSSでは、widthプロパティとheightプロパティを使用して、要素のコンテンツ領域の寸法を設定します。これらのプロパティは、Webページ上の要素のサイズとレイアウトを制御するために不可欠です。

widthプロパティとheightプロパティを使用する基本的な構文は次のとおりです：

selector {
    width: value;
    height: value;
}

width：要素のコンテンツ領域の幅。

height：要素のコンテンツ領域の高さ。

value：指定する幅または高さの値。ピクセル（px）、em（em）、パーセンテージ（%）、その他の有効なCSS単位で指定できます。キーワード auto を使用して、コンテンツに基づいてブラウザーが幅または高さを自動的に計算するようにすることもできます。

例：

div {
    width: 300px;
    height: 200px;
}

img {
    width: 100%;
    height: auto;
}

この例では、すべての <div> 要素の幅が 300px、高さが 200px である一方、すべての <img> 要素の幅は親要素の幅の 100% を占め、高さはアスペクト比を維持するよう自動的に計算されます。

チャレンジ

簡単

division（<div>）と画像（<img>）を含むHTMLドキュメントが与えられています。widthプロパティとheightプロパティを使用して、これらの要素の寸法を設定してください。以下の手順に従ってください：

<div>要素を対象とするCSSルールを記述します。widthを400pxに、heightを250pxに設定します。
<img>要素を対象とするCSSルールを記述します。widthを300pxに、heightをautoに設定します。

自分で試してみよう

<html>
<head>
    <title>Width and Height</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div style="border:2px solid black;">This is a division.</div>
    <img src="https://img.freepik.com/free-photo/abstract-luxury-gradient-blue-background-smooth-dark-blue-with-black-vignette-studio-banner_1258-54865.jpg" alt="Image">
</body>
</html>