スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
スポンサーサイト/--/--/-- --:--/スポンサー広告/ トラックバック(-)/コメント(-)

CSSを使ったタブメニュー

よくトップページなどに使われているタブメニューをcssだけで作ってみました。
この例ではHPを4ページ作ってそれぞれリンクを貼りました。
cssで.box .box2それぞれを float:left; で横並びにし
.box2の下線をなくしてそれぞれのページのメニューのリンクに当てます。
DEMO



続きはそれぞれのページです
1ページ

<html>
<head>
<style>
#main {
width: 336px;
height: 300px;
border : 1px solid #ccc;
}
.box {
width: 80px;
height: 30px;
float :left;
border : 1px solid #000;
background-color : #ccc;
margin-right:1px;
margin-left:1px;
}
.box a {
display:block;
color:#000000;
font-size : 13px;
/*text-decoration:none;*/
text-align : center;
font-weight: bold;
font-size : 16px;
padding-bottom: 7px;
padding-top: 7px;
}
.box2 {
width: 80px;
height: 30px;
float :left;
border-top : 1px solid #ccc;
border-left : 1px solid #ccc;
border-right : 1px solid #ccc;
border-bottom : 0px solid #ccc;
margin-right:1px;
margin-left:1px;
}
.box2 a { display:block;
padding-bottom: 7px;
padding-top: 7px;
text-align : center;
color:red;
font-weight: bold;
}
</style>
</head>
<body>
<div id="main">
<div class="box2"><a href="tabutest1.html">1</a></div><div class="box"><a href="tabutest2.html">2</a></div><div class="box"><a href="tabutest3.html">3</a></div><div class="box"><a href="tabutest4.html">4</a></div>
<br clear=left>
<h1>1page</h1>
</div>
</body>
</html>


2ページ

<html>
<head>
<style>
#main {
width: 336px;
height: 300px;
border : 1px solid #ccc;
}
.box {
width: 80px;
height: 30px;
float :left;
border : 1px solid #000;
background-color : #ccc;
margin-right:1px;
margin-left:1px;
}
.box a {
display:block;
color:#000000;
font-size : 13px;
/*text-decoration:none;*/
text-align : center;
font-weight: bold;
font-size : 16px;
padding-bottom: 7px;
padding-top: 7px;
}
.box2 {
width: 80px;
height: 30px;
float :left;
border-top : 1px solid #ccc;
border-left : 1px solid #ccc;
border-right : 1px solid #ccc;
border-bottom : 0px solid #ccc;
margin-right:1px;
margin-left:1px;
}
.box2 a { display:block;
padding-bottom: 7px;
padding-top: 7px;
text-align : center;
color:red;
font-weight: bold;
}
</style>
</head>
<body>
<div id="main">
<div class="box"><a href="tabutest1.html">1</a></div><div class="box2"><a href="tabutest2.html">2</a></div><div class="box"><a href="tabutest3.html">3</a></div><div class="box"><a href="tabutest4.html">4</a></div>
<br clear=left>
<h1>3page</h1>
</div>
</body>
</html>

3ページ

<html>
<head>
<style>
#main {
width: 336px;
height: 300px;
border : 1px solid #ccc;
}
.box {
width: 80px;
height: 30px;
float :left;
border : 1px solid #000;
background-color : #ccc;
margin-right:1px;
margin-left:1px;
}
.box a {
display:block;
color:#000000;
font-size : 13px;
/*text-decoration:none;*/
text-align : center;
font-weight: bold;
font-size : 16px;
padding-bottom: 7px;
padding-top: 7px;
}
.box2 {
width: 80px;
height: 30px;
float :left;
border-top : 1px solid #ccc;
border-left : 1px solid #ccc;
border-right : 1px solid #ccc;
border-bottom : 0px solid #ccc;
margin-right:1px;
margin-left:1px;
}
.box2 a { display:block;
padding-bottom: 7px;
padding-top: 7px;
text-align : center;
color:red;
font-weight: bold;
}
</style>
</head>
<body>
<div id="main">
<div class="box"><a href="tabutest1.html">1</a></div><div class="box"><a href="tabutest2.html">2</a></div><div class="box2"><a href="tabutest3.html">3</a></div><div class="box"><a href="tabutest4.html">4</a></div>
<br clear=left>
<h1>3page</h1>
</div>
</body>
</html>

4ページ

<html>
<head>
<style>
#main {
width: 336px;
height: 300px;
border : 1px solid #ccc;
}
.box {
width: 80px;
height: 30px;
float :left;
border : 1px solid #000;
background-color : #ccc;
margin-right:1px;
margin-left:1px;
}
.box a {
display:block;
color:#000000;
font-size : 13px;
/*text-decoration:none;*/
text-align : center;
font-weight: bold;
font-size : 16px;
padding-bottom: 7px;
padding-top: 7px;
}
.box2 {
width: 80px;
height: 30px;
float :left;
border-top : 1px solid #ccc;
border-left : 1px solid #ccc;
border-right : 1px solid #ccc;
border-bottom : 0px solid #ccc;
margin-right:1px;
margin-left:1px;
}
.box2 a { display:block;
padding-bottom: 7px;
padding-top: 7px;
text-align : center;
color:red;
font-weight: bold;
}
</style>
</head>
<body>
<div id="main">
<div class="box"><a href="tabutest1.html">1</a></div><div class="box"><a href="tabutest2.html">2</a></div><div class="box"><a href="tabutest3.html">3</a></div><div class="box2"><a href="tabutest4.html">4</a></div>
<br clear=left>
<h1>4page</h1>
</div>
</body>
</html>
CSSを使ったタブメニュー/2014/12/24 14:43/css/ トラックバック(-)/ comment(0)

comment

投稿















管理者にだけ表示を許可する

| ホーム |

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。