heightとwidthとは？ゼロから始めるHTML/CSS講座Vol09

ゼロから始めるHTML/CSS講座heightとwidth

表示領域(widthとheight)

表示領域は要素の内容を表示する領域で、縦幅と横幅があります。桃太郎のあらすじ（momotaro.html ） 対し、下記CSSファイルを新規作成し適用してください。

ファイル名：momortaro_display.css

html, body, h1, p, a {
    padding: 0px;
}

html {
    border: solid 3px #ff00ff;
}

body {
    border: dashed 3px #000000;
}

h1 {
    border: solid 3px #ff0000;
}

p {
    border: solid 3px #0000ff;
}

a {
    border: solid 3px #00ff00;
}

CSSの記述方法として、このように「,(カンマ)」で区切り指定することで、複数セレクタへ同じCSSを適用できます。

各要素の表示領域を見ると、a要素のみ明らかに小さいことが分かります。これについては別途解説を行い、今回はその他要素を例に、表示領域について説明します。

表示領域には横幅と縦幅が存在し、デフォルトではブラウザの横幅と文字の高さに合わせて変動します。

ブラウザの横幅を変更すると、各ボックスの表示領域も自動で変更になります。

横幅と縦幅はwidthプロパティとheightプロパティにより変更可能です。

まずはwidthプロパティでbody要素とh1要素の横幅を変更してみましょう。

html, body, h1, p, a {
    padding: 0px;
}

html {
    border: solid 3px #ff00ff;
}

body {
    border: dashed 3px #000000;
    width: 50%;
}

h1 {
    border: solid 3px #ff0000;
    width: 50%;
}

p {
    border: solid 3px #0000ff;
}

a {
    border: solid 3px #00ff00;
}

文字サイズと同様、%指定をした場合は親要素との相対比で横幅が決まります。body要素のwidthを50%と指定し、子要素であるh1要素に50%と個別に指定したため、h1要素はブラウザ横幅25%となっています。

次にheightプロパティでp要素の縦幅を変更してみましょう。

html, body, h1, p, a {
    padding: 0px;
}

html {
    border: solid 3px #ff00ff;
}

body {
    border: dashed 3px #000000;
    width: 50%;
}

h1 {
    border: solid 3px #ff0000;
    width: 50%;
}

p {
    border: solid 3px #0000ff;
    height: 150px;
}

a {
    border: solid 3px #00ff00;
}

NEXT LESSON 👉 autoの使い方

PREV LESSON 👉 marginとpadding