CSSでサイズを自由自在に調整！初心者向けに幅・高さ・単位の使い方を解説

Webサイトを作っていると、テキストやボックス、画像の「サイズ」をどうやって調整すればいいか、悩むことが多いのではないでしょうか。

初心者の方からよく聞く疑問：

幅や高さをどう指定する？
単位は px、%、em どれを使えばいい？
レスポンシブデザインではどうする？
画像サイズが思った通りにならない…

CSSを使えば、さまざまな方法でサイズを設定できます。

この記事では、初心者の方にもわかりやすく次のことを解説します：

CSSでサイズを指定する基本的なプロパティ
各単位の特徴と使い分け方
レスポンシブデザインでのサイズ調整
画像や動画のサイズ設定
よくあるトラブルと解決方法

CSSの「サイズ」の基本から応用まで詳しく学んで、思い通りのレイアウトを作れるようになりましょう。

CSSでサイズを指定する基本
サイズを決める単位
レスポンシブに対応するサイズのコツ
画像や動画のサイズを調整する
よくある疑問Q&A
実践的な活用例
この記事のまとめ

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

幅と高さを指定するプロパティ

プロパティ	説明	例
`width`	要素の横幅を指定	`width: 300px;`
`height`	要素の縦の高さを指定	`height: 150px;`
`max-width`	幅の最大値を指定	`max-width: 800px;`
`min-width`	幅の最小値を指定	`min-width: 300px;`
`max-height`	高さの最大値を指定	`max-height: 400px;`
`min-height`	高さの最小値を指定	`min-height: 200px;`

基本的な例

.box {
  width: 300px;    /* 幅を300pxに */
  height: 150px;   /* 高さを150pxに */
}

これで.boxは幅300px、高さ150pxになります。

実際の使用例

<div class="container">
  <div class="box">ボックス1</div>
  <div class="box">ボックス2</div>
</div>

.container {
  width: 100%;
  max-width: 1200px;  /* 最大幅を制限 */
  margin: 0 auto;     /* 中央寄せ */
}

.box {
  width: 300px;
  height: 200px;
  background-color: #e0e0e0;
  margin: 20px;
  padding: 20px;
}

ボックスモデルの理解

.box {
  width: 200px;          /* コンテンツ幅 */
  height: 100px;         /* コンテンツ高さ */
  padding: 20px;         /* 内側の余白 */
  border: 2px solid #333; /* 枠線 */
  margin: 10px;          /* 外側の余白 */
}

実際の表示サイズ：

コンテンツ：200px × 100px
padding込み：240px × 140px
border込み：244px × 144px
margin込み：264px × 164px

box-sizingで計算を簡単に

.box {
  box-sizing: border-box;  /* paddingとborderを含めてwidth計算 */
  width: 200px;
  padding: 20px;
  border: 2px solid #333;
  /* 実際の表示幅は200pxになる */
}

サイズを決める単位

CSSではサイズを決めるときに「単位」がとても大切です。代表的なものを紹介します。

1. px（ピクセル）

最もよく使う単位。画面上のドット単位で指定します。

.box {
  width: 200px;
  height: 100px;
}

特徴：

固定サイズ：どの画面でも同じ大きさ
精密な指定：1ピクセル単位で調整可能
初心者に分かりやすい

使用例：

/* ボタンのサイズ */
.button {
  width: 120px;
  height: 40px;
}

/* アイコンのサイズ */
.icon {
  width: 24px;
  height: 24px;
}

2. %（パーセンテージ）

親要素に対する割合で決まる単位。

.child {
  width: 50%;  /* 親要素の幅の50% */
}

仕組み：

<div class="parent">        <!-- 幅800px -->
  <div class="child">...</div>  <!-- 幅400px（800pxの50%） -->
</div>

.parent {
  width: 800px;
}

.child {
  width: 50%;  /* 400px */
}

レスポンシブでの活用：

.container {
  width: 90%;          /* 画面幅の90% */
  max-width: 1200px;   /* ただし最大1200px */
}

