width: ★;

height: ★;

CSS 47p

ボックスの幅、高さを指定します。
どちらのプロパティもマイナス値を指定することはできません。
値は次の3つの中から選びます。

  • 実数値＋単位
    数値に単位をつけて幅、高さを指定します。
  • パーセント値
    widthプロパティは要素自身が持っているボックスの横幅に対する割合で幅を指定します。
    heightプロパティは要素が持っているボックスの高さに対する割合で高さを指定します。
    高さの指定がされていない時は「auto」を指定した場合と同じになります。
  • auto
    自動的に幅を指定します。img要素などの置換要素の場合は、その要素が本来持っている
    高さや幅が指定されます。
CSS
.sample1 {
width: 400px;
height: 50px;
background: #ff0000;
margin: auto;
padding: 5px;
}

.sample2 {
width: 70%;
height: 50%;
background: #0000ff;
margin: auto;
padding: 5px;
}

.sample3 {
width: auto;
height: auto;
background: #008000;
margin: auto;
padding: 5px;
}

 XHTML
<div class="sample1">
<p>
widthに400px、heightに50pxを指定しました。
<⁄p>
<⁄div>

<div class="sample2">
<p>
widthに70%、heightに50%を指定しました。
<⁄p>
<⁄div>

<div class="sample3">
<p>
widthとheightにautoを指定しました。
<⁄p>
<⁄div>

これらの違いを表したのがこちらになります。
ここをクリック！

トップに戻る