【初めてのホームページ制作】#07 マネして作ってみよう!(手順解説付き)

前回からの続きで、メニューの作成を行っていきたいと思います。

ここまでの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

手順001

メニューの作成

次はli要素にスタイルを指定していきましょう。

文字を真ん中に設定しよう

li要素同士の外側上下左右全ての余白をmarginで『0』にして、文字が真ん中に配置されるようにtext-alignを使用します。

■CSS

#menu li {
	   margin:0;
	   text-align:center;
	}

text-alignは文字の配置を行うプロパティです。
■text-align

説明
left テキストを左寄せにします。
right テキストを左寄せにします。
center テキストを中央揃えにします。
justify テキストを均等割付にします。

これでだいぶ近づきましたね。

手順002

手順002

次はspan要素にスタイルを指定していきましょう。

文字フォントを設定しよう

font-sizeで文字サイズを少し小さくし、colorで文字色の変更、font-familyで文字フォントの変更します。

■CSS

   #menu li span {
      font-size:13px;
      color:#fff;
      font-family:verdana;
   }

font-familyは文字のフォントを指定するプロパティで、5つのカテゴリーがあります。(※他にもまだあったような...)今回使っている『verdana』は、ゴシック系のフォントです。リンク先にカテゴリーごとに色々なフォントがあるので参考にしてください。
■font-family

説明
sans-serif ゴシック系のフォント
serif 明朝系のフォント
cursive 筆記体・草書体のフォント
fantasy 装飾的なフォント
monospace 等幅フォント
手順003

手順003

文字色が変わったくらいでそんなに変化はありませんね(笑)

マウスオーバー時の設定をしよう

次は、メニューのリンクボタンにマウスカーソルが乗ったときのカラーの変更をしましょう。

■CSS

   #menu li a:hover {
      opacity:0.8;
   }

『:hover』セレクタは、a要素のすぐ後ろについていますね。これは、a要素にマウスなどのカーソルが乗ったときスタイルを指定するためのセレクタです。そしてリンクなどを踏んだ時に『ここはリンクだよ!』ってことを伝えるために『opacity』を使います。『opacity』は、透明度を指定するプロパティです。今回は0.8くらいのちょい透明ぐらいでいいかと思います。

手順004

手順004

画像ではカーソルが表示されていませんが、実際にはカーソルがメニューのNewsの上にあります。

■opacity

説明
0.0~1.0 0.0(完全に透明)~1.0(完全に不透明)の範囲で指定する(初期値は1)

メニューの全体修正

メニューが正しく表示されているか確認してみると、2つのミスを見つけました。

  • 1つ目は、ちょっと見落としてだけなんですが、アイキャッチ画像とメニューの間に隙間が空いていること(背景色が見える)
  • もう1つは、ブラウザのウィンドウ画面の幅を小さくすると、メニューのレイアウトが崩れるということ
手順005

手順005

1つ目のアイキャッチ画像とメニューの間に隙間が空いている(背景色が見える)のは、#icatchの縦幅がアイキャッチ画像の縦幅より約7pxほど大きいからです。
img要素が300pxなのでそれに合わせてちゃんと指定されていないことが原因と思われます。下の画像のボックスを見てください。『307.273』と表示されていますね。

手順006

手順006

以下のCSSの3行目を#icatchに追加しましょう。
■CSS

#icatch{
		width: 780px;
		height: 300px;
	}

これで1つ目の問題は解決しました。

手順007

手順007

次は、メニューのレイアウトが崩れる問題を解決しましょう。こちらも単純に固定の横幅を指定しなかったことによるレイアウト崩れです。以下のCSSを追加しましょう。

■CSS

	#menu {
	    width: 780px;
	}

これでメニューが固定幅を保てるようになり、ウィンドウ幅の影響を受けずに済みました。

手順008

手順008

これでアイキャッチ画像とメニューの作成は完了しました。次は、コンテンツ部分を作成していきたいと思います。

【初めてのホームページ制作】#08 マネして作ってみよう!(手順解説付き)


自作WEBアプリ集


管理人があまりに暇人なため、しょうもないwebアプリを作ったりしてます。見てやってください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA