前回からの続きで、メニューの作成を行っていきたいと思います。
ここまでのHTML,CSSコードと現在の表示状態を記載しておきます。自身のコードに足りないものがあれば追加しておいてくださいね。
現時点までのコード
■HTML
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> </style> </head> <body> <div id="header"> <p>カフェ ゆるらぎは東京都XX区にあるランチとスイーツがおいしいお店です。</p> <img src="images/logo.gif" alt="カフェ ゆるらぎ" /> <div id="gnavi"> <ul> <li><a href="#">サイトマップ</a></li> <li><a href="#">お問い合わせ</a></li> </ul> </div> </div> <div id="icatch"> <img src="images/sample1.jpg"width="100%" height="300px" alt="" /> </div> <div id="menu"> <ul> <li><a href="#"><span>Home</span><br />ホーム</a></li> <li><a href="#"><span>Lunch</span><br />ランチ</a></li> <li><a href="#"><span>Dessert</span><br />デザート</a></li> <li><a href="#"><span>News</span><br />最新情報</a></li> <li><a href="#"><span>Staff</span><br />スタッフ紹介</a></li> <li><a href="#"><span>Access</span><br />アクセス</a></li> </ul> </div> </body> </html>
■CSS
li{
list-style: none;
float: left;
font-size: 12px;
margin-left: 15px;
}
a{
color:#98534B;
text-decoration: none;
background-image: url(images/bg_gnavi.gif);
background-repeat: no-repeat;
background-position: 0%;
padding-left: 15px;
}
#gnavi{
position: absolute;
bottom: 5px;
right: 0;
}
#header{
position: relative;
width: 780px;
}
#icatch{
width: 780px;
}
#top{
width: 780px;
}
/* ========MENU CUSTOMIZE======== */
#menu ul {
float:left;
margin:0;
padding:0;
}
#menu li a {
display:block;
width:130px;
padding:10px 0;
color:#FFF1A4;
background-image:url(images/bg_menu.gif);
}
手順001
メニューの作成
次はli要素にスタイルを指定していきましょう。
文字を真ん中に設定しよう
li要素同士の外側上下左右全ての余白をmarginで『0』にして、文字が真ん中に配置されるようにtext-alignを使用します。
■CSS
#menu li {
margin:0;
text-align:center;
}
text-alignは文字の配置を行うプロパティです。
■text-align
| 値 | 説明 |
|---|---|
| left | テキストを左寄せにします。 |
| right | テキストを左寄せにします。 |
| center | テキストを中央揃えにします。 |
| justify | テキストを均等割付にします。 |
これでだいぶ近づきましたね。
手順002
次はspan要素にスタイルを指定していきましょう。
文字フォントを設定しよう
font-sizeで文字サイズを少し小さくし、colorで文字色の変更、font-familyで文字フォントの変更します。
■CSS
#menu li span {
font-size:13px;
color:#fff;
font-family:verdana;
}
font-familyは文字のフォントを指定するプロパティで、５つのカテゴリーがあります。(※他にもまだあったような．．．)今回使っている『verdana』は、ゴシック系のフォントです。リンク先にカテゴリーごとに色々なフォントがあるので参考にしてください。
■font-family
| 値 | 説明 |
|---|---|
| sans-serif | ゴシック系のフォント |
| serif | 明朝系のフォント |
| cursive | 筆記体・草書体のフォント |
| fantasy | 装飾的なフォント |
| monospace | 等幅フォント |
手順003
文字色が変わったくらいでそんなに変化はありませんね（笑）
マウスオーバー時の設定をしよう
次は、メニューのリンクボタンにマウスカーソルが乗ったときのカラーの変更をしましょう。
■CSS
#menu li a:hover {
opacity:0.8;
}
『:hover』セレクタは、a要素のすぐ後ろについていますね。これは、a要素にマウスなどのカーソルが乗ったときスタイルを指定するためのセレクタです。そしてリンクなどを踏んだ時に『ここはリンクだよ！』ってことを伝えるために『opacity』を使います。『opacity』は、透明度を指定するプロパティです。今回は0.8くらいのちょい透明ぐらいでいいかと思います。
手順004
画像ではカーソルが表示されていませんが、実際にはカーソルがメニューのNewsの上にあります。
■opacity
| 値 | 説明 |
|---|---|
| 0.0~1.0 | 0.0（完全に透明）～1.0（完全に不透明）の範囲で指定する（初期値は1） |
メニューの全体修正
メニューが正しく表示されているか確認してみると、２つのミスを見つけました。
- １つ目は、ちょっと見落としてだけなんですが、アイキャッチ画像とメニューの間に隙間が空いていること(背景色が見える)
- もう１つは、ブラウザのウィンドウ画面の幅を小さくすると、メニューのレイアウトが崩れるということ
手順005
１つ目のアイキャッチ画像とメニューの間に隙間が空いている(背景色が見える)のは、#icatchの縦幅がアイキャッチ画像の縦幅より約7pxほど大きいからです。
img要素が300pxなのでそれに合わせてちゃんと指定されていないことが原因と思われます。下の画像のボックスを見てください。『307.273』と表示されていますね。
手順006
以下のCSSの３行目を#icatchに追加しましょう。
■CSS
#icatch{
width: 780px;
height: 300px;
}
これで１つ目の問題は解決しました。
手順007
次は、メニューのレイアウトが崩れる問題を解決しましょう。こちらも単純に固定の横幅を指定しなかったことによるレイアウト崩れです。以下のCSSを追加しましょう。
■CSS
#menu {
width: 780px;
}
これでメニューが固定幅を保てるようになり、ウィンドウ幅の影響を受けずに済みました。
手順008
これでアイキャッチ画像とメニューの作成は完了しました。次は、コンテンツ部分を作成していきたいと思います。
コメントを残す