幅と高さの指定方法

先生、要素のサイズって変えられるんですか？ボタンを大きくしたり、画像のサイズを調整したりできるんでしょうか？

もちろんできるよ！CSSのwidth（幅）とheight（高さ）というプロパティを使って、要素のサイズを自由に調整できるんだ。これがWebページレイアウトの基本中の基本なんだよ。

単位も色々あるって聞いたことがあります。ピクセル以外にも、パーセントとかがあるんですよね？

そうだね。px（ピクセル）、%（パーセント）、auto（自動）など、それぞれに特徴があるんだ。特に現代では、様々な画面サイズに対応する「レスポンシブデザイン」が重要だから、単位の選択はとても大切なんだよ。今日はwidth と height の基本から、実践的な使い方まで学んでいこう！

基本概念の理解（width と height）

width と height って、具体的にはどんな風に使うんですか？

実際にコードを見ながら理解していこう。width は要素の幅、height は要素の高さを指定するプロパティなんだ。これらを使うことで、要素を思い通りのサイズに調整できるようになるよ。

なぜサイズ指定が重要なのか

Web制作において、要素のサイズを適切に制御することは、美しく使いやすいWebページを作るために不可欠です。サイズ指定が与える影響を理解することで、より効果的なWebデザインができるようになります。

CSSでサイズを指定する基本の方法

CSSで要素のサイズを制御する際に最も基本となるのが、幅を指定するwidthと高さを指定するheightの2つのプロパティです。これらを使うことで、要素の表示領域を細かく調整できます。

width（幅）プロパティ

要素の幅を指定するプロパティです。レイアウトの基本となる重要な設定で、コンテンツの表示領域を決める要素の一つです。

基本的な書き方

セレクター {
    width: サイズの値;
}

サイズの値は以下の方法で指定できます。

実際のコード例

/* ピクセル値で固定幅を指定 */
.fixed-box {
    width: 200px;             /* 200ピクセル固定 */
    background-color: lightblue;
}

/* パーセント値で相対的な幅を指定 */
.relative-box {
    width: 80%;               /* 親要素の80%の幅 */
    background-color: lightgreen;
}

height（高さ）プロパティ

要素の高さを指定するプロパティです。縦方向のレイアウトを制御し、要素の視覚的な存在感を調整するのに使用します。

基本的な書き方

セレクター {
    height: サイズの値;
}

heightでも、widthと同様の方法でサイズを指定できます。ただし、heightはコンテンツの量に応じて自動的に調整されることが多いため、固定値を使う場合は注意が必要です。

実際のコード例

/* 固定高さを指定 */
.header {
    height: 80px;             /* 80ピクセル固定 */
    background-color: navy;
}

/* 自動調整（推奨） */
.content {
    height: auto;             /* 内容に応じて自動調整 */
    background-color: #f5f5f5;
}

実際の動作を確認してみよう

理論だけでなく、実際にコードを動かして width と height の効果を確認してみましょう。

要素の種類による width・height の効き方

HTMLの要素には、ブロック要素とインライン要素という2つの基本的な表示タイプがあり、width と height の効き方が異なります。さらにインラインブロック要素という中間的なタイプも存在します。これらの違いを見ていきましょう。

ブロック要素とインライン要素って何ですか？聞いたことはあるんですが、よくわからなくて…

そうだなぁ。簡単に言うと、ブロック要素は「箱のように四角い領域を持つ要素」で、インライン要素は「文章の中に組み込まれる要素」なんだ。実際に見てみると理解しやすいよ。

ブロック要素とインライン要素の特徴

各要素タイプの特徴まとめ

3つの要素タイプの特徴を一覧で確認してみましょう。

実際の動作比較

ブロック要素、インライン要素、そしてインラインブロック要素で、width と height の効き方がどう違うかを実際に確認してみましょう。

要素の種類によって width・height の効き方が違うなんて知りませんでした！

そうなんだ。ブロック要素は自由にサイズ指定できるけど、インライン要素は内容に応じたサイズになる。そしてインラインブロック要素は、両方の良いところを併せ持っているんだね。

つまり、サイズを指定したい場合は、要素がブロック要素かインラインブロック要素である必要があるということですね？

その通り！もしインライン要素のサイズを変更したい場合は、CSSで display: inline-block や display: block に変更することもできるんだ。要素の表示タイプは変更可能なんだよ。

