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

Category
： CSS ビギナー向け

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(../image/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(../image/globalnavi.jpg) no-repeat 0px -40px;
}
.gnavi01 a:link,.gnavi01 a:visited	{
	background: url(../image/globalnavi.jpg) no-repeat 0px 0px;
}
.gnavi02 a	{
	background: url(../image/globalnavi.jpg) no-repeat -170px -40px;
}
.gnavi02 a:link,.gnavi02 a:visited	{
	background: url(../image/globalnavi.jpg) no-repeat -170px 0px;
}
.gnavi03 a	{
	background: url(../image/globalnavi.jpg) no-repeat -340px -40px;
}
.gnavi03 a:link,.gnavi03 a:visited	{
	background: url(../image/globalnavi.jpg) no-repeat -340px 0px;
}
.gnavi04 a	{
	background: url(../image/globalnavi.jpg) no-repeat -510px -40px;
}
.gnavi04 a:link,.gnavi04 a:visited	{
	background: url(../image/globalnavi.jpg) no-repeat -510px 0px;
}
.gnavi05 a	{
	background: url(../image/globalnavi.jpg) no-repeat -680px -40px;
}
.gnavi05 a:link,.gnavi05 a:visited	{
	background: url(../image/globalnavi.jpg) no-repeat -680px 0px;
}

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

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

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