ログイン
問題4

【height・width】要素の大きさを変える

HTMLの要素とは、開始タグと終了タグを用いて構成される全体のことを指していました。その要素自体の大きさを変更するために使用するCSSが「width」と「height」です。実践問題を通して学習を進めていきましょう!

アイコン画像

本のアイコンwidthとは

widthとは、要素の横幅を指定する際に使用するCSSのプロパティです。
前提として、全ての要素に指定できるかというと実はそうではありません。
widthやheightを指定できるのはブロックレベル要素に限り、インライン要素には効果がありません。
HTMLCSS初心者がよく躓きやすいポイントなので覚えておきましょう。

widthの値は、「200px」のように数値に単位をつけて指定します。
widthプロパティの初期値は、「auto(自動)」となっており、autoはブロックレベル要素の場合横幅いっぱいに設定され、インライン要素場合は、要素の中身(テキストなど)の長さとなります。

本のアイコンheightとは

heightとは、要素の高さを指定する際に使用するCSSのプロパティです。
heightもwidthと同じでブロックレベル要素に使用することができます。

CSSでは、要素の種類を指定することのできるdisplayプロパティというものがあり、このプロパティを使用することでブロックレベル要素をインライン要素にしたり、ブロックレベル要素とインライン要素の特性を併せ持ったインラインブロックの指定をすることもできます。

widthとheightの指定は、ブロックレベル要素かインラインブロック要素にしか適用されないことを覚えておきましょう。

CSSの問題に挑戦しよう!

以下の問題に挑戦し、実際に手を動かして学習していきましょう。
無事に問題が解けて理解できれば、CSSマスターへの道の第一歩となるでしょう。

問題4:【height・width】要素の大きさを変える

用意した要素で300pxの正方形を作ってみましょう。
色の指定がない場合は正方形が見えないので、色を付けて表示させてください。

エディターのアイコンあらかじめエディタに書くコード

                <div class="box"></div>
¥HTML¥
              

ブラウザのアイコン期待する画面

解答の見本画像

タグアイコン解答ソースコード

              .box {
  width: 300px;
  height: 300px;
  background: purple;
}
¥CSS¥
            

コメントのアイコン解説

要素の幅を変更するにはwidhtとheightを使用します。
今回のように縦幅が300pxに指定したい場合は、widthを使って300pxを指定します。
対して縦幅はheightを使って指定することができます。
ログインして解答を見る

コメントのアイコン補足

要素の幅を指定する際、「100%」などの%での指定ができます。
この100%はどういうことかというと、親要素を基準にした大きさのことを指しています。
例えば親要素のwidthが1000pxだった場合、子要素のwidthを70%とすると、子要素の横幅は700pxということになります。
1つ上の階層の親要素が基準になるので、このポイントをしっかり覚えておきましょう。
完了にする!
twitterのアイコン
活動記録をTweetする

LINE登録で、Web制作に役立つコンテンツ配信中‼

LINEの友達追加でお役立ち動画をGET!!
LINEの友達追加でお役立ち動画をGET!!