単位の基本

さっきから px とか % とか出てきましたが、どう使い分けるんですか？

いい質問だね！単位の選択は、デザインの意図や使用場面によって決まるんだ。固定サイズにしたいのか、画面サイズに応じて変化させたいのかで変わってくるよ。

固定サイズ vs 可変サイズの考え方

CSSの単位は大きく固定サイズと可変サイズに分けられます。どちらを選ぶかで、Webページの表示が大きく変わります。

固定サイズ単位の詳細

画面サイズに関係なく、常に同じサイズで表示される単位です。

px（ピクセル）- Web制作の基本単位

pxは画面上の1ピクセルを表す単位で、最も直感的で理解しやすい固定単位です。デバイスの解像度に依存せず、常に同じ物理サイズを持ちます。

.button {
    width: 120px;      /* 常に120ピクセル幅 */
    height: 40px;      /* 常に40ピクセル高 */
    border: 2px solid blue;  /* 2ピクセルのボーダー */
}

可変サイズ単位の詳細

親要素や画面サイズに応じて、動的にサイズが変化する単位です。現代のレスポンシブデザインの基礎となります。

rem（ルート基準）- フォントサイズ基準の相対サイズ

rem（root em）は、ルート要素（html要素）のフォントサイズを基準とした単位で、現代Web開発で最も重要な単位の一つです。

.heading {
    font-size: 2rem;    /* 32px（16px × 2） */
    margin-bottom: 1rem; /* 16px（16px × 1） */
}

.container {
    padding: 1.5rem;    /* 24px（16px × 1.5） */
}

%（パーセント）- 親要素基準の相対サイズ

%は親要素のサイズに対する割合を表す単位で、レスポンシブデザインの基本となります。例えば、親要素の幅が1000pxの場合、50%は500pxになります。

.sidebar {
    width: 25%;        /* 親要素の25%の幅 */
}

.main-content {
    width: 75%;        /* 親要素の75%の幅 */
}

box-sizing: border-box の活用

現代のWeb開発では、直感的なサイズ計算のために box-sizing: border-box がよく使われます。

box-sizing: border-boxとは、要素の width と height に padding と border を含める設定です。これにより、指定したサイズ内に余白と枠線が収まるため、レイアウトが崩れにくくなります。

width: 100% にしたら、要素が親からはみ出してしまったんですが…

それはよくある問題だね。CSSでは width に加えて padding（内側の余白）や border（枠線）も要素の実際のサイズに影響するんだ。これを理解しておくと、レイアウトがうまくいくよ。

/* 親要素 */
.container {
  width: 500px;
  background: lightgray;
  padding: 1rem;
}

.box-default {
  width: 100%;  /* 親要素の幅いっぱい */
  padding: 20px;
  border: 3px solid darkblue;
  /* 実際のサイズ: 100%(500px) + 40px (paddingの左と右) + 6px (borderの左と右) = 546px */
}

/* 直感的な計算方法 */
.box-borderbox {
  width: 100%;  /* 親要素の幅いっぱい */
  padding: 20px;
  border: 3px solid darkblue;
  box-sizing: border-box;  /* これで収まる */
  /* 実際のサイズ: 100% 内に padding と border が含まれる */
}


/* プロジェクト全体に適用する一般的な設定 */
* {
  box-sizing: border-box;
}

対応するHTML:

<div class="container">
  <div class="box-default">box-default クラス: デフォルト（はみ 出す）</div>
  <div class="box-borderbox">box-borderbox クラス: border-box（収まる）</div>
</div>

HTML CSS

CSSコード:

プレビュー:

エディターを表示 コード編集 コードを隠す

vw・vh（ビューポート単位）- 画面サイズ基準の相対サイズ

vw（viewport width）とvh（viewport height）は、ブラウザの表示領域（ビューポート）に対する割合を表します。viewportの幅や高さに応じて、要素のサイズが変化します。

.hero-section {
    width: 100vw;      /* 画面幅いっぱい */
    height: 100vh;     /* 画面高さいっぱい */
}

.half-screen {
    width: 50vw;       /* 画面幅の半分 */
}

auto（自動）- ブラウザ計算による動的サイズ

autoは数値ではなく、ブラウザが自動的にサイズを計算する特別な値です。width と height の初期値で、最も重要な概念の一つです。

