CSSのwidthで横幅を指定する方法｜単位・max-width・効かない原因を初心者向けに解説

HTMLやCSSで横幅を指定するときは、基本的にCSSのwidthプロパティを使います。width: 300pxなら固定幅、width: 100%なら親要素を基準にした幅になります。

ただし、paddingやborderを加えると想定より大きくなったり、インライン要素にはwidthが効かなかったりします。この記事では、基本の指定からレスポンシブ対応、box-sizing、min-width・max-widthまで実例で解説します。

横幅の指定はCSSのwidthが基本

まず、横幅200ピクセルのボックスを作ってみましょう。HTMLには対象を区別するクラスを付け、見た目はCSSへ記述します。

<div class="sample-box">横幅200pxのボックス</div>

.sample-box {
  width: 200px;
  padding: 16px;
  background-color: #ccfbf1;
}

widthは要素の横幅を指定するプロパティです。通常のブロック要素は、widthを省略すると利用できる横幅へ広がりますが、値を指定するとその幅へ調整されます。

divにwidth属性を書いても横幅は指定できない

旧記事にあった次の書き方は使用しません。divにwidth属性を付けても、現在のHTMLで横幅を指定する正しい方法にはならないためです。

<!-- divの横幅をwidth属性で指定しない -->
<div width="300">内容</div>

div、p、sectionなど一般的な要素の横幅はCSSで指定します。HTMLは内容の構造や意味、CSSはレイアウトや見た目を担当すると分けて考えましょう。

HTMLのwidth属性を使える要素

HTMLのwidth属性は、img、canvas、iframe、videoなど一部の要素で定義されています。たとえばimgでは、画像ファイル本来の寸法を単位なしの整数で指定します。

<img
  src="images/mountain.jpg"
  width="1200"
  height="800"
  alt="湖の向こうに見える雪山"
/>

画像が読み込まれる前からブラウザが縦横比と空間を計算できるため、widthとheightを両方書くとレイアウトのずれを抑えられます。画面上の表示幅は、CSSでレスポンシブに調整できます。

widthで使う主な単位と値

widthには固定長、割合、ビューポート基準、文字サイズ基準など複数の値を使えます。目的に合う基準を選ぶことが大切です。

pxで固定幅を指定する

pxは分かりやすい一方、画面が狭くなっても指定値のままです。大きな固定幅はスマートフォンではみ出す可能性があるため、上限や割合と組み合わせます。

.profile-card {
  width: 320px;
}

%は親側の横幅を基準にする

width: 50%は、多くの通常レイアウトで包含ブロックの横幅の半分になります。「常に画面の半分」ではなく、配置されている親側の幅を基準にする点へ注意してください。

<div class="parent">
  <div class="child">親要素の半分</div>
</div>

.parent {
  width: 600px;
}

.child {
  width: 50%;
}

この場合、childの計算上の幅は300ピクセルです。親側をレスポンシブにすれば、子の割合幅も一緒に変化します。

autoはブラウザへ幅の計算を任せる

widthの初期値はautoです。ブロック要素では左右のmarginや利用可能な空間を考慮して幅が決まり、インライン要素では内容に沿って並びます。

レスポンシブな横幅を指定する

記事本文やカードを「狭い画面では画面に収め、大きな画面では広がりすぎない」状態にするなら、widthとmax-widthを組み合わせます。

.content {
  width: 100%;
  max-width: 960px;
  margin-inline: auto;
  padding-inline: 24px;
}

利用可能な幅が960ピクセルより小さいときは100%まで縮み、広いときは960ピクセルで止まります。margin-inline: autoは、残った左右の余白を均等にして要素を中央へ配置します。

min-widthとmax-widthの優先関係

min-widthは最小幅、max-widthは最大幅です。widthが最小幅より小さければmin-widthが、最大幅より大きければmax-widthが優先されます。

.search-field {
  width: 50vw;
  min-width: 240px;
  max-width: 640px;
}

この入力欄は基本的に画面幅の50%ですが、240ピクセル未満にはならず、640ピクセルを超えて広がりません。

clampで最小・可変・最大を1行にまとめる

clamp(最小値, 推奨値, 最大値)を使うと、3段階の条件をwidthへまとめて指定できます。

.responsive-card {
  width: clamp(280px, 70vw, 720px);
}

