ヘッダー部の中を作って行く
前回スケッチをした後に各部、ヘッダー、コンテンツ、フッターの3つのブロックに分けました。
1. ヘッダー部を分析
自分の作ったナビゲーションバーをみてみると、左にロゴ、真ん中にメニューリンク、右側にsocialアイコンがあります。
こんな感じで3つのブロックにわけ、そのブロック毎にデーターを作っていきます。
logo, nav, socialなどそれぞれのブロックに名前をつけます。
<header>
<div class="logo"></div>
<div id="nav"></div>
<div class="social"></div>
</header>まだ内容を入れていませんが、空白のままだと領域がわかりにくいので前回のように背景色をつけて作業するとよりわかりやすくて良いと思います。色を指定する際は色の名前でも構いませんが、レパートリーが少ないのでweb colorのサイトを利用します。
ロゴとメディアの場所にはclassを使い、名前の前に . をつけて指示を書き始めます。
ナビゲーションの場所にはidを使って名前をつけました。idの名前をCSSで指定する際は＃を使用します。
2. 画像を入力
まずはロゴの部分の画像の入力方法です。
<header>
<div class="logo">
<img src="img/logo.jpg" alt="logo image">
</div>
<div id="nav"></div>
<div class="social"></div>
</header>logoと名前のついたブロックの中にイメージ画像を書き込みます。このように入れ子にして情報を書き込んでいきます。
3. ナビゲーションリストを作る
リストには二つ書き方があります。一つはul（unordered list) そしてもう一つはol(ordered list)です。
ナビゲーションでは数字は必要がないので今回はul（unordered list)を使ってリストを書いていきます。
<ul>
<li>リンク</li>
<li>リンク</li>
<li>リンク</li> リンクの内容はそれぞれ<li>の中に書き込みます。
<li>リンク</li>
</ul>上で作った<ul>で囲まれたリンク一式を<div id="nav"></div>の中へ入れます。
<header>
<div class="logo">
<img src="img/logo.jpg" alt="logo image">
</div>
<div id="nav">
<ul>
<li>ホーム</li>
<li>リンク</li>
<li>リンク</li>
<li>リンク</li>
</ul>
</div>
<div class="social"></div>
</header>4. メディア情報をいれる
まずは自分の好きな形でアイコンを用意します。
僕はこの丸いアイコンを使います。
これは先ほどと同じようにイメージを入力する時と同じでimgを使用します。
<header>
<div class="logo">
<img src="img/logo.jpg" alt="logo image">
</div>
<div id="nav">
<ul>
<li>ホーム</li>
<li>リンク</li>
<li>リンク</li>
<li>リンク</li>
</ul>
</div>
<div class="social">
<img src="img/Twitter-icon.png" alt="twitter icon">
<img src="img/facebook-icon.png" alt="facebook icon">
</div>
</header>ここまで入力したらサイトを確認してみましょう。
はい、明らかに想像していたものとは遥かに違っています。
実は、データー状の中ではこんな感じになっています。
このようにそれぞれ作ったエリアのブロックの横幅がデフォルトの100％になっています。
これではスケッチとい同じようなデザインにはなってくれません。
5. デザインをCSSで指定する
では、こんな感じで合計が100％になるような感じでそれぞれの横幅をCSSで指定します。
.logo{
width: 15%;
}
#nav{
width: 65%;
}
.social{
width: 20%;
}
やっぱりダメです。でも諦めちゃダメです。理由が必ずあるのですから。
実はそれぞれのデータは横幅だけ小さくなっただけなのです。
これを解消するためにheaderの内容にもう少し手を加えます。背景はもう必要がないので削除してしまいます。
header{
height:150px;
clear: both;
}このclearと言う指定は回り込みの解除をする時に使用します。
そして、それぞれのパーツに「左寄せにして回り込みをする」と言う感じでこのタグをそれぞれ、logo、nav, socialのCSSの中で指定します。
.logo{
width: 15%;
float: left;
}
#nav{
width: 65%;
float: left;
}
.social{
width: 20%;
float: left;
}
やった！横並びになってくれました。でも、待ってください。
このリンクちょっと違うんです。まず・（ブレット）を取りたいです。そして縦並びになっているものを横並びにしたいです。
まずは・（ブレット）から
ul{
list-style: none;
}次にリストを横並びにします。
li{
display: inline;
}
かなり理想に近いてきました。次にロゴとメディアの画像の大きさをもう少し小さくしていきます。ここで大事なのはどこの画像のことを言っているのかわかりやすくCSSに書き込んでいきます。
.logo img{
width: 35%;
}
.social{
width: 20%;
float: left;
}次にリストの細かいデザインを作っていきます。
①フォントをsan-serifの角ばったフォントへ変えます
②次にリスト同士の間が狭いのでスペースをつくります
③ナヴィゲーション全体を真ん中に揃えるようにする。
#nav ul{
list-style: none;
text-align: center; ←③
margin-left: auto; ←③
margin-right: auto; ←③
}
#nav ul li{
display: inline;
font-family: sans-serif; ←①
padding-left:5%; ←②
}
大体こんな感じに表示されているでしょうか？
ここからやや気になる細かいところを修正します。
ますは、ロゴが画面に近すぎるのでmarginを使ってスペースを調節します。
marginの詳しい説明をみてみたい方はこちらの「marginとpadding」のレッスンも合わせて覗いてみてください。
.logo img{
width: 35%;
margin-left: 5%;
}次にsocialアイコンは右寄せにし、アイコン同士のスペースを作ります。
.social{
width: 20%;
float: left;
text-align: right; ←アイコンを右寄せに
}
.social img{
width: 20%;
margin-right: 4%; ←アイコン同士のスペース
}
あくまでも数字は目安ですので自分のサイトにあった大きさや幅で作ってみてください。
さてここまできたらあとはリンクをつけていきましょう。
6. リンクを貼る
まずはロゴから、ロゴは通常サイトのトップページに戻るように設定します。
サイトのリンクにはアンカータグのエイチレフを使います。名前はトップページであるindex.htmlを指定します。外部リンクの場合はhttp://wwwっと行った感じでアドレスを打ち込みます。
では、まずはロゴへ書き込んでいきます。
<a href="index.html">
<img src="img/logo.jpg" alt="logo image"> ←クリックさせたい文字または画像を真ん中に入れます。
</a>ナビゲーションリンクでも同じようにアンカータグのエイチレフを使いますが今回は文字にリンクを貼ります。
<ul>
<li>
<a href="index.html">ホーム</a>
</li>
<li>リンク</li>
<li>リンク</li>
<li>リンク</li>
</ul>同様にsocialアイコンにもリンクをつけます。
<a href="https://www.facebook.com/73fstudio">
<img src="img/Twitter-icon.png" alt="twitter icon">
</a>ここまでできたら今回の課題のheader部分は完了です。
次はサイトのコンテンツの部分を作っていこうと思います。