.flexible-box {
    display: block; /* ブロック要素 */
    width: auto;    /* 親要素いっぱいに広がる */
    height: auto;   /* 内容に応じて調整される */
}

実際の単位比較

様々な単位がどのように動作するかを実際に確認してみましょう。

実践的なテクニック

色々な単位があるのは分かったんですが、実際にどう使い分ければいいんでしょうか？

まずは基本的なガイドラインを押さえた上で、具体的なシナリオに応じて適切な単位を選ぶことが大切だよ。次に、いくつかの実践的な例を見てみよう。

max-width と min-width の活用

max-width - 横幅の上限を設定

max-width は要素の最大幅を制限します。これにより、画面が大きくても要素が広がりすぎることを防げます。

/* 記事の横幅を制限 */
.article {
  width: 100%;          /* 基本は画面幅に合わせる */
  max-width: 800px;     /* でも800pxを超えないように */
}

/* 画像のはみ出し防止 */
.image {
  width: 100%;
  max-width: 100%;      /* 親要素からはみ出さない */
}

min-width - 横幅の下限を設定

min-width は要素の最小幅を保証します。画面が小さくなっても、一定のサイズを維持できます。

/* ボタンの最小サイズを確保 */
.button {
  padding: 0.5rem 1rem;
  min-width: 120px;     /* 最低120pxは確保 */
  text-align: center;
}

/* サイドバーの最小幅 */
.sidebar {
  width: 25%;
  min-width: 200px;     /* 狭くなっても200px維持 */
}

組み合わせの活用

実際の開発では、これらを組み合わせて柔軟なレイアウトを作ります。

画像を崩さずに縮ませる（width: 100%; height: auto）

画像を表示した時に、画面サイズに合わせて大きさを変えたいんですが、縦横の比率が崩れてしまうことがあって…

それは画像のレスポンシブ対応でよくある課題だね。width: 100% と height: auto を組み合わせることで、画像の縦横比を保ちながら親要素に合わせて縮小できるよ。実際に見てみよう。

画像をレスポンシブに表示するには、縦横比を保持しながらサイズを調整することが重要です。間違った方法では画像が歪んでしまいます。

/* ❌ 間違った方法：画像が歪む */
.image-bad {
    width: 100%;
    height: 70px;    /* 固定高さで歪む */
}

/* ✅ 正しい方法：縦横比を保持 */
.image-good {
    width: 100%;      /* 親要素の幅に合わせる */
    height: auto;     /* 縦横比を保持して自動調整 */
}

/* さらに安全な設定 */
.image-responsive {
    max-width: 100%;  /* 親要素からはみ出さない */
    height: auto;     /* 縦横比を保持 */
}

実際の画像で確認してみよう

nature1.jpgを使って、実際にレスポンシブ画像の動作を確認してみましょう。

なるほど！height: auto にすることで、幅に合わせて高さが自動的に調整されるんですね。

その通り！さらに max-width: 100% を使うと、画像が親要素より大きい場合でもはみ出すことがないから、より安全なんだ。これが現代のレスポンシブデザインの基本パターンだよ。

画像レスポンシブ対応のポイント

理解度チェッククイズ

それじゃあ、今日学んだCSSサイズプロパティについて、理解度をチェックしてみよう！しっかり覚えているかな？

.container {
width: 800px;
}

.box {
width: 25%;
}

/* A */
.image {
  width: 100%;
  height: 100%;
}

/* B */
.image {
  width: 100%;
  height: auto;
}

/* C */
.image {
  width: auto;
  height: 100%;
}

html {
font-size: 16px;
}

.heading {
font-size: 2.5rem;
margin-bottom: 1rem;
}

まとめ

今日習った単位を整理すると、pxは固定、%は親要素基準、remはルート基準、vwとvhは画面基準、autoはブラウザお任せってことですね。

その通り！よくまとめられたね。そして実際の開発では、max-widthやmin-widthと組み合わせることで、どんな画面サイズでも使いやすいデザインが作れるんだ。

単位によって得意な場面が違うから、目的に合わせて選ぶのが大切なんですね。

まさにその通り。最初は迷うかもしれないけど、たくさん実践しているうちに自然と使い分けられるようになるよ。今日学んだ基礎をしっかり覚えておこう。