基本は画面幅の70%で変化しつつ、280ピクセルから720ピクセルの範囲へ収まります。ただし、最小値が端末幅より大きいと横にはみ出すため、小さな画面を含めて確認してください。

画面幅に応じたページ全体の設計やメディアクエリは、次の記事で詳しく解説しています。

widthより実際の横幅が大きくなる原因

CSSの初期状態ではbox-sizing: content-boxが使われ、widthは内容部分だけの幅を表します。左右のpaddingとborderは、その外側へ追加されます。

.content-box {
  box-sizing: content-box;
  width: 300px;
  padding: 20px;
  border: 5px solid #0f766e;
}

表示上の外幅は、300 + 20 + 20 + 5 + 5で350ピクセルです。marginは箱の外側の余白なので、この外幅には含まれません。

border-boxならpaddingとborderをwidthへ含める

.border-box {
  box-sizing: border-box;
  width: 300px;
  padding: 20px;
  border: 5px solid #0f766e;
}

border-boxでは、表示上の外幅が300ピクセルに収まるよう、内容部分が内側へ縮みます。横幅計算が分かりやすくなるため、サイト全体へ次の設定を使う方法があります。

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

CSSの優先順位や記述ルールも含めて確認したい方は、こちらを参考にしてください。

widthが効かないときの確認ポイント

spanやaがインライン要素になっている

既定でdisplay: inlineのspanやaでは、通常のwidthとheightが表示上のサイズへ反映されません。横幅を持たせたい場合は、用途に応じてinline-blockやblockへ変更します。

<a class="button-link" href="/contact/">お問い合わせ</a>

.button-link {
  display: inline-block;
  width: 240px;
  padding: 12px 20px;
  text-align: center;
}

なお、imgは置換要素で、既定表示がinlineでもCSSのwidthとheightを指定できます。「インラインならすべてwidthが効かない」と一括りにしないでください。

max-widthまたはmin-widthに制限されている

widthを変更しても同じ幅で止まる場合は、同じ要素へmin-widthやmax-widthが指定されていないか確認します。ブラウザの開発者ツールで、適用中のスタイルと取り消し線を見てください。

長い文字列や画像が要素を押し広げている

改行できないURL、長い英単語、固定幅の画像などがあると、指定幅からはみ出して見えることがあります。画像にはmax-width: 100%、長い文字列には状況に応じてoverflow-wrap: anywhereを使います。

.article img {
  max-width: 100%;
  height: auto;
}

.article {
  overflow-wrap: anywhere;
}

Flexboxの子要素が内容より小さくならない

Flexboxの子要素は、長い内容を持つと期待どおり縮まないことがあります。縮めたいflex itemへmin-width: 0を指定すると解決する場合があります。

.layout {
  display: flex;
}

.main-content {
  min-width: 0;
  flex: 1;
}

Flexboxの基本的な幅配分や横並びはこちらで詳しく解説しています。

widthのよくある質問

width: 100%と100vwは同じですか？

同じではありません。100%は通常、包含ブロックの幅を基準にし、100vwはビューポート幅を基準にします。親要素に余白がある場所で100vwを使うと、画面からはみ出して横スクロールが発生することがあります。

widthとmax-widthはどちらを使いますか？

widthは基本となる幅、max-widthは広がれる上限です。レスポンシブなコンテンツでは、width: 100%とmax-widthを組み合わせる方法がよく使われます。

width: autoとwidth: 100%の違いは何ですか？

autoは余白やレイアウト規則を含めてブラウザが幅を計算します。100%は計算の基準となる幅を明示的に使うため、paddingやborderとの組み合わせによっては親要素を超えることがあります。

まとめ

divなど一般的なHTML要素の横幅は、HTMLのwidth属性ではなくCSSのwidthプロパティで指定します。画像など一部の要素ではHTML属性も使えますが、表示上のレイアウトはCSSで調整するのが基本です。

レスポンシブ対応ではwidthとmax-widthを組み合わせ、paddingやborderを含む幅を扱いやすくするならbox-sizing: border-boxを使います。横幅が効かないときは、display、min/max-width、内容のはみ出し、親要素の幅を順番に確認しましょう。

参考資料

• MDN：width
• MDN：box-sizing
• MDN：The box model
• MDN：clamp()
• MDN：HTML attribute reference