CSSスキル - 第6章 Lesson1

タグの横幅と縦幅の指定方法

   

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

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

Webサイトのレイアウトを組むためには、まず横幅と縦幅の指定方法を学ぶ必要があります。
ここでは、タグに背景色を加えて可視化させたあと、CSSのwidthとheightプロパティを使って、タグの横幅と縦幅を任意に変更してみます。



この動画で学べること

・横幅と縦幅の指定方法



横幅と縦幅の指定方法

Webサイトのレイアウトを組むときには、ボックスの横幅を指定することが必要です。
横幅を指定するプロパティwidthと高さを指定するプロパティheight使って、まずはヘッダーの幅を指定していきましょう。
また、幅のサイズを確認するため、今だけ背景に色をつけておきましょう。




header {
width: 900px;
height: auto;
background-color: red;
}




一度、保存してブラウザで見てみましょう。
指定した横幅と高さが赤く塗りつぶされました。
heightにはautoと入力しているため、自動で高さが調整されています。



次にメイン画像の部分です。
ここではすでに横幅を縦幅が決まっているので、autoは使わずpxで設定をします。




div#main_img {
width: 900px;
height: 321px;
}




コンテンツ部分はヘッダーと同じく、縦の高さが変動するのautoに設定します。
また、background-color: yellow;と書いて、背景に色を指定しておきましょう。




div#container {
width: 900px;
height: auto;
background-color: yellow;
}




残りのサイドバー、フッター部分も書いていきます。




div#left_side {
width: 200px;
height: auto;
background-color: pink;
}

div#right_side {
width: 660px;
height: auto;
background-color: green;
}

footer {
width: 100%;
height: 60px;
background-color: gray;
}




ここまでできたら 、保存してブラウザで見てみましょう。
横幅と縦幅を指定して背景に色をつけることができました。