ほんっとにはじめての HTML5 と CSS3

ボックスモデル関連のプロパティがまだまだ続きます。
今回は、ボックスの「幅」や「高さ」を指定するプロパティ。
widthプロパティは「幅」を指定し、heightプロパティは「高さ」を指定できます。

ちなみに、width の読み方は、ウィズ。

以前は ウィドゥス（ウィズス）って d も発音するのが正しいとか言われて私もずっとそう言ってたけど、ウィズ が多数派みたい。
（またはウィッツ という発音もアリみたいです。ウィズが通じやすいのかな。私はもう「幅」って言いますわw）

height の読み方は、ハイト。

1. 幅のwidth、高さのheight
   1. box-sizingプロパティで適用の範囲を変えられる
2. width:auto は「置換要素」と「ブロックレベル」で違う表示に
3. width や height で <img>要素の幅や高さを統一する
4. width属性, height属性より CSSのほうが優先度が高い

幅のwidth、高さのheight

widthプロパティ と heightプロパティの値は同じで、以下のものがあります。

auto	これがデフォルト値です。 width や height を指定しなければ、このautoになり、親要素や自分自身のコンテンツなどによって自動計算されます。
数値	px や em などの単位を付けて指定します
%	親要素の幅や高さに対するパーセント

値の継承	なし	適用できる要素	全部

width と height は、インラインの要素には効きません。
ただし、デフォルトがインラインの要素でも、displayプロパティで ブロックやインラインブロックなどの性質にすれば、width や height が効きます。（displayプロパティは後日【19】でやります）

ただし、インラインの中でも 置換要素 なら、width と height が使えます。

置換ちかん要素とは、中身がほかのモノに置き換えられる要素で、中身がテキストでなく画像など他のファイルが入るので、自然に幅や高さができる要素。その代表格は <img>要素です。
＊置換要素については【9】HTML要素の インラインレベル・ブロックレベル についてで もう少し詳しく説明しています。

また、width と height にはマイナスの値は使えません。そりゃそうだ。

＊インライン・ブロックレベルなどについては【9】HTML要素の インラインレベル・ブロックレベル についてをご覧ください。

box-sizingプロパティで適用の範囲を変えられる

width や height は Content Box の領域の幅と高さを指定するのがデフォルトです。要素に border や padding がある場合、それらは幅や高さに含まれません。

ただし、box-sizingプロパティ で、width と height の適用範囲を変えることができます。

例えば、box-sizing: border-box と指定すれば、下図のように width と height は border までの範囲になります。

box-sizingプロパティについては、【10】ボックスモデル（margin, padding, border を使いこなそう）をご覧ください。

この、box-sizing: border-box と同じように padding も border も含んで 親要素にピッタリ収まるように表示になるのが width: auto なんですが、詳しくは次の項へ↓

width:auto は「置換要素」と「ブロックレベル」で違う

width と height のデフォルト値の auto ですが、このうち特に width: auto が重要。
「ブロックレベル」の場合、padding や border も含めちゃうし、「置換要素」と「ブロックレベル」で違う表示になっちゃうし。
次回やる「上限を決める max-width」にも深く関わってくるので、ぜひ覚えておこう。

● width:auto は、要素の padding も border も含む
width と height のデフォルトの範囲は「コンテンツの領域」なんですが、ブロックレベルの要素の場合、width: autoだと、padding も border も含めて親要素に対してピッタリ 収まるようにコンテンツの幅が調整されます。コレ重要。
ブロックレベルの要素なら、あえて width指定しなければ（ブラウザデフォルトのままなら）box-sizing: border-box と同じになるんですね。

ただし高さのほうは height:auto だと、コンテンツの高さ（内容に従ってなりゆきの高さ）プラス padding や border の高さになります。

● 置換要素は、width:auto で「原寸」
<img>要素など、固有のサイズを持つ 置換要素 なら、width:auto でそのサイズの原寸になります。
コレめっちゃ重要。同じ width:auto でも「置換要素」だけは原寸表示だと覚えておこう。

「置換要素」を親要素にピッタリ収めたければ、auto ではなく width:100% を使います。
このとき height: auto にしておけば、width に合わせてアスペクト比を保った高さになります。

画像が親要素より小さいサイズの場合は、width: 100% を使うと拡大表示されて解像度が低くなっちゃうので要注意。
親要素より大きいサイズなら、縮小されるので問題無し。

次回やる max-width では、幅の上限を決めて それ以上大きくならないように制限しますが、この上限が width の値に影響されるのがポイントです。
例えば、max-width: 100% と指定したとき、width を特に指定していなければ width: auto ですが、「ブロックレベル要素」での上限は 親要素の100％幅だけど、「<img>などの置換要素」での上限は画像のサイズまで。
この違いに「？」とならないために、width:auto の「置換要素」と「プロックレベル」での違いをよく覚えておこう。

