CSSレイアウト 実践講座4 header、globalNavi要素

CL company

前回のエントリーで全体のレイアウト作りを行ったので、今回から細かい内面的のレイアウト作りをやっていきたいと思います。

今回からはサンプルに入っているcontents.cssに記述していきましょう。

…ここからが続き

header要素

/*----------------------- header Style-- */
#header ul	{
	text-align: right;
	margin-top: -18px;
}
#header ul li	{
	display: inline;
	margin-right: 0.5em;
}

これでサイトマップ|プライバシーポリシーを右下に配置します。

globalNavi要素

/*----------------------- globalNavi Style-- */
#globalNavi	{
	background: url(../images/globalnavi.jpg) no-repeat;
	width: 850px;
	height: 40px;
	/*for mac-ie5.x*/
	/*\*//*/
	overflow:hidden;
	/**/
}
#globalNavi a	{
	width: 170px;
	height: 40px;
	display: block;
	text-indent: -9999px;
	overflow: hidden;
}
#globalNavi li	{
	float: left;
}

ナビに画像を表示する為にtext-indentでテキストを画面外に指定。
liにfloat: left;で横並びします

それぞれのliにclassを指定します。

<ul id="globalNavi">
<li class="gnavi01"><a href="#header">ホーム</a></li>
<li class="gnavi02"><a href="#header">サービス</a></li>
<li class="gnavi03"><a href="#header">会社概要</a></li>
<li class="gnavi04"><a href="#header">アクセス</a></li>
<li class="gnavi05"><a href="#header">お問い合わせ</a></li>
<!--/ #globalNavi--></ul>

リンク時の画像を指定

/*----------------- Link-- */
.gnavi01 a	{
	background: url(../images/globalnavi.jpg) no-repeat 0px -40px;
}
.gnavi01 a:link,.gnavi01 a:visited	{
	background: url(../images/globalnavi.jpg) no-repeat 0px 0px;
}
.gnavi02 a	{
	background: url(../images/globalnavi.jpg) no-repeat -170px -40px;
}
.gnavi02 a:link,.gnavi02 a:visited	{
	background: url(../images/globalnavi.jpg) no-repeat -170px 0px;
}
.gnavi03 a	{
	background: url(../images/globalnavi.jpg) no-repeat -340px -40px;
}
.gnavi03 a:link,.gnavi03 a:visited	{
	background: url(../images/globalnavi.jpg) no-repeat -340px 0px;
}
.gnavi04 a	{
	background: url(../images/globalnavi.jpg) no-repeat -510px -40px;
}
.gnavi04 a:link,.gnavi04 a:visited	{
	background: url(../images/globalnavi.jpg) no-repeat -510px 0px;
}
.gnavi05 a	{
	background: url(../images/globalnavi.jpg) no-repeat -680px -40px;
}
.gnavi05 a:link,.gnavi05 a:visited	{
	background: url(../images/globalnavi.jpg) no-repeat -680px 0px;
}

次にhoverの時の画像を指定。

/*---------------------- hover-- */
.gnavi01 a:hover,.gnavi01 a:active	{
	background: url(../images/globalnavi.jpg) no-repeat 0px -40px;
}
.gnavi02 a:hover,.gnavi02 a:active	{
	background: url(../images/globalnavi.jpg) no-repeat -170px -40px;
}
.gnavi03 a:hover,.gnavi03 a:active	{
	background: url(../images/globalnavi.jpg) no-repeat -340px -40px;
}
.gnavi04 a:hover,.gnavi04 a:active	{
	background: url(../images/globalnavi.jpg) no-repeat -510px -40px;
}
.gnavi05 a:hover,.gnavi05 a:active	{
	background: url(../images/globalnavi.jpg) no-repeat -680px -40px;
}

以上の指定が終わったらこの様になります。

もしまだダウンロードがお済みでない方は

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article