1. TOP
  2. html&CSS入門
  3. CSSでwidth(横幅)とheight(高さ)を設定しよう!効かない場合の対処法も解説

CSSでwidth(横幅)とheight(高さ)を設定しよう!効かない場合の対処法も解説

widthheightはそれぞれ、要素の横幅と高さを指定するプロパティです。

基本的にこのプロパティを組み合わせてレイアウトを整えていくことになります。とても使用頻度が高いプロパティとなるので、しっかりと理解しておきましょう。

widthとheight

  • width(ウィドゥス / ウィズ)
    要素の横幅を指定する
  • heignt(ハイト)
    要素の高さを指定する

簡単な例を見てみましょう。

 <p id="demo_37">横幅・高さを設定してみよう</p>
#demo_37{
   width: 200px;
   height: 100px;
   background-color: green;
   color: #fff;
 }

横幅・高さを設定してみよう

要素が指定した通りの横幅・高さになっているのがわかります。

width、heightが効かないときは

本題に入る前に、widthやheightが効かない場合に見直すべき点を紹介します。

widthやheightが効かない場合、スペル間違いでなければ、displayの値がinlineになっていることが原因であることがほとんどです。

横幅や高さを変えたい場合は、displayの値をblockやinline-blockに変更すれば、効くようになります

displayの値がinlineの場合は、横幅や高さを指定することができない

cssの仕様上、displayの値がinlineの場合は、横幅や高さを指定することができません。横幅や高さは要素の中身によって自動的に決められるからです。

そのため、aタグやspanタグのような、displayのデフォルト値がinlineのタグは、初期状態のままではwidthやheightを設定できないので覚えておきましょう。

<a href="" id="demo_38-1">デフォルトのaタグ</a>
<a href="" id="demo_38-2">displayを変えたaタグ</a>
#demo_38-1{
   height: 30px;
   width: 200x;
   background-color: red;
}

#demo_38-2{
   height: 30px;
   width: 300px;
   display: inline-block;
   background-color: red;
}

1つ目のaタグはdisplayを変えてないので、widthもheightも効いていません。2つ目はdisplay: inline-block;としているので、widthとheightが効いているのがわかります。

参考

インライン、ブロックなどのdisplayの値については下記の記事を参考にしてください。

widthの指定方法

widthは要素の横幅を指定します。横幅とは要素の横方向の長さのことです。

指定方法にはいくつかの種類がありますが、使用頻度が高いのは以下の3つです。

  • auto
  • 〜px
  • 〜%

 横幅にautoを指定

widthのデフォルト値であり、widthプロパティに何も指定しない場合もこの値になります。

auto(オート)は自動の意味で、この値が設定されている要素は横幅いっぱいまで伸びるようになります。ただし親要素の横幅を超えることはありません

autoがどのような横幅になるのか実際に見てみましょう。

 <p class="demo_39-2">親要素で横幅指定なし </p>
 <div class="demo_39-1">
     <p class="demo_39-2">親要素で横幅指定あり </p>
 </div>
.demo_39-1{
  width: 300px;
 } 
.demo_39-2{
   background-color: green;
   color: #fff;
   width: auto;
 }

親要素で横幅指定なし

親要素で横幅指定あり

1つ目のpタグは横幅いっぱいに伸びていますね。一方、2つ目のpタグは親要素のdivに横幅が設定されているため、親要素の横幅を超えることが出来ないので、「pタグの横幅=親要素の横幅」になっています。

autoはデフォルト値のため書かなくてもよいのですが、わかりやすくするためにあえて書いています。

横幅をpxで指定

要素の横幅をpxで指定することが出来ます。後述する「%」などとは違い、指定した値がそのまま横幅の値となります。

簡単な例を見てみましょう

<div class="demo_40-1">
   <div class="demo_40-2"></div>
 </div>
 
 .demo_40-1{
   background-color: green;
   width: 500px;
   height: 100px;
 }
 .demo_40-2{
   background-color: red;
   width: 50px;
   height: 50px;
 }

ボックスの中にボックスを入れて、それぞれに横幅・高さを指定しました。このようにpxを使えば、自分の好きな大きさに設定することが出来ます。

ただし、親要素より大きい横幅をpxで指定するとはみ出してしまうので注意しましょう。

<div class="demo_41-1">
   <div class="demo_41-2"></div>
 </div>
.demo_41-1{
   background-color: green;
   width: 300px;
   height: 100px;
   padding: 5px;
 }
 .demo_41-2{
   background-color: red;
   width: 400px;
   height: 50px;
 }

子要素の赤いボックスが親要素からはみ出しているのがわかります。autoと違って簡単にはみ出してしまうので気をつけて設定しましょう。

横幅を%で指定

%で指定した場合は、親要素の横幅に対する割合になります。例えば親要素が500pxのとき、width:50%を指定すると250pxになります。width:10%なら50pxです。

例を見てみましょう。

<div class="demo_42-1">
   <div class="demo_42-2"></div>
   <div class="demo_42-3"></div>
 </div>
 .demo_42-1{
   background-color: green;
   width: 500px;
 }
 .demo_42-2{
   background-color: red;
   width: 50%;
   height: 50px;
 }
 .demo_42-3{
   background-color: blue;
   width: 10%;
   height: 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の横幅ということになるので、子要素もブラウザの横幅いっぱいに広がることになります

%を使ったテクニック

%をうまく使うと、三等分や四等分といったコンテンツを簡単に実現できます。

<div class="demo_43-1">
   <div class="demo_43-2"></div>
   <div class="demo_43-3"></div>
   <div class="demo_43-4"></div>
   <div class="demo_43-5"></div>
 </div>
 /* 親要素 */
 .demo_43-1{
   background-color: whitesmoke;
   font-size: 0;
   letter-spacing:0;
 }
 /* 子要素 */
 .demo_43-1 div{
   width: 25%;
   height: 100px;
   display: inline-block;
 }
 .demo_43-2{
   background-color: darkcyan;
 }
 .demo_43-3{
   background-color: peru;
 }
 .demo_43-4{
   background-color: crimson;
 }
 .demo_43-5{
   background-color: sienna;
 }

上の例では小要素にwidth: 25%;を指定することで4分割にしています。
25%の部分を50%にすれば2分割に、33%に変えれば3分割になります。

50%の例

<div class="demo_44-1">
   <div class="demo_44-2"></div>
   <div class="demo_44-3"></div>
   <div class="demo_44-4"></div>
   <div class="demo_44-5"></div>
 </div>
 /* 親要素 */
 .demo_44-1{
   background-color: whitesmoke;
   font-size: 0;
   letter-spacing:0;
 }
 /* 子要素 */
 .demo_44-1 div{
   width: 50%;
   height: 100px;
   display: inline-block;
 }
 .demo_44-2{
   background-color: darkcyan;
 }
 .demo_44-3{
   background-color: peru;
 }
 .demo_44-4{
   background-color: crimson;
 }
 .demo_44-5{
   background-color: sienna;
 }

親要素の2分割になったのがわかると思います。

親要素に指定しているfont-size: 0;letter-spacing:0;は、divタグやliタグをinline-blockで並べると、間に隙間が入りくずれてしまうので、それを防ぐためのテクニックです。

heightの指定方法

heightは要素の高さを指定します。指定方法にはいくつかの種類がありますが、使用頻度が高いのは以下の3つです。

  • auto
  • 〜px
  • 〜%

高さにautoを指定

heightのデフォルト値で、heightプロパティに何も指定しない場合autoになります。

auto(オート)は自動の意味で、この値が設定されている要素は、高さが自動的に要素の中身の高さになります

widthの場合はautoだと横幅いっぱいに広がりましたが、heightの場合は縦いっぱいには広がりません。要素の中身と同じだけの高さになります。

要素の中身が大きかったり、子要素が多かったりすると、その分自動的に縦幅が伸びていきます。

実際に見てみましょう。

 <div class="demo_45-1">
   <div class="demo_45-2"></div>
   <div class="demo_45-3"></div>
 </div>
 .demo_45-1{
   height: auto;
   background-color: red;
 }
 .demo_45-2{
   height: 50px;
   width: 100px;
   background-color: crimson;
 }
 .demo_45-3{
   height: 60px;
   width: 100px;
   background-color: sienna;
 }
 

親要素にheight:autoを指定しています。子要素は高さがそれぞれ50pxと60pxなので、親要素の高さ(赤い背景の領域)もそこまで伸びているのがわかります。

高さをpxで指定する

要素の高さをpxで指定することが出来ます。後述する「%」などとは違い、指定した値がそのまま高さの値となります。

簡単な例を見てみましょう

 <div class="demo_46-1">
   <div class="demo_46-2"></div>
 </div>
.demo_46-1{
    height: 60px;
    width: 60px;
    background-color: sienna;
 }

高さをpxで指定した通りの大きさになっているのがわかります。

注意点としては、親要素がautoの時は自動的に親要素の高さが伸びるので問題ありませんが、親要素の高さを指定している場合は小要素がはみ出す可能性があることです。小要素の方が大きい値が設定されていると、親要素よりはみ出して見栄えが悪くなるので気をつけましょう

 <div class="demo_47-1">
   <div class="demo_47-2"></div>
 </div>
.demo_47-1{
    height: 50px;
    background-color: darkcyan;
 }
 .demo_47-2{
    height: 70px;
    width: 60px;
    background-color: sienna;
 }

上記の例の場合、小要素のほうが高さの値が大きいためはみ出してしまっています。

高さを%で指定する

高さを%で指定すると、親要素の高さに対する割合になります。例えば親要素の高さが500pxのとき、height:50%を指定すると250pxになります。height:10%なら50pxです。

%での指定は、親要素に高さが指定されている必要があります。

例えば親要素の高さがautoの要素に「%」で高さを指定しても効果がありません。なぜなら、親要素の高さがautoの場合は、子要素の「%」の基準となる高さがないため、高さを割り出すことができないからです。

オーソドックスなデザインのサイトであれば、高さに「%」を使うことはほとんどないので、頭の片隅に入れておく程度で問題ありません。

まとめ

  • widthは要素の横幅を指定する
  • heigntは要素の高さを指定する
  • displayの値がinlineの場合は、横幅や高さを指定することができない
  • widthは、auto、px、%などで指定する
  • heigntは、auto、px、%などで指定する