幅と高さ

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

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

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%を占める幅を持ち、アスペクト比を維持するために高さが自動的に計算されます。

チャレンジ

簡単

<div>要素と<img>要素を含むHTMLドキュメントが与えられています。あなたのタスクは、widthプロパティとheightプロパティを使用して、これらの要素の寸法を設定することです。以下の手順に従ってください：

<div>要素をターゲットにするCSSルールを記述してください。widthを400pxに、heightを250pxに設定します。
<img>要素をターゲットにするCSSルールを記述してください。widthを300pxに、heightをautoに設定します。

チートシート

widthプロパティとheightプロパティは、要素のコンテンツ領域の寸法を制御します：

selector {
    width: value;
    height: value;
}

値はピクセル（px）、em（em）、パーセンテージ（%）で指定するか、自動計算のためにautoを使用できます：

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

img {
    width: 100%;
    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>