width / height

width属性

Formal syntax: [<length> | <percentage>]
    && [border-box | content-box]?
    | available | min-content | max-content | fit-content | auto
Syntax - width - CSS | MDN

widthの幅は要素のコンテンツ領域の幅であり、padding境界の内側の幅です。content area - Introduction to the CSS box model - CSS | MDN

要素への適用例 (width:100px)
HTML要素 適用結果
div
 
span  
input
img

参考

height属性

要素への適用例 (height:30px)
HTML要素 適用結果
div
 
span  
input
img

要素をドキュメントの高さに合わせる

要素のheightを100%として、htmlとbody要素のheightも100%とします。

html, body {
    height:100%;
}

<div style="height: 100%">
    <!-- -->
</div>

実行例

  1.  
  2.  
  3.  
  4.  
  5.  
  6.  
  7.  
  8.  
  9.  
  10.  
  11.  
  12.  
  13.  
  14.  
  15.  
  16.  
  17.  
  18.  
  19.  
  20.  
  21.  
  22.  
  23.  
  24.  
  25.  
  26.  
  27.  
  28.  
  29.  
  30.  

参考

参考

指定サイズにならない場合

対象の要素によっては、指定サイズで表示されないことがあります。

table要素を対象とする場合

tableにtable-layout:fixedが指定されていないと、セルの内容物が指定サイズを超えた場合、width/heightの指定は無視されます。

width属性とheight属性が指定された画像を対象とする場合

HTMLのwidthとheight属性でサイズを指定された画像において、CSSで一方のサイズのみを指定するとアスペクト比 (縦横比) が崩れることがあります。このような場合には他方の値に'auto'を指定するか、HTMLを修正できるならばwidthとheight属性を削除します。

値の設定方法 適用結果
HTMLの属性 CSS
width height width height
50 50 100px なし
50 50 100px auto
なし 100px なし
100 なし なし

参考

サイズの制限

指定サイズ以上、またはサイズ以下になるようにサイズを制限できます。

max-width、max-height属性

レスポンシブWebデザインを実現するための、フルードイメージに使えます。

min-width、min-height属性

関連ページ

HTMLの情報サイトから、まとめて検索