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

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

   

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

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

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



この動画で学べること

・横幅と縦幅を指定する方法



横幅と縦幅を指定していこう

前回作成したボックスに対して、横幅と縦幅をCSSで指定していきましょう。
まずは、<header>に横幅と縦幅を記述し、わかりやすいように背景色を設定しましょう。




header {
width: 960px;
background-color: pink;
}



保存してブラウザで見てみましょう。
表示が全く変わりません。
これは、CSSをHTMLファイルに読み込ませるタグを書いていないからです。
CSSを書くためには、まずこの読み込ませるタグが必要なので、HTMLファイルに移って<head>の中にこのように記述しましょう。



<link href="style.css" type="text/css" media="screen">



ではもう一度保存してブラウザで見てみます。
先ほど書いたheaderの部分のCSSが読み込まれ、背景がピンク色になりました。