テンプレート－メニューパーツ

CSSで作ったホームページのパーツテンプレート

CSSレイアウト実践講座トップ > CSSテンプレート > メニューパーツ >

テンプレート－メニューパーツ

ウェブページを装飾するパーツのテンプレートです。2段組、3段組レイアウトのテンプレートと組み合わせて、ステキなサイトをお作りください。

なお、下のメニューテンプレートは、リンク部にマウスカーソルを合わせると背景色が変わります。

リンクのお願い
このパーツテンプレートをご利用の際は、必須ではありませんが当サイトへのリンクを貼っていただけるとありがたいです。よろしくお願いします！

メニュー部分のテンプレート

メニュー1 メニュー2 メニュー3 メニュー4 メニュー5

HTMLテンプレート

<div class="class_name">
<a href="file_1.html">メニュー1</a>
<a href="file_2.html">メニュー2</a>
<a href="file_3.html">メニュー3</a>
<a href="file_4.html">メニュー4</a>
<a href="file_5.html">メニュー5</a>
<br style="clear:left;">
</div>

CSSテンプレート

.class_name{
	width:450px;
	height:25px;
	line-height:25px;
	background:#efefef;
	border:solid 1px #333;
}

.class_name a,
.class_name a:link,
.class_name a:visited,
.class_name a:active{
	width:90px;
	height:25px;
	text-align:center;
	display:block;
	float:left;
}

.class_name a:hover{
	width:90px;
	height:25px;
	background:#333;
	color:#fff;
	text-align:center;
	display: block;
	float:left;
}

メニュー1 メニュー2 メニュー3 メニュー4 メニュー5

HTMLテンプレート

<div class="class_name">
<a href="file_1.html">メニュー1</a>
<a href="file_2.html">メニュー2</a>
<a href="file_3.html">メニュー3</a>
<a href="file_4.html">メニュー4</a>
<a href="file_5.html">メニュー5</a>
<br style="clear:left;">
</div>

CSSテンプレート

.class_name{
	width:450px;
	height:25px;
	line-height:25px;
	background:#fee;
	border:solid 1px #f33;
}

.class_name a,
.class_name a:link,
.class_name a:visited,
.class_name a:active{
	width:90px;
	height:25px;
	text-align:center;
	display:block;
	float:left;
}

.class_name a:hover{
	width:90px;
	height:25px;
	background:#f33;
	color:#fff;
	text-align:center;
	display: block;
	float:left;
}

メニュー1 メニュー2 メニュー3 メニュー4 メニュー5

HTMLテンプレート

<div class="class_name">
<a href="file_1.html">メニュー1</a>
<a href="file_2.html">メニュー2</a>
<a href="file_3.html">メニュー3</a>
<a href="file_4.html">メニュー4</a>
<a href="file_5.html">メニュー5</a>
<br style="clear:left;">
</div>

CSSテンプレート

.class_name{
	width:450px;
	height:25px;
	line-height:25px;
	background:#ffc;
	border:solid 1px #fc3;
}

.class_name a,
.class_name a:link,
.class_name a:visited,
.class_name a:active{
	width:90px;
	height:25px;
	text-align:center;
	display:block;
	float:left;
}

.class_name a:hover{
	width:90px;
	height:25px;
	background:#fc3;
	color:#fff;
	text-align:center;
	display: block;
	float:left;
}

メニュー1 メニュー2 メニュー3 メニュー4 メニュー5

HTMLテンプレート

<div class="class_name">
<a href="file_1.html">メニュー1</a>
<a href="file_2.html">メニュー2</a>
<a href="file_3.html">メニュー3</a>
<a href="file_4.html">メニュー4</a>
<a href="file_5.html">メニュー5</a>
<br style="clear:left;">
</div>

CSSテンプレート

.class_name{
	width:450px;
	height:25px;
	line-height:25px;
	background:#cef;
	border:solid 1px #36f;
}

.class_name a,
.class_name a:link,
.class_name a:visited,
.class_name a:active{
	width:90px;
	height:25px;
	text-align:center;
	display:block;
	float:left;
}

.class_name a:hover{
	width:90px;
	height:25px;
	background:#36f;
	color:#fff;
	text-align:center;
	display: block;
	float:left;
}

メニュー1 メニュー2 メニュー3 メニュー4 メニュー5

HTMLテンプレート

<div class="class_name">
<a href="file_1.html">メニュー1</a>
<a href="file_2.html">メニュー2</a>
<a href="file_3.html">メニュー3</a>
<a href="file_4.html">メニュー4</a>
<a href="file_5.html">メニュー5</a>
<br style="clear:left;">
</div>

CSSテンプレート

.class_name{
	width:450px;
	height:25px;
	line-height:25px;
	background:#cec;
	border:solid 1px #6c6;
}

.class_name a,
.class_name a:link,
.class_name a:visited,
.class_name a:active{
	width:90px;
	height:25px;
	text-align:center;
	display:block;
	float:left;
}

.class_name a:hover{
	width:90px;
	height:25px;
	background:#6c6;
	color:#fff;
	text-align:center;
	display: block;
	float:left;
}

CSSレイアウトテンプレート

SSIでらくらくホームページ更新術

CSSレイアウト実践講座トップ

テンプレート － メニューパーツ

CSSで作ったホームページのパーツテンプレート

テンプレート － メニューパーツ

CSSレイアウト テンプレート

テンプレート－メニューパーツ

テンプレート－メニューパーツ

CSSレイアウトテンプレート