【16-1】幅の width、高さの heightプロパティ

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

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

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

height の読み方は、ハイト

本日のINDEX
  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 で画像のアスペクト比を保ちます。

<div id="smp1">
<img src="01.jpg"><img src="02.jpg"><img src="03.jpg">
</div>
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。

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

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

<ul id="smp3">
<li><img src="01.jpg"></li>
<li><img src="02.jpg"></li>
<li><img src="03.jpg"></li>
</ul>
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 scoped>
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 を使ってみよう。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
07 | 2017/08 | 09
- - 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 31 - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.