.sidebar {
  width: 25%;          /* コンテナの25% */
}

.main-content {
  width: 75%;          /* コンテナの75% */
}

3. em と rem

文字サイズに応じて変化する単位。

単位	基準	説明
`em`	親要素の文字サイズ	親の`font-size`を1emとする
`rem`	ルート要素の文字サイズ	html要素の`font-size`を1remとする

emの例

.parent {
  font-size: 20px;
}

.child {
  font-size: 1.5em;  /* 20px × 1.5 = 30px */
  margin: 1em;       /* 30px（自分のfont-sizeが基準） */
}

remの例

html {
  font-size: 16px;   /* ルート要素 */
}

.box {
  width: 20rem;      /* 16px × 20 = 320px */
  padding: 1rem;     /* 16px */
}

使い分けのコツ：

rem：全体的な統一感を出したい
em：コンポーネント内での相対的なサイズ調整

4. vh と vw（ビューポート単位）

画面（ビューポート）のサイズに対する割合。

単位	意味	説明
`vw`	ビューポート幅の1%	画面幅1400pxなら1vw=14px
`vh`	ビューポート高の1%	画面高800pxなら1vh=8px
`vmin`	vwとvhの小さい方	画面の小さい方向を基準
`vmax`	vwとvhの大きい方	画面の大きい方向を基準

実用例

/* フルスクリーンヒーロー */
.hero {
  width: 100vw;      /* 画面幅いっぱい */
  height: 100vh;     /* 画面高さいっぱい */
}

/* 画面の半分の高さ */
.half-screen {
  height: 50vh;
}

/* レスポンシブな文字サイズ */
.responsive-text {
  font-size: 4vw;   /* 画面幅に応じて変化 */
}

モバイル対応での注意

/* モバイルブラウザでのアドレスバー問題対策 */
.full-height {
  height: 100vh;
  height: 100dvh;    /* 動的ビューポート（新しいブラウザ） */
}

5. その他の便利な単位

ch（文字幅）

.input {
  width: 20ch;       /* 文字20文字分の幅 */
}

calc()関数

.box {
  width: calc(100% - 40px);    /* 100%から40px引く */
  height: calc(100vh - 80px);  /* 100vhから80px引く */
}

レスポンシブに対応するサイズのコツ

幅はパーセンテージとmax-widthで

スマホやタブレットなど画面サイズが変わっても対応しやすい設定：

.container {
  width: 90%;           /* 画面幅の90% */
  max-width: 1200px;    /* 最大1200px */
  margin: 0 auto;       /* 中央寄せ */
}

効果：

スマホ：画面幅の90%（狭い画面でも適切な余白）
タブレット：画面幅の90%（中間サイズに対応）
PC：最大1200px（大画面でも読みやすい幅）

メディアクエリでの調整

.box {
  width: 100%;          /* スマホ：フル幅 */
}

@media (min-width: 768px) {
  .box {
    width: 50%;         /* タブレット：半分 */
  }
}

@media (min-width: 1024px) {
  .box {
    width: 33.333%;     /* PC：3分の1 */
  }
}

高さは固定しすぎない

高さを固定（height: 300px;）すると、文字量が変わったときにレイアウトが崩れやすくなります。

問題のある例

.card {
  height: 200px;       /* 固定高さ */
}

問題：

文字が多いと溢れる
文字が少ないと余白が大きすぎる

改善した例

.card {
  min-height: 200px;   /* 最小高さのみ指定 */
  /* heightは指定しない */
}

FlexboxとGridでのサイズ制御

Flexboxでの柔軟なサイズ

.flex-container {
  display: flex;
}

.flex-item {
  flex: 1;             /* 均等に配分 */
  min-width: 200px;    /* 最小幅を保証 */
}

.flex-sidebar {
  flex: 0 0 300px;     /* 固定幅300px */
}

CSS Gridでの精密なレイアウト

.grid-container {
  display: grid;
  grid-template-columns: 1fr 300px 1fr;  /* 中央固定、両端可変 */
  grid-template-rows: auto 1fr auto;      /* ヘッダー、メイン、フッター */
  height: 100vh;
}