今回のまとめです。

サンプルも作ってみましたので、見てみてください。
クリックで↓別ウィンドウで開きます。
サンプル：置換要素とブロックレベルの表示の違い

width や height で <img>要素の幅や高さを統一する

置換要素の中でもよく使う <img>要素を width, heightプロパティで操作してみます。
サンプルではサイズやアスペクト比がバラバラの画像を使っています。

このサンプルは各<img>要素を幅50％で統一しています。親要素の幅に対して50％の幅になります。
height: auto で画像のアスペクト比を保ちます。

上のサンプルの HTMLです。

<div id="smp1">
<img src="01.jpg"><img src="02.jpg"><img src="03.jpg">
</div>

CSSです。

div#smp1 {margin:0;padding:0;}
	width:600px  /*親のwidthがパーセンテージの元になります*/
    }
div#smp1 img {
	display:block;
	margin:0.5em 0;
	width:50%;  /*幅をパーセントで*/
	height:auto;  /*高さをautoにすることでアスペクト比を保ちます*/
    }

次のサンプルは <img>要素の高さを100pxで統一。こんどは幅のほうを autoにすればOK。

サンプルのCSSです。（HTMLは先ほどとまったく同じです）

div#smp2 {margin:0;padding:0;}
div#smp2 img {
	margin:0 0.5em;
	height:100px;
	width:auto}

<img>要素を同じ幅で横並びにしたい時は、テーブルのセルの中に入れた<img>要素に width:100% を指定するとイイかも。テーブルセルは table-layout: fixed で均等幅にします。

• 
• 
• 

上のサンプルの HTMLです。

<ul id="smp3">
<li><img src="01.jpg"></li>
<li><img src="02.jpg"></li>
<li><img src="03.jpg"></li>
</ul>

サンプルの CSSです。

ul#smp3 {
	display:table;  /*親にdisplay:table*/
	table-layout:fixed;  /*セルを均等幅にする指定です*/
	width:100%  /*table-layout:fixedは、widthをauto以外にしないと効きません*/
    }
ul#smp3 li {
	display:table-cell;  /*子にdisplay:table-cell*/
	vertical-align:top;
	padding:0 5px}
ul#smp3 li img {
	width:100%;  /*均等幅のセルの中にピッタリ収めます*/
	height:auto}

テーブル関連のプロパティや、displayプロパティについては、後日詳しくやります。（【19】あたりで）

width属性, height属性より CSSのほうが優先度が高い

<img>要素に width属性, height属性でサイズ指定をしていても、CSSの指定のほうが HTMLの width属性、height属性より優先度が高いので、width属性, height属性の値は無効になります。

<img src="01.jpg" width="430" height="430">

<style>
img {
	width:100%; /*幅430pxは無視して親要素に合わせたサイズになる*/
	height:auto} /*幅の拡大率に合わせてアスペクト比を保つ*/
</style>

width属性, height属性も、CSSの指定も全部書かない状態でも、CSSのブラウザ デフォルト値 width:auto; height:auto が働くので、 <img>は原寸表示になります。

なので <img>要素の width属性, height属性は、もう 書かなくてOK だと思う。
かつては書いたほうがレンダリングが速い（画像を読み込む前にスペースが確保される）と言われていましたが、今どきのハードウェアなら、よっぽど巨大な画像でもない限り心配無用かと思います。
文書をシンプルにするためにも、省略しちゃったほうがイイんじゃないかな。
（Dreamweaverなどで勝手に書かれちゃう場合は、無理して消さなくてイイけどw）

次回予告

次回は、幅や高さの上限を決める max-width, max-height、下限を決める min-width, min-height を使ってみよう。

関連記事

• 【17-3-2】テーブル関連の要素のためのCSSプロパティ
• 【17-3-1】display:table でテーブルじゃない要素をテーブルっぽく
• 【17-2-2】リスト関連の要素のためのCSSプロパティ
• 【17-2-1】display:list-itemでリスト関連じゃない要素をリストっぽく
• 【17-1】displayプロパティでボックスの表示形式を自由に変えよう
• （ちょっとメモ）スマホで background-attachment: fixedが効かない場合の対処法
• 【16-2】下限の min-width, min-height 上限の max-width, max-height
• 【16-1】幅の width、高さの heightプロパティ
• 【15-5】backgroundのショートハンド まとめ
• 【15-4】background関連のプロパティ（4/4　clip と origin）
• 【15-3】background関連のプロパティ（3/4　background-size）
• 【15-2】background関連のプロパティ（2/4　background-position）
• 【15-1】background関連のプロパティ（1/4）
• 【14】borderとよく似た outlineはレイアウトを崩さない
• 【13-2】border-imageと border-imageのショートハンド