CSSスキル - 第4章 Lesson3

横幅と縦幅の指定するCSSのかけ方

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

横幅と縦幅を指定するwidthとheightプロパティについて、初心者向けに解説しています。



この動画で学べること

・要素に横幅や縦幅を指定するプロパティ



要素に横幅や縦幅を指定するプロパティ

要素に横幅や縦幅を指定するプロパティにいついて学んでいきましょう。

・width(横幅の指定)
・height(縦幅の指定)



ヘッダーに、widthとheightを指定して、どのように表示されるか見てみましょう。
横幅いっぱいにボックスを表示させたいので、width を100%にします。



header {
width: 100%;
height: 100%;
baclgroun-color: white:
}



一度保存してブラウザで見てみましょう。
横幅が画面いっぱいになりましたが、縦は、headerに指定しているので、画面いっぱいの縦幅ではなく、headerいっぱいの縦幅になっています。
次は、<header>ではなく<h1>タグに先ほどのCSSをを適応し、<header>には別のCSSををかけてみましょう。




header {
width: 600px;
height: 300px;
}


h1 {
width: 100%;
height: 100%;
baclgroun-color: white:
text-align: center;
}




保存してブラウザで見てみましょう。
ボックスが、先ほどヘッダーで指定した横幅600px、縦幅300pxになりました。
つまり、パーセンテージで指定した大きさは、親要素の横幅と縦幅から見たパーセンテージに自動で調節されるということです。
また、ボックスの中の要素の大きさに合わせて自動で幅を決めてくれるのが、autoという値です。
一度やってみましょう。




div#design {
width: 500px;
height: auto;
background-color: #ccc;
}



 heightにautoを指定した場合、文字の量によって<div>タグの縦幅を自動で調節してくれるのでとても便利です。