店舗：トップページ

コンテンツの作成（２）

左肩のメニュー部分を作ってみましょう。

メニュー部分のタグ

leftmenu（ID）で準備した<div>タグ内に、お知らせ、メニュー、リンクの３つのパートを入れます。

お知らせは、近況を簡単に記述したもの。
メニューは、サイト内の各ページへのリンクで、サイト全体の構成もこれで判るようにします。
リンクは、関連するHPへのリンクを提供します。

<div id="leftmenu">
	<div class="menutitle">お知らせ</div>
	<p>4/5　新商品発売<br>
	4/1　○○○<br>
	3/25　○○○</p>

	<div class="menutitle">メニュー</div>
	<div><a href="p1.html" class="menulink">店舗紹介</a></div>
	<div><a href="p2.html" class="menulink">案内地図</a></div>
	<div><a href="p3.html" class="menulink">商品カタログ</a></div>
	<div><a href="p4.html" class="menulink">社長の部屋</a></div>
	<div><a href="p5.html" class="menulink">職人の工房</a></div>
	<div><a href="p6.html" class="menulink">地域の名所</a></div>

	<div class="menutitle">リンク</div>
	<p>●●市役所<br>
	●●商工会<br>
	●●観光協会</p>
</div>

３つの<div>を追加し、３つのパートのタイトルにします。「menutitle」という同じクラス名を付けておきます。
タイトルの下には<p>タグで内容を書いていますが、メニュー部分だけは全て<div>で構成して、リンクを入れています。

メニュー部分のCSS

新たに２つのクラスが増えました。
leftmenu（ID）と、追加のクラスをCSSに記述します。
リンク部分には、マウスに対応したクラスも追記しています。
最後に<p>タグを調節しています。

#leftmenu {
	width: 200px;
	float: left;
	border: 5px solid #993300;
	background-color: #FFFFCC;
	background-image: url(img/bg_sakura01.gif);
	position: fixed;
}
.menutitle {
	background-color: #993300;
	text-align: center;
	color: #FFFFFF;
	font-size: 14px;
	font-weight: bold;
	padding: 5px;
}
.menulink {
	padding: 5px;
	display: block;
	text-decoration: none;
	font-size: 18px;
	font-weight: bold;
	color: #FF9900;
	background-color: #996600;
	border-style: groove;
}
.menulink:hover {
	background-color: #FFCC66;
}
p {
	padding: 5px;
}

#leftmenu

左肩のメニュー部に適用されます。
背景には色と画像を設定していますが、画像がある場合は画像が優先して表示されます。
「position: fixed;」を設定すると、画面をスクロールしてもメニューは画面の定位置に固定され動かなくなります。そのため、それ以降の要素とは干渉しなくなるため、フッタ部分は上に寄せられて裏に隠れます。メニューが長くて画面に収まらない場合はこれを削除します。フッタ部分もこのメニューの下に表示されます。

.menulink:hover

「hover」はマウスを重ねて置いたときに適用されるスタイルを表しています。（疑似クラス）
標準の状態はmenulink（クラス）で定義されていますので、変化する部分だけを記述します。

戻る