実践コーディングスキル - 第1章 Lesson5

第4回:横幅と縦幅を設定しよう(2)

   

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

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

cssのwidthプロパティとheightプロパティを使って、ボックスの縦幅と横幅を設定し、ウェブサイトレイアウトの基盤を作ります。



この動画で学べること

・ボックスに横幅と縦幅を指定する方法



ボックスに横幅と縦幅を指定しよう

前回ヘッダーの横幅、縦幅、背景色を設定したように、他のタグにも同じように設定していきたいと思います。
まずは、メイン画像部分です。



div#mainimage {
width: 960px;
height: 300px;
background-color: skyblue;
}



保存してブラウザで見てみましょう。
ピンクのボックスの下に水色のボックスを作ることができました。
同じようにサイドのバナー部分、お知らせ部分、フッター部分のボックスにも幅と背景色を設定していきます。



div#left {
width: 280px;
height: 300px;
background-color: gray;
}


div#right {
width: 650px;
height: 300px;
background-color: red;
}


footer {
width: 100%;
height: 79px;
background-color: blue;
}



保存してブラウザで見てみましょう。
指定した大きさのボックスができました。
指定大きさはすべて、Photoshopでデザインしたファイルをものさしツールで大きさを測っています。
このように自分で要素の大きさを調べる必要があることも、覚えておいてください。