メニュー

サイト構成
背景画像を元にサイトを構成

CSS
DIVタグで枠を作成
DIVタグで見出しに枠を作成
画像に文字を表示
マウスフォーカスで背景画像変更
tableタグでボタンを作成

トップ
E-Mail
xml

ASP.Netのお勉強
VB.Netのお勉強
phpのお勉強
Excel マクロ・VBAのお勉強
ASP.Netで掲示板を作成しよう
AJAXのお勉強
Javaのお勉強
連想書籍検索
世界の観光地検索
路線図
総合サイトCocoaLiz
tableタグでボタンを作成(CSS)@Webデザインのお勉強

tableタグとCSSを用いて、ボタンみたいな物を作成します。
こん感じのボタンです。


<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<META http-equiv="Content-Style-Type" content="text/css">
<title></title>
<style type="text/css"> <!--

/*
セルのボーダの間隔をあける
*/
#tbl1 {
border-collapse: separate;
}

/*
tableのtdタグの枠線と色を指定
*/
#tbl1 td {
border-width: 2px;
border-style: solid;
border-color: #CCCCCC #333333 #333333 #CCCCCC;
background-color: #666666;
padding: 3px;
text-align: center;
}

/*
リンクの設定
*/
#tbl1 a {
text-decoration: none;
font-weight: bold;
color : #FFFFFF;
}

/*
フォーバー時の設定
*/
#tbl1 a:hover {
color: #FF6666;
}

--> </style>
</head>
<body>
<table id="tbl1" width="650">
<tr>
<td width="20%"><a href="#">LINK1</a></td>
<td width="20%"><a href="#">LINK2</a></td>
<td width="20%"><a href="#">LINK3</a></td>
<td width="20%"><a href="#">LINK4</a></td>
<td width="20%"><a href="#">LINK5</a></td>
</tr>
</table>
</body>
</html>




Copyright (C) 2008 Webデザインのお勉強. All Rights Reserved.