2019/06/11)widthとheightはそれぞれ、要素の横幅と高さを指定するプロパティです。基本的にこのプロパティを組み合わせてレイアウトを整えていくことになります。使用頻度が高いプロパティとなるので、しっかりと理解しておきましょう。ウィズ)要素の横幅を指定するheignt(ハイト)要素の高さを指定する簡単な例を見てみましょう。}横幅・高さを設定してみよう要素が指定した通りの横幅・高さになっているのがわかります。まとめwidth、heightが効かないときは本題に入る前に、widthやheightが効かない場合に見直すべき点を紹介します。widthやheightが効かない場合、スペル間違いでなければ、displayの値がinlineになっていることが原因であることがほとんどです。横幅や高さを変えたい場合は、displayの値をblockやinline-blockに変更すれば、効くようになります。displayの値がinlineの場合は、横幅や高さを指定することができないcssの仕様上、displayの値がinlineの場合は、横幅や高さを指定することができません。横幅や高さは要素の中身によって自動的に決められるからです。そのため、aタグやspanタグのような、displayのデフォルト値がinlineのタグは、初期状態のままではwidthやheightを設定できないので覚えておきましょう。displayを変えたaタグ1つ目のaタグはdisplayを変えてないので、widthもheightも効いていません。inline-block;としているので、widthとheightが効いているのがわかります。参考インライン、ブロックなどのdisplayの値については下記の記事を参考にしてください。参考記事CSSのインライン(inline)とブロック(block)について解説この記事ではインライン要素とブロックレベル要素について解説していきます。重要なことを述べますが、「インライン要素」「ブロックレベル要素」という概念はHTML5ではなくなりました。[...]widthの指定方法widthは要素の横幅を指定します。横幅とは要素の横方向の長さのことです。指定方法にはいくつかの種類がありますが、使用頻度が高いのは以下の3つです。auto〜px〜%横幅にautoを指定widthのデフォルト値であり、widthプロパティに何も指定しない場合もこの値になります。auto(オート)は自動の意味で、この値が設定されている要素は横幅いっぱいまで伸びるようになります。親要素の横幅を超えることはありません。autoがどのような横幅になるのか実際に見てみましょう。}親要素で横幅指定なし親要素で横幅指定あり1つ目のpタグは横幅いっぱいに伸びていますね。2つ目のpタグは親要素のdivに横幅が設定されているため、親要素の横幅を超えることが出来ないので、「pタグの横幅=親要素の横幅」になっています。autoはデフォルト値のため書かなくてもよいのですが、わかりやすくするためにあえて書いています。要素の横幅をpxで指定することが出来ます。後述する「%」などとは違い、指定した値がそのまま横幅の値となります。}ボックスの中にボックスを入れて、それぞれに横幅・高さを指定しました。このようにpxを使えば、自分の好きな大きさに設定することが出来ます。親要素より大きい横幅をpxで指定するとはみ出してしまうので注意しましょう。}子要素の赤いボックスが親要素からはみ出しているのがわかります。autoと違って簡単にはみ出してしまうので気をつけて設定しましょう。横幅を%で指定%で指定した場合は、親要素の横幅に対する割合になります。親要素が500pxのとき、width:50%を指定すると250pxになります。width:10%なら50pxです。}赤いボックスには横幅50%を、青いボックスには横幅10%を指定していますが、その通りに表示されていますね。width:100%は要注意width:100%とすると親要素と同じ横幅になりますが、その時の横幅にはpaddingとborderが含まれまていません。width:100%の要素に、paddingとborderを設定すると、その分トータルの横幅が広がり、親要素からはみ出してしまいます。width:autoであれば、paddingとborderを含めた上で親要素の横幅と一緒になるので、親要素と一緒の横幅にしたい場合はそちらを使うと良いでしょう。してもwidth:100%を使いたい場合はborder-boxプロパティを使うことで、paddingとborderを横幅に含むようにすることもできます。border-boxについてはまた別記事で開設予定です。親に横幅が設定されていない場合%で指定した要素の、親要素に横幅が設定されていない場合どうなるでしょうか?要素の横幅のデフォルト値はautoのため、親の横幅が設定されていなければ、親の親と同じ横幅になっています。その親にも設定されていなければ、そのさらに親をたどり、最終的にはbodyタグの横幅を見ることになります。bodyタグにも横幅が設定されていなければ、ブラウザの横幅がbodyの横幅ということになるので、子要素もブラウザの横幅いっぱいに広がることになります。%を使ったテクニック%をうまく使うと、三等分や四等分といったコンテンツを簡単に実現できます。25%;を指定することで4分割にしています。25%の部分を50%にすれば2分割に、33%に変えれば3分割になります。}親要素の2分割になったのがわかると思います。0;とletter-spacing:0;は、divタグやliタグをinline-blockで並べると、間に隙間が入りくずれてしまうので、それを防ぐためのテクニックです。heightの指定方法heightは要素の高さを指定します。指定方法にはいくつかの種類がありますが、使用頻度が高いのは以下の3つです。auto〜px〜%高さにautoを指定heightのデフォルト値で、heightプロパティに何も指定しない場合autoになります。auto(オート)は自動の意味で、この値が設定されている要素は、高さが自動的に要素の中身の高さになります。widthの場合はautoだと横幅いっぱいに広がりましたが、heightの場合は縦いっぱいには広がりません。要素の中身と同じだけの高さになります。要素の中身が大きかったり、子要素が多かったりすると、その分自動的に縦幅が伸びていきます。実際に見てみましょう。}親要素にheight:autoを指定しています。子要素は高さがそれぞれ50pxと60pxなので、親要素の高さ(赤い背景の領域)もそこまで伸びているのがわかります。高さをpxで指定する要素の高さをpxで指定することが出来ます。後述する「%」などとは違い、指定した値がそのまま高さの値となります。}高さをpxで指定した通りの大きさになっているのがわかります。注意点としては、親要素がautoの時は自動的に親要素の高さが伸びるので問題ありませんが、親要素の高さを指定している場合は小要素がはみ出す可能性があることです。小要素の方が大きい値が設定されていると、親要素よりはみ出して見栄えが悪くなるので気をつけましょう。}上記の例の場合、小要素のほうが高さの値が大きいためはみ出してしまっています。高さを%で指定する高さを%で指定すると、親要素の高さに対する割合になります。親要素の高さが500pxのとき、height:50%を指定すると250pxになります。height:10%なら50pxです。%での指定は、親要素に高さが指定されている必要があります。親要素の高さがautoの要素に「%」で高さを指定しても効果がありません。親要素の高さがautoの場合は、子要素の「%」の基準となる高さがないため、高さを割り出すことができないからです。オーソドックスなデザインのサイトであれば、高さに「%」を使うことはほとんどないので、頭の片隅に入れておく程度で問題ありません。まとめwidthは要素の横幅を指定するheigntは要素の高さを指定するdisplayの値がinlineの場合は、横幅や高さを指定することができないwidthは、auto、px、%などで指定するheigntは、auto、px、%などで指定するすずりデザイナー/フロントエンド/アフィリエイタープログラマーを経てWEBデザイナーになりました。現在は主にBtoCのサイトをデザイン・制作しつつ、情報発信についての知識を発信しています。【css】marginとpaddingの使い方や違いを解説html&CSS入門cssで要素に影をつける「box-shadow」の使い方解説html&CSS入門htmlとcssを使ってフォームを作ろう!html&CSS入門パンくずリストhtml&CSS入門すずりデザイナー/フロントエンド/アフィリエイタープログラマーを経てWEBデザイナーになりました。現在は主にBtoCのサイトをデザイン・制作しつつ、情報発信についての知識を発信しています。