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



heightとwidthとは?ゼロから始めるHTML/CSS講座Vol09
目次
  1. ゼロから始めるHTML/CSS講座heightとwidth
  2. 表示領域(widthとheight)

ゼロから始める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;
}

hight-width1-639

hight-width2-639

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

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

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

momotaro-display-css2

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

横幅と縦幅は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;
}

hight-width3-639

momotaro-display-css2-output

文字サイズと同様、%指定をした場合は親要素との相対比で横幅が決まります。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;
}

hight-width4-639

momotaro-display4

NEXT LESSON 👉 autoの使い方

PREV LESSON 👉 marginとpadding

関連記事

CodeCampus編集部
この記事を書いた人
CodeCampus編集部
\ 無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp