ヘッダーとフッターの作成
#10 ヘッダーとフッターを作ろう
http://dotinstall.com/lessons/website_html/9010
を参考に
ウェブサイトのヘッダーとフッターの作成を学習
まずはヘッダーの作成
これは
<div id="header"></div>
のところに書く
ほとんどの場合 h1 で見出しをつける
今回は、画像を入れるので
<h1> <img src="dummy.png" height="100" width="600"></h1>
とする
フッター部分を作成するには
<div id="footer"></div>
へコードを追記する
これも、ほとんどの場合は copyright となるので
<div id="footer"> Copyright 2013 wp.developapp.net </div>
というように
Copyright とドメインやサイト名を書く
<div id="menu"></div>
ここはメニューをつくる部分
メニューの作り方はリスト形式なので
ul と li でメニューを作成
<ul> <li><a href="">ホーム</a></li> <li><a href="">製品情報</a></li> <li><a href="">企業情報</a></li> </ul>
aタグで囲んでおけば、それぞれのリンクになる
ここまでできたらCSSでレイアウトを変えていく
まず、body 部分で文字の標準の大きさを指定
font-size:14px;
次に
footer の文字サイズも変更するので
#footer{
font-size:12px;
}
とする
また、色を変えるため
color:#ccc;
として
文字を中央寄せにするために
text-align:center;
を指定
border-top:1px solid #ccc;
として線を引く
padding:10px 0 20px;
で余白設定