実践コーディングスキル - 第3章 Lesson3

第3回:ヘッダーのレイアウトを作ってみよう

   

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

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

ヘッダーのレイアウトを組むために、<header>タグを使ってマークアップし、CSSのwidthやheightを使ってheaderのボックスを作成します。



この動画で学べること

・ヘッダーのレイアウトを組む方法



ヘッダーのレイアウトを組む方法

サイトのレイアウトを組んでいきましょう。
まずは、ヘッダー部分のボックスの作成をします。
レイアウトを組む際は、目に見える部分なので、<body>タグの中に書いていきます。
<header>タグが書けたら、コメントアウトをしてどこからどこまでがヘッダーかわかるようにしましょう。



<!--  ヘッダーここから -->
<header>
</header>
<!-- ヘッダーここまで -->



HTMLが書けたら、Photoshopで調べた大きさをCSSに書いていきましょう。
また、ボックスの大きさをわかりやすくするために背景色も指定しておきましょう。



header {
width: 960px;
height: 89px;
background-color: red;
}



保存してブラウザで見てみましょう。
赤くなった部分が指定したボックスの大きさとなっています。
よく見ると、ボックスの周りに指定していない余白ができていますね。
これは初期状態でブラウザが読み込むCSSが適応されているからです。
この状態では、思ったようにコーディングができないので、次回リセットCSSというものをかけて、余分なスタイルを消していきたいと思います。