画像や動画のサイズを調整する

自動で比率を保つ方法

画像を幅だけ指定すると、高さは自動的に比率を保ちます。

img {
  width: 100%;         /* 親要素の幅に合わせる */
  height: auto;        /* 高さは自動（比率維持） */
}

高さを基準にする場合

img {
  height: 300px;       /* 高さを固定 */
  width: auto;         /* 幅は自動（比率維持） */
}

レスポンシブ画像の設定

.responsive-image {
  max-width: 100%;     /* 親要素を超えない */
  height: auto;        /* 比率を維持 */
}

アスペクト比を固定する

.aspect-ratio-box {
  width: 100%;
  aspect-ratio: 16 / 9;  /* 16:9の比率を維持 */
}

/* 古いブラウザ対応 */
.aspect-ratio-legacy {
  width: 100%;
  padding-bottom: 56.25%; /* 9/16 * 100% = 56.25% */
  height: 0;
  position: relative;
}

.aspect-ratio-legacy img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

object-fitで画像の表示方法を制御

.image-container {
  width: 300px;
  height: 200px;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;    /* はみ出た部分をカット */
  object-fit: contain;  /* 全体を表示（余白あり） */
  object-fit: fill;     /* 比率無視で引き伸ばし */
}

よくある疑問Q&A

Q. 固定（px）とパーセンテージ（%）どちらがいい？

A: 用途に応じて使い分けましょう

固定（px）が適している場面：

ボタンのサイズ
アイコンのサイズ
ボーダーの太さ
細かいデザイン要素

パーセンテージ（%）が適している場面：

コンテナの幅
レスポンシブレイアウト
画像のサイズ
カラムレイアウト

Q. 文字のサイズも同じ単位？

A: 文字サイズはpx、em、remがよく使われます

推奨する使い分け：

全体を統一するならrem：サイト全体で一貫したサイズ感
コンポーネント単位で調整するならem：親要素に応じて柔軟に
小さいデザインパーツにはpx：精密な調整が必要な場合

html {
  font-size: 16px;     /* ベースサイズ */
}

body {
  font-size: 1rem;     /* 16px */
}

h1 {
  font-size: 2rem;     /* 32px */
}

.button {
  font-size: 14px;     /* 精密指定 */
}

.card-title {
  font-size: 1.2em;    /* 親要素に対して1.2倍 */
}

Q. 画面サイズに応じてサイズを変えたい

A: メディアクエリとビューポート単位を活用

.responsive-box {
  width: 90vw;         /* 画面幅の90% */
  max-width: 800px;    /* 最大800px */
  font-size: 4vw;      /* 画面幅に応じた文字サイズ */
}

/* より細かい制御 */
@media (max-width: 768px) {
  .responsive-box {
    font-size: 18px;   /* スマホでは固定サイズ */
  }
}

Q. 高さを画面いっぱいにしたい

A: 100vhを使いましょう

.full-height {
  height: 100vh;       /* 画面の高さいっぱい */
}

/* ヘッダーがある場合 */
.main-content {
  height: calc(100vh - 60px);  /* ヘッダー分を引く */
}

実践的な活用例

カードレイアウト

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  padding: 20px;
}

.card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  min-height: 200px;
}

.card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 4px;
}

ヒーローセクション

.hero {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
}

.hero-content {
  text-align: center;
  max-width: 600px;
  padding: 0 20px;
}

.hero h1 {
  font-size: clamp(2rem, 5vw, 4rem);  /* レスポンシブな文字サイズ */
}

サイドバーレイアウト

.layout {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: 250px;
  flex-shrink: 0;      /* 縮まないように */
  background: #f5f5f5;
}

.main {
  flex: 1;             /* 残りのスペースを占有 */
  padding: 20px;
  min-width: 0;        /* テキスト溢れ対策 */
}

@media (max-width: 768px) {
  .layout {
    flex-direction: column;
  }
  
  .sidebar {
    width: 100%;
  }
}