CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのheight・widthプロパティ徹底解説！min/maxでレスポンシブ対応する方法

Webページをデザインする際、ページ上の要素に特定のサイズを指定したくなることがよくあります。たとえば、ボックスに一定の高さを持たせたり、テキスト行が特定の幅に収まるようにしたりしたいケースがあるでしょう。

そんなときに役立つのが、CSSのheight（高さ）とwidth（幅）プロパティです。これらのプロパティを使えば、要素の高さと幅を自由に設定できます。

この記事では、CSSのheight・widthプロパティの基本を実例とともに解説し、さらにmin（最小値）・max（最大値）系プロパティを使ってレスポンシブな要素を設計する方法まで紹介します。読み終える頃には、Webページ上の要素サイズを思い通りにコントロールできるようになっているはずです。

CSSのheightとwidthとは

Webページ上の要素に高さと幅を設定することで、その要素がページ内で占めるスペースを明確に定義できます。これにより、ページ全体のレイアウト構造を組み立てやすくなり、各要素が意図した通りに表示されるようになります。

要素が水平方向・垂直方向にどれだけ伸びるかを定義するには、それぞれwidth（幅）とheight（高さ）プロパティを使用します。

widthとheightプロパティは、ボックスのコンテンツ領域に対して具体的な幅と高さを設定します。つまり、これらのプロパティが制御するのはボックスの中身（コンテンツ）が占めるスペースであり、margin（マージン）やpadding（パディング）には影響しません。

heightとwidthプロパティの基本的な構文は以下の通りです。

height: 値;
width: 値;

指定できる主な値は次の通りです。

  • auto：ブラウザが自動的に高さ・幅を計算します（デフォルト値）。
  • length：px、em、remなどの単位で高さや幅を指定します。
  • percentage：要素が含まれる親ブロックのサイズに対する割合（%）で指定します。
  • initial：プロパティのデフォルト値を適用します。
  • inherit：親要素のheightまたはwidthの値を継承します。

height・widthプロパティの基本がわかったところで、実際のコード例を見ていきましょう。

height・widthプロパティの実例

ここでは、イリノイ州スプリングフィールドにある「The Pickled Apple」という地元のカフェのWebサイトを制作するとします。このカフェから、「About（私たちについて）」ページに、店舗の簡単な紹介文を収めるボックスを作ってほしいという依頼を受けました。

このボックスは幅200px・高さ200pxで、背景色は薄いグレーにします。このサイズは、後ほど追加する予定の他の要素ともレイアウトがうまく収まるように選んだものです。

以下のコードでボックスを作成できます。

<html>

<p class="aboutBox">The Pickled Appleは、イリノイ州スプリングフィールドを拠点に、2004年から質の高い紅茶、スペシャルティコーヒー、そしておいしいケーキを提供してきました。</p>

<style>

.aboutBox {
	height: 200px;
	width: 200px;
	background-color: lightgray;
}

コードを分解して見てみましょう。HTMLファイルでは、<p>タグを使って紹介文の段落を作成しています。この<p>タグにはaboutBoxというクラス名が付いており、CSS側でこのクラス名を指定してスタイルを適用します。

CSSファイルでは、aboutBoxクラスを持つすべての要素に適用されるスタイルルールを定義しています。このルールでは、要素の高さを200px、幅を200pxに設定し、背景色を薄いグレー（lightgray）に指定しています。

もし要素の幅を100pxにしたい場合は、widthプロパティを100pxに変更するだけです。同様に、高さを300pxにしたい場合は、heightプロパティを300pxに変更します。

min・max系プロパティでレスポンシブ対応

widthとheightで指定した値は固定値です。つまり、ウィンドウのサイズを変更しても、あるいは別のデバイスでページを閲覧しても、指定したサイズは変わりません（親要素のサイズに対する割合など、相対的な値を使った場合を除きます）。

これは重要なポイントです。アクセシビリティの高い体験を設計したい場合、要素に固定の高さや幅を指定するのは実用的ではないことがあります。たとえば、画像の幅を500pxと固定してしまうと、画面の小さいモバイルデバイスで閲覧した際に、画像が正しく表示されない可能性があります。

そこで登場するのが、min（最小値）・max（最大値）系のプロパティです。

要素をさまざまな画面サイズやビューポートに適応させたい場合は、min-width、max-width、min-height、max-heightプロパティを使用します。これらのプロパティを指定すると、widthとheightで指定した値は上書きされます。

min-heightプロパティは要素の最小の高さを定義します。min-heightが指定されている場合、要素の高さがその値より小さくなることはありません。min-widthプロパティも同じ仕組みで、要素の最小の幅を定義します。

同様に、要素の最大の高さや幅を定義したい場合は、それぞれmax-heightとmax-widthを使用します。

先ほどのカフェの例に戻りましょう。今度は、ボックスの幅がユーザーの画面サイズに応じて変わるようにしたいとします。ボックスの最大幅は500pxとし、どのような環境でも100px未満にはならないようにします。この要件は、次のコードで実現できます。

<html>

<p class="aboutBox">The Pickled Appleは、イリノイ州スプリングフィールドを拠点に、2004年から質の高い紅茶、スペシャルティコーヒー、そしておいしいケーキを提供してきました。</p>

<style>

.aboutBox {
	max-width: 500px;
	min-width: 100px;
	background-color: lightgray;
}

コードの仕組みを詳しく見てみましょう。HTMLファイルでは、最初の例と同じテキストを<p>タグで囲んで記述しており、この段落にはaboutBoxというクラス名が関連付けられています。

CSSファイルでは、aboutBoxクラスに対して3つのプロパティを指定しています。

まず、max-widthプロパティが500pxに設定されているため、ボックスの幅は最大でも500pxです。次に、min-widthプロパティが100pxに設定されているため、ユーザーがどんなデバイスでサイトを閲覧していても、ボックスが100pxより狭く表示されることはありません。最後に、background-colorプロパティがlightgrayに設定されており、ボックスの背景色が薄いグレーになります。

このボックスのサイズはブラウザの大きさに応じて変化します。ブラウザのウィンドウを小さくすれば、ボックスのサイズもそれに合わせて縮まります。ただし、ブラウザのウィンドウがどれだけ大きくなっても、<p>タグの幅が500pxを超えることはありません。

まとめ

CSSのheightとwidthプロパティを使えば、Webページ上の要素の高さと幅を定義できます。

ただし、これらのプロパティは固定値を設定するものです。ボックスのサイズをブラウザのウィンドウサイズに応じて変化させたい場合は、min-height、min-width、max-height、max-widthプロパティを活用しましょう。

この記事では、CSSにおけるheightとwidthの基本、height・widthプロパティの使い方、そして対応するmax・min系プロパティを使ってWebページ上の要素のサイズを設定する方法を、実例とともに解説しました。これであなたも、height・widthプロパティをプロのように使いこなせるはずです！

  1. CSSのマージン（margin）とパディング（padding）の使い方を徹底解説

    マージンとパディングとは？CSSにおけるマージン（margin）とは、HTML要素の外側にある余白のことです。マージンを設定するには、CSSのmarginプロパティを使用します。このプロパティにより、要素の周囲にどれだけのスペースを空けるかを定義できます。一方、パディング（padding）とは、要素の内側にある余白のことです。paddingプロパティを使用すると、要素のコンテンツとその境界線（ボーダー）との間に、どれだけのスペースを設けるかを指定できます。marginとpaddingの違いmarginは要素の「外側」に適用されるため、隣接する他の要素との距離を作ります。対してpaddingは要

  2. HTMLのheight属性とwidth属性の使い方を徹底解説

    HTMLにおけるheight属性とwidth属性とは？HTMLのheight属性（高さ）とwidth属性（幅）は、要素の縦横のサイズを指定するために使用される属性です。値は「px」（ピクセル）単位で設定します。これらの属性を適切に指定することで、画像や埋め込みコンテンツが表示される前にレイアウトの領域が確保され、ページ読み込み時のガタつき（レイアウトシフト）を防ぐ効果も期待できます。height属性・width属性が使用できる主なHTML要素height属性とwidth属性は、以下のHTML要素で使用できます。番号要素height属性width属性1<canvas>（図形描